2020最新：50道有答案的前端面试题

现在网络上的面试题一大堆，鱼龙混杂，一方面多数题目质量不高，另一方面有答案的很少，即使拿到面试题对自己的帮助也不大，而且还浪费自己的时间。

最近我花了一些时间，为大家整理了2020年各一、二线互联网公司的前端面试题，内容包括JavaScript、算法、网络&安全、Vue、React等大量的前端知识点和相关面试题。答案和解析也整理在文中了，整理不易，麻烦各位走过路过的壮士给颗小红心，如果可以点赞评论转发三连更好，感谢大家

因篇幅太长，本文收录了50道

1.写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b 的时间，然后写一个 myClear，停止上面的 mySetInterVal

公司：头条

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/7

2.合并二维有序数组成一维有序数组，归并排序的思路
公司：头条

分类：算法

答案&解析:https://github.com/lgwebdream/FE-Interview/issues/8

3.斐波那契数列
公司：腾讯、CVTE、微软

分类：算法

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/9

4.字符串出现的不重复最长长度
公司：腾讯

分类：算法

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/10

5.介绍chrome 浏览器的几个版本
公司：滴滴

分类：网络&安全

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/11

6.React 项目中有哪些细节可以优化？实际开发中都做过哪些性能优化
公司：滴滴、掌门一对一、网易、有赞、沪江、喜马拉雅、酷家乐、快手

分类：React

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/12

7.react 最新版本解决了什么问题加了哪些东西
公司：滴滴

分类：React

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/13

8.说一下 Http 缓存策略，有什么区别，分别解决了什么问题
公司：滴滴、头条、网易、易车、脉脉、掌门一对一、虎扑、挖财、爱范儿

分类：网络&安全

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/14

9.介绍防抖节流原理、区别以及应用，并用JavaScript进行实现
公司：滴滴、虎扑、挖财、58、头条

分类：JavaScript、编程题

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/15

10.前端安全、中间人攻击
公司：滴滴

分类：网络&安全

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/16

11.对闭包的看法，为什么要用闭包？说一下闭包原理以及应用场景
公司：滴滴、携程、喜马拉雅、微医、蘑菇街、酷家乐、腾讯应用宝、安居客

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/17

12.css 伪类与伪元素区别
公司：滴滴

分类：Css

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/18

13.有一堆整数，请把他们分成三份，确保每一份和尽量相等（11，42，23，4，5，6 4 5 6 11 23 42 56 78 90）

公司：滴滴

分类：算法

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/19

14.实现 lodash 的_.get
公司：滴滴

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/20

15.实现 add(1)(2)(3)
公司：滴滴

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/21

16.实现链式调用
公司：滴滴

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/22

17.React 事件绑定原理
公司：滴滴、沪江

分类：React

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/23

18.类数组和数组的区别，dom 的类数组如何转换成数组
公司：海康威视

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/24

19.webpack 做过哪些优化，开发效率方面、打包策略方面等等
公司：滴滴、快手、掌门一对一、高思教育

分类：工程化

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/25

20.说一下事件循环机制(node、浏览器)
公司：滴滴、伴鱼、高德、自如、虎扑、58

分类：Node、JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/26

21.如何封装 node 中间件
公司：滴滴、酷狗

分类：Node

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/27

22.node 中间层怎样做的请求合并转发
公司：易车

分类：Node

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/28

23.介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise
公司：滴滴、头条、喜马拉雅、兑吧、寺库、百分点、58、安居客

分类：JavaScript、编程题

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/29

24.实现 Promise.all

Promise.all = function (arr) {
  // 实现代码
};

公司：滴滴、头条、有赞、微医

分类：JavaScript、编程题

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/30

25.React 组件通信方式
公司：滴滴、掌门一对一、喜马拉雅、蘑菇街

分类：React

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/31

26.redux-saga 和 mobx 的比较
公司：掌门一对一

分类：React

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/32

27.说一下 react-fiber
公司：头条、滴滴、菜鸟网络、挖财、喜马拉雅

分类：React

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/33

28.手写发布订阅
公司：滴滴、头条

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/34

29.手写数组转树
公司：滴滴

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/35

30.手写用 ES6proxy 如何实现 arr[-1] 的访问
公司：滴滴

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/36

31.请写出下面代码执行的的结果

console.log(1);
setTimeout(() => {
  console.log(2);
  process.nextTick(() => {
    console.log(3);
  });
  new Promise((resolve) => {
    console.log(4);
    resolve();
  }).then(() => {
    console.log(5);
  });
});
new Promise((resolve) => {
  console.log(7);
  resolve();
}).then(() => {
  console.log(8);
});
process.nextTick(() => {
  console.log(6);
});
setTimeout(() => {
  console.log(9);
  process.nextTick(() => {
    console.log(10);
  });
  new Promise((resolve) => {
    console.log(11);
    resolve();
  }).then(() => {
    console.log(12);
  });
});

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/37

32.写出执行结果

function side(arr) {
  arr[0] = arr[2];
}
function a(a, b, c = 3) {
  c = 10;
  side(arguments);
  return a + b + c;
}
a(1, 1, 1);

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/38

33.写出执行结果

var min = Math.min();
max = Math.max();
console.log(min < max);

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/39

34.写出执行结果,并解释原因

var a = 1;
(function a () {
    a = 2;
    console.log(a);
})();

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/40

35.写出执行结果,并解释原因

var a = [0];
if (a) {
  console.log(a == true);
} else {
  console.log(a);
}

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/41

36.写出执行结果,并解释原因

(function () {
  var a = (b = 5);
})();

console.log(b);
console.log(a);

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/42

37.写出执行结果,并解释原因

var fullname = 'a';
var obj = {
   fullname: 'b',
   prop: {
      fullname: 'c',
      getFullname: function() {
         return this.fullname;
      }
   }
};
 
console.log(obj.prop.getFullname()); // c
var test = obj.prop.getFullname;
console.log(test());  // a

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/43

38.写出执行结果,并解释原因

var company = {
    address: 'beijing'
}
var yideng = Object.create(company);
delete yideng.address
console.log(yideng.address);

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/44

39.写出执行结果,并解释原因

var foo = function bar(){ return 12; };
console.log(typeof bar());

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/45

40.写出执行结果,并解释原因

var x=1;
if(function f(){}){
    x += typeof f;
}
console.log(x)

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/46

41.写出执行结果,并解释原因

function f(){
      return f;
 }
console.log(new f() instanceof f);

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/47

42.写出执行结果,并解释原因

var foo = {
        bar: function(){
            return this.baz;
        },
         baz:1
    }
console.log(typeof (f=foo.bar)());

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/48

43.说一下React Hooks在平时开发中需要注意的问题和原因？
答案&解析：https://github.com/lgwebdream/FE-Interview-Planet/issues/906

44.Vue组件中写name选项有除了搭配keep-alive还有其他作用么？你能谈谈你对keep-alive了解么？（平时使用和源码实现方面）

分类：Vue

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/905

45.Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题？你能说说如下代码的实现原理么？

Vue.set (object, propertyName, value) 
vm.$set (object, propertyName, value)

分类：Vue

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/139

46.既然 Vue 通过数据劫持可以精准探测数据在具体dom上的变化,为什么还需要虚拟 DOM diff 呢?
分类：Vue

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/904

47.关于Vue.js虚拟DOM的优缺点说法正确的是？（多选）
A.可以保证性能下限，比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；B.无需手动操作DOM，不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；C.可以进行极致优化：虚拟 DOM + 合理的优化，可以使性能达到极致 D.可以跨平台，虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

分类：Vue

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/52

48.下面代码输出什么？

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/53

49.写出执行结果,并解释原因

const num = {
  a: 10,
  add() {
    return this.a + 2;
  },
  reduce: () => this.a -2;
};
console.log(num.add());
console.log(num.reduce());

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/54

50.写出执行结果,并解释原因

const person = { name: "yideng" };

function sayHi(age) {
  return `${this.name} is ${age}`;
}
console.log(sayHi.call(person, 5));
console.log(sayHi.bind(person, 5));

分类：JavaScript

答案&解析：https://github.com/lgwebdream/FE-Interview/issues/55

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料大厂面试真题免费获取，希望能够对你们有所帮助。