2020前端面试题目

深碍√TFBOYSˉ_ 2023-02-21 06:55 148阅读 0赞

**最近面试招人，加上自己面试各种公司的经历（深圳），不定期补充一些面试常问的问题，分享给大家，理论问题为主，笔试的话建议大家直接去刷题哦。**

1.什么是BFC？一个块格式化上下文（block formatting context）  
是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

2.http协议理解，说一下状态码

3.为什么会跨域 如何处理跨域？

4.js 微任务 （主程序和和settimeout都是宏任务，两个promise是微任务  
宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。  
微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。  
宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

5.数组去重的多个方法 （一般可能想听到…set）

6.闭包是什么？闭包的作用是什么？闭包有哪些使用场景？

7.谈谈垃圾回收机制的方式及内存管理？

8.es6新特性（多说一些方法，定义和语法糖就行）

9.深拷贝&浅拷贝区别 （自己要会手写哦，根据instanceof 递归）

10.for…in 和 for…of 有什么区别？

11.vue组件通信的几种方式  
12. EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？

13.vue 双向绑定原理  
Vue是采用数据劫持配合发布者-订阅者模式，通过Object.defineProperty来()来劫持各个属性的getter和setter  
在数据发生变化的时候，发布消息给依赖收集器，去通知观察者，做出对应的回调函数去更新视图。  
具体就是：  
MVVM作为绑定的入口，整合Observe,Compil和Watcher三者，通过Observe来监听model的变化  
通过Compil来解析编译模版指令，最终利用Watcher搭起Observe和Compil之前的通信桥梁  
从而达到数据变化 => 更新视图，视图交互变化(input) => 数据model变更的双向绑定效果。

14.常用的两个路由守卫：router.beforeEach 和 router.afterEach  
每个守卫方法接收三个参数：  
to: Route: 即将要进入的目标 路由对象  
from: Route: 当前导航正要离开的路由  
next: Function: 一定要调用该方法来 resolve 这个钩子。  
Vue.js中this.$nextTick()的使用

15.搭建脚手架，项目搭建的经验  
16.前后端分离项目中，遇到的困难，这么解决的

17.JS的节流、防抖函数  
18.前端性能优化有哪些（从css，文件打包，js，请求等角度多说一些）  
19.vue3.0的新特性

20.js有哪些遍历数组的方法  
ES5方法：  
1）for循环；

通过下标遍历数组的每一项；

2）array.forEach((item, index, array)=>\{ //得到每一项的值item，下标index，数组array \})

类似于for；

3）array.map((item, index, array)=>\{ return //格式化数组 \})

用于格式化数组，返回格式化后的一个数组；如无return，则返回由length个undefined组成的数组；

4）array.filter(((item, index, array)=>\{ return //判断条件 \}))

根据条件过滤元素，返回符合条件的元素组成的一个数组；

5）array.every(((item, index, array)=>\{ return //判断条件 \}))

如果每个元素都符合条件，则返回true，否则返回false；

6）array.some(((item, index, array)=>\{ return //判断条件 \}))

只要有一个元素符合条件，就返回true，否则返回false；

7）array.reduce((prev,cur,index,array)=>\{\})

从左到右遍历数组，并返回回调函数的值（应用于求和，求幂等）；prev为上一轮函数执行结果（previousResult），cur为当前值(currentValue)

8）array.reduceRight((prev,cur,index,array)=>\{\})

从右到左遍历数组，并返回回调函数的值；

ES6方法：

1）for(let item of array)\{ //等到每个元素 \}

for(let index of array.keys()) {   //keys()返回数组的键（index）  }
    
     for(let keyAndValue of array.entries()){   //entries()返回数组的键值对（index:element）  }

2）array.find((value, index, array)=>\{ return //条件 \}

返回第一个符合条件的元素，如果没找到返回undefined（找到第一个符合条件的元素，则停止遍历）

3）array.findIndex((value, index, array)=>\{ return //条件 \}

返回第一个符合条件的元素下标，如果没找到则返回-1（找到第一个符合条件的元素，则停止遍历）

21.箭头函数的特性

1）箭头函数是匿名函数，自身没有this和arguments，它的this从上下文捕捉而来；  
2）箭头函数不能作为构造函数，和 new 一起用就会抛出错误；  
3）箭头函数没有原型属性（prototype）；  
4）箭头函数不能当做Generator函数,不能使用yield关键字；

22.web跨域方式

同源策略：协议，域名，端口三者中有一个不同就算跨域。  
跨域方式：  
1）JSONP，通过