【2023秋招面经】20220713兴业数金前端一面
前言
本系列主要整理博主2023秋招的面试情况。本节介绍20220713兴业数金前端一面。
文章目录
- 前言
- 1. 自我介绍
- 2. 为什么要学习vue?
- 3. 双向数据绑定和单向数据绑定的区别,以及双向数据绑定的优缺点?
- 4. 双向数据绑定报错的话要怎么寻找问题?
- 5. 解释一下防抖和节流?
- 6. 项目用什么打包的?
- 7. 说一下webpack里做了哪些前端优化?
- 8. 对一个绝对定位的盒子怎么水平垂直居中?
- 9. 隐藏元素的方法?
- 10. Promise().then()返回的也是Promise对象,要怎么判断这个Promise对象的状态?
- 11. import 和 export的都是什么?
- 12. 解释一下项目中的菜单权限的实现?
- 13. 登录中的token是怎么存储的?
- 同学问到的一些通用问题:
- 1. 良好的编码习惯有什么?
- 2. Promise()中的race和all的区别?
- 3. 解释一下组件化?
- 4. 解释一下微任务和宏任务?
- 5. 解释一下深浅拷贝?
1. 自我介绍
2. 为什么要学习vue?
答:首先因为vue是当前前端较为流行的框架,使用vue的公司较多,也证明了这是一个非常成功的框架;第二是因为这个框架是国人编写的,简单易学,上手较快;第三因为这个框架使用了双向数据绑定,数据和视图的交互更加方便;最后因为它含有组件化、视图数据结构分离、虚拟DOM、运行速度快等特点。
3. 双向数据绑定和单向数据绑定的区别,以及双向数据绑定的优缺点?
答:双向数据绑定就是当我们采用MV模式时,就是模型-视图模式时,通常,我们需要编写代码,将从服务器获取的数据进行“渲染”,展现到视图上。每当数据有变更时,我们会再次进行渲染,从而更新视图,使得视图与数据保持一致。而另一方面,页面也会通过用户的交互,产生状态、数据的变化,这个时候,我们则编写代码,将视图对数据的更新同步到数据,以致于同步到后台服务器。而单向数据绑定只有模型----->视图的一个方向的数据传递。
双向数据绑定的优缺点:
①优点:用户在视图上的修改会自动同步到数据模型中去,数据模型中值的变化也会立刻同步到视图中去;无需进行和单向数据绑定的那些相关操作,会简化大量业务无关的代码。
②缺点:增加了出错时的debug的难度、消耗较大,部署很大网站的时候会出现问题。
4. 双向数据绑定报错的话要怎么寻找问题?
答:可以打开开发者模式,会有相应的报错,比如props不存在、期待一个Object你传入了一个Array之类的,可以直接从报错中找到。
5. 解释一下防抖和节流?
- 防抖:前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行最后一次;
- 节流:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发
6. 项目用什么打包的?
答:webpack。
7. 说一下webpack里做了哪些前端优化?
- 压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件, 利⽤ cssnano (css-loader?minimize)来压缩css
- 利⽤CDN加速: 在构建过程中,将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
- Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
- Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
- 提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
8. 对一个绝对定位的盒子怎么水平垂直居中?
①绝对定位+margin:auto ②绝对定位+margin负值 ③绝对定位+translate
9. 隐藏元素的方法?
(1)dispaly:none 消失+重排+重绘+绑定事件不触发+无过渡;
(2)visibility:hidden 存在+不重排+重绘+绑定事件不触发+有过渡;
(3)opacity:0 存在+不重排+不一定重绘+触发自身绑定+有过渡;
(4)position:absolute 移除视线;
(5)z-index:负值 使用其他元素遮盖;
(6)transform:scale(0,0) 缩放元素为0 存在+绑定事件不触发。
10. Promise().then()返回的也是Promise对象,要怎么判断这个Promise对象的状态?
let p1 = new Promise(function(){})
let p2 = p1.then((resolve,reject)=>{})
如果p1的状态的pending,那么p2的状态也是pending;
如果p1的状态的resolved,then会执行resolve,那么p2的状态由resolve的返回值决定;
- 如果resolve()的返回值不是一个promise对象,那么p2的状态是resolved,且p2的值就是resolve()的return值。
- 如果resolve()的返回值是一个promise对象,那么p2的状态以及值由这个promise对象为准。
- 如果resolve()的返回值内部出现了错误(或者是用户抛出错误),那么p2的状态是rejected,且p2的值就是错误对象。
如果p1的状态是rejected,then会去执行reject(),那么p2的状态由reject()的返回值决定。
- 如果reject()的返回值不是一个promise对象,那么p2的状态是resolved,且p2的值就是resolve()的return值。
- 如果reject()的返回值是一个promise对象,那么p2的状态以及值由这个promise对象为准。
- 如果resolve()的返回值内部出现了错误(或者是用户抛出错误),那么p2的状态是rejected,且p2的值就是错误对象。
11. import 和 export的都是什么?
- export方式导出对象、方法、引用,但是导入的时候不可直接指定对象、方法,需要通过大括号"{}"来指定属性、变量名,如下:
//test1.js
import axios from 'axios'export function get({url,params = {}}) {return new Promise((resolve,reject) => {axios.get(url,{params:params}).then( response =>{landing(url, params, response.data);resolve(response.data);}).catch(error =>{reject(error)})})}//test2.js
import { get } from '../utils/http';
//import { get as http } from '../utils/http';
- export default导出可不必须指定函数名、类名等,在一个文件或模块中,export、import 可以有多个,export default 仅有一个,export default 向外暴露的成员,可以使用任意变量来接收且import时不需要用大括号嵌套,也不能用大括号嵌套,如:
//test1.js
export default function HttpData (fecth,url, parm) {let _data = "";return new Promise((resolve, reject) => {switch (fecth){case "get":get(url, parm).then(function (response) {resolve (response);}).catch(function (error) {console.log("get request failed.",error);});break;case "post":post(url, parm).then(function (response) {resolve (response);}).catch(function (error) {});break;default:break;}});
}//test2.js
import http from '../utils/http';
12. 解释一下项目中的菜单权限的实现?
答:由于不同用户登录以后应该有不同的权限,可以看到不同的内容,因此需要给不同的用户在菜单上分配不同的权限。菜单权限最重要的一点就是:**当获取用户信息的时候,服务器会把响应的用户拥有菜单的权限信息返回,需要根据用户身份对比出,当前这个用户需要展示哪些菜单。**本项目中,服务器会返回给用户拥有的菜单权限信息,在vuex中可以获取到,然后通过提取路由、对比路由、重组路由就可以得到当前用户用户的异步路由+常量路由,进一步修改路由的渲染数组,就能最终展示出菜单权限。
13. 登录中的token是怎么存储的?
答:服务器下发的token,是用户唯一的标识符,token不应该存在vuex中,因为如果存在vuex中,刷新页面token就会消失,因此要把token放在本地存储中,这样在导航守卫的过程中就可以获取token,进而判断是否还能点击登录页面。
同学问到的一些通用问题:
1. 良好的编码习惯有什么?
- 善于用语义化标签给网页布局,如header , footer , aside , content ,nav等;
- 将HTML标签和CSS样式表分割开来;
- 注意文件的命名规范,如global.css , layout.css 等;
- CSS中class与id不重名,书写样式的时候遵循布局定位属性–>自身属性–>文本属性–>其他属性的顺序;
- 为复杂的代码逻辑编写注释。
2. Promise()中的race和all的区别?
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。Promise.race()将里面返回最快的结果返回,不管结果本身是成功状态还是失败状态。当要做一件事,超过多长时间就不做了,可以用这个方法来解决:
Promise.race([promise1,timeOutPromise(5000)]).then(res=>{})
3. 解释一下组件化?
- 组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一,它使开发者使用小型、独立和通常可复用的组件构建大型应用;
- 组件化开发能大幅提高应用开发效率、测试性、复用性等;
- 组件使用按分类有:页面组件、业务组件、通用组件;
- vue的组件是基于配置的,我们通常编写的组件是组件配置而非组件,框架后续会生成其构造函数,它们基于VueComponent,扩展于Vue;
- vue中常见组件化技术有:属性prop,自定义事件,插槽等,它们主要用于组件通信、扩展等;
- 合理的划分组件,有助于提升应用性能;
- 组件应该是高内聚、低耦合的;
- 遵循单向数据流的原则。
4. 解释一下微任务和宏任务?
答:JS是一门单线程语言,JS实现单线程非阻塞的方法就是事件循环。JS把任务分为同步任务和异步,当执行遇到同步任务时,则立即执行,如果遇到异步任务,则挂起任务,异步任务也分为宏任务和微任务,微任务比如Promise.then、nextTick、await/async、MutonObserver、Object.observe,微任务要在主函数执行结束、当前宏任务结束之前执行,而宏任务包括执行script标签内部代码、setTimeout/setInterval、ajax请求、postMessageMessageChannel、setImmediate,I/O。
5. 解释一下深浅拷贝?
答:深拷贝和浅拷贝是针对引用数据类型来说的。浅拷贝就是只拷贝一层,深层次的引用类型则共享内存地址。通过浅拷贝得到的引用数据,如果修改第一层的数据,那么新数据改变不会影响原数据;如果修改第二层的引用类型数据,则新旧数据会一起改变。存在浅拷贝现象的有:①Object.assign ;②Array.prototype.slice()、Array.prototype.concat();③使用拓展运算符实现的复制。
深拷贝开辟一个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。常见的深拷贝方式有:①_.cloneDeep()、②jQuery.extend()、JSON.stringify()、手写循环递归。
【2023秋招面经】20220713兴业数金前端一面相关推荐
- 21届秋招前端面经 -- 兴业数金
JS事件流 事件流描述的是从页面中接收事件的顺序. 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流. 比如我们给一个div 注册了点击事件: DOM 事件流分为3个阶段: ...
- 【2023秋招面经】经纬恒润前端面经总结
前言 本系列主要整理博主2023牛客网秋招经纬恒润前端面经总结. 文章目录 前言 本系列主要整理博主2023牛客网秋招经纬恒润前端面经总结. 问题总结 1. 问3>2>1和1<2&l ...
- 【2023秋招】10月9日字节跳动校招题目
完整真题解析:[2023秋招]10月9日字节跳动校招题目以及满分解析 第一题 题目内容 给定一个大小为 nnn 的数组 aaa , 其中 aia_iai 代表从 111 号节点到 iii 号节点的最 ...
- 2023秋招大厂经典面试题及答案整理归纳(1-20)校招必看
目录 前言 1. 使用mysql索引都有哪些原则?索引什么数据结构? 1). 对于查询频率高的字段创建索引: 2). 对排序.分组.联合查询频率高的字段创建索引: 3). 索引的数目不宜太多 4). ...
- 【2023秋招】9月京东校招题目
完整真题解析:[2023秋招]9月京东校招题目(Js实现)以及满分解析 题解:第一题 题目大意 给定一个字符串,只包含 r.e.dr.e.dr.e.d ,每次操作可以删除相邻两个相同字符并添加一个新的 ...
- 【2023秋招面经】20220805安恒信息实习
前言 本系列主要整理博主2023秋招的面试情况.本节介绍20220805安恒信息实习. 文章目录 前言 1. 自我介绍 2. 一个div盒子,使他垂直水平居中,至少说出三种 3. 在div里增加一个行 ...
- 【2023秋招】10月11日百度数据挖掘岗校招题目
2023大厂真题提交网址(含题解): www.CodeFun2000.com(http://101.43.147.120/) 最近我们一直在将收集到的机试真题制作数据并搬运到自己的OJ上,供大家免费练 ...
- 【2023秋招】10月13日荣耀校招三道题
2023大厂真题提交网址(含题解): www.CodeFun2000.com(http://101.43.147.120/) 最近我们一直在将收集到的机试真题制作数据并搬运到自己的OJ上,供大家免费练 ...
- 【2023秋招】10月19日华为通用软件开发三道题
2023大厂真题提交网址(含题解): www.CodeFun2000.com(http://101.43.147.120/) 最近我们一直在将收集到的机试真题制作数据并搬运到自己的OJ上,供大家免费练 ...
最新文章
- c语言编写二次方程求根程序,一元二次方程求解程序完整代码
- 怎样知道邮箱的端口_AllenNLP源码拓展——训练结束向邮箱发邮件
- VS2015中的项目类图
- python批量上传 服务器_Python Tornado批量上传图片并显示功能
- HealthKit有名无实,疑点重重
- (转)es 聚合查询并返回每个组的数据
- 高级PHP工程师所应该具备的专业素养
- Docker 方式安装 gitlab ( 阿里云ECS )
- ASP.Net数据库如何存取图片
- torch.nn 介绍(部分)
- poj 1511 Invitation Cards spfa 基础题!!虽然我做的比较坎坷!!可以练手啊!!
- 流量控制理论与Sentinel
- 魔百和CM201-1-YS易视腾代工-免拆机-线刷固件包
- 阿里云服务器Intel Xeon Platinum 8269CY(Cascade Lake)处理器CPU性能评测
- 如何在鸿蒙系统中移植 Paho-MQTT 实现MQTT协议
- 图片如何缩小到100k?怎么把图片压缩到指定大小?
- 【计算机组成原理】=【考研复试面试题】- 整合全家桶
- HTML的iframe使用
- 2014年12月23日 平常心
- 【渝粤教育】电大中专幼儿园课程论 (11)作业 题库
热门文章
- [源生万物以养人,人创区块以报猿]:开源社区与项目激励机制的思考
- 修改注册表实现在文件夹中右键以管理员身份运行CMD
- 关于VR产品的前世今生,看这一篇文章就够了
- 3σ定律(three-sigma rule)/ 68–95–99.7原则
- 网络缓冲 linux,一个简单的linux缓冲区利用
- 你咪当我lu lu喎!
- 2021-06-13-首钢大桥-戒台寺-潭拓寺-王平镇-妙峰山-首钢大桥
- 【信息安全】信息系统应急计划
- PHP代码安全基础1
- Ldap同步报错 [LDAP: error code 21 - 00000057: LdapErr: DSID-0C090EC7