大前端工程师成长路线

title: 面试题 search: true

# date: 2021-11-21 20:01:49 tags: [前端面试题] photos: description: comments:

# 转自https://github.com/wangjxk

前端面试题及答案汇总

# 前端面试题及答案汇总

# 第 9 期：Async/Await 如何通过同步的方式实现异步

欢迎在 Issue 区留下你的答案。

# 第 10 期：异步笔试题

请写出下面代码的运行结果

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

解析：关于第10题的一些见解 (opens new window)

# 第 11 题：算法手写题

已知如下数组：

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

解析：第11题：将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组 (opens new window)

# 第 12 题：JS 异步解决方案的发展历程以及优缺点。

解析：第十二题 (opens new window)

# 第 13 题：Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？

解析：关于第13题的见解 (opens new window)

# 第 14 题：情人节福利题，如何实现一个 new

解析：14题情人节快乐！ (opens new window)

# 第 15 题：简单讲解一下http2的多路复用

解析：第15题：简单讲解一下http2的多路复用 (opens new window)

# 第 16 题：谈谈你对TCP三次握手和四次挥手的理解

解析：关于第16题的见解 (opens new window)

# 第 17 题：A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态

如果A 与 B 建立了正常连接后，从未相互发过数据，这个时候 B 突然机器重启，问 A 此时处于 TCP 什么状态？如何消除服务器程序中的这个状态？（超纲题，了解即可）

解析：关于17题的见解 (opens new window)

# 第 18 题：React 中 setState 什么时候是同步的，什么时候是异步的？

解析：第18题：React 中 setState 什么时候是同步的，什么时候是异步的？ (opens new window)

# 第 19 题：React setState 笔试题，下面的代码输出什么？

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};

解析：关于第19题的见解 (opens new window)

# 第 20 题：介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

解析：第20题：介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？ (opens new window)

# 第 21 题：有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣

Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

解析：第21题：介绍它们之间的区别和优劣 (opens new window)

# 第 22 题：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

解析：第22题：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化 (opens new window)

# 第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景

解析：第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景 (opens new window)

# 第 24 题：聊聊 Redux 和 Vuex 的设计思想

解析：第 24 题：聊聊 Redux 和 Vuex 的设计思想 (opens new window)

# 第 25 题：说说浏览器和 Node 事件循环的区别

解析：第25题：浏览器和Node 事件循环的区别 (opens new window)

# 第 26 题：介绍模块化发展历程

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type="module"> 这几个角度考虑。

解析：第26 题: 前端中的模块化开发 (opens new window)

# 第 27 题：全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？。

解析：第27题：关于 const 和 let 声明的变量不在 window 上 (opens new window)

解析：第28题：cookie 和 token 都存放在 header 中，为什么不会劫持 token？ (opens new window)

# 第 29 题：聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

解析：第29题 (opens new window)

# 第 30 题：两个数组合并成一个数组

请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。

解析：第 30 题 (opens new window)

# 第 31 题：改造下面的代码，使之输出0 - 9，写出你能想到的所有解法。

for (var i = 0; i< 10; i++){
	setTimeout(() => {
		console.log(i);
    }, 1000)
}

解析：第 31 题 (opens new window)

# 第 32 题：Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法。

解析：第 32 题 (opens new window)

# 第 33 题：下面的代码打印什么内容，为什么？

var b = 10;
(function b(){
    b = 20;
    console.log(b); 
})();

解析：第 33 题 (opens new window)

# 第 34 题：简单改造下面的代码，使之分别打印 10 和 20。

var b = 10;
(function b(){
    b = 20;
    console.log(b); 
})();

解析：第 34 题 (opens new window)

# 第 35 题：浏览器缓存读取规则

可以分成 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那请求的时候 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中？

解析：第 35 题 (opens new window)

# 第 36 题：使用迭代的方式实现 flatten 函数。

解析：第 36 题 (opens new window)

# 第 37 题：为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？

解析：第 37 题 (opens new window)

# 第 38 题：下面代码中 a 在什么情况下会打印 1？

var a = ?;
if(a == 1 && a == 2 && a == 3){
 	console.log(1);
}

解析：第 38 题 (opens new window)

# 第 39 题：介绍下 BFC 及其应用。

解析：第 39 题 (opens new window)

← 前端面试题集锦