2020最新：100道有答案的前端面试题（上）

网上的面试题一大堆，鱼龙混杂，一方面多数题目质量不高，另一方面有答案的很少，即使拿到面试题对自己的帮助也不大。

最近我花了一些时间，为大家整理了2020年各一、二线互联网公司的前端面试题，内容包括JavaScript、算法、网络&安全、Vue、React等大量的前端知识点和相关面试题。答案和解析也整理在文中了，整理不易

因篇幅太长，本文收录前50道，后50道将在下篇更新，欢迎关注。

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

公司：头条

分类：JavaScript

答案&解析

2.合并二维有序数组成一维有序数组，归并排序的思路

公司：头条

分类：算法

答案&解析

3.斐波那契数列

公司：腾讯、CVTE、微软

分类：算法

答案&解析

4.字符串出现的不重复最长长度

公司：腾讯

分类：算法

答案&解析

5.介绍chrome 浏览器的几个版本

公司：滴滴

分类：网络&安全

答案&解析

6.React 项目中有哪些细节可以优化？实际开发中都做过哪些性能优化

公司：滴滴、掌门一对一、网易、有赞、沪江、喜马拉雅、酷家乐、快手

分类：React

答案&解析

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

公司：滴滴

分类：React

答案&解析

8.说一下 Http 缓存策略，有什么区别，分别解决了什么问题

公司：滴滴、头条、网易、易车、脉脉、掌门一对一、虎扑、挖财、爱范儿

分类：网络&安全

答案&解析

9.介绍防抖节流原理、区别以及应用，并用JavaScript进行实现

公司：滴滴、虎扑、挖财、58、头条

分类：JavaScript、编程题

答案&解析

10.前端安全、中间人攻击

公司：滴滴

分类：网络&安全

答案&解析

11.对闭包的看法，为什么要用闭包？说一下闭包原理以及应用场景

公司：滴滴、携程、喜马拉雅、微医、蘑菇街、酷家乐、腾讯应用宝、安居客

分类：JavaScript

答案&解析

12.css 伪类与伪元素区别

公司：滴滴

分类：Css

答案&解析

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

公司：滴滴

分类：算法

答案&解析

14.实现 lodash 的_.get

公司：滴滴

分类：JavaScript

答案&解析

15.实现 add(1)(2)(3)

公司：滴滴

分类：JavaScript

答案&解析

16.实现链式调用

公司：滴滴

分类：JavaScript

答案&解析

17.React 事件绑定原理

公司：滴滴、沪江

分类：React

答案&解析

18.类数组和数组的区别，dom 的类数组如何转换成数组

公司：海康威视

分类：JavaScript

答案&解析

19.webpack 做过哪些优化，开发效率方面、打包策略方面等等

公司：滴滴、快手、掌门一对一、高思教育

分类：工程化

答案&解析

20.说一下事件循环机制(node、浏览器)

公司：滴滴、伴鱼、高德、自如、虎扑、58

分类：Node、JavaScript

答案&解析

21.如何封装 node 中间件

公司：滴滴、酷狗

分类：Node

答案&解析

22.node 中间层怎样做的请求合并转发

公司：易车

分类：Node

答案&解析

23.介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise

公司：滴滴、头条、喜马拉雅、兑吧、寺库、百分点、58、安居客

分类：JavaScript、编程题

答案&解析

24.实现 Promise.all

<span>Promise</span>.all = <span><span>function</span> (<span>arr</span>) </span>{
  <span>// 实现代码</span>
};
<span class="copy-code-btn">复制代码</span>

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

分类：JavaScript、编程题

答案&解析

25.React 组件通信方式

公司：滴滴、掌门一对一、喜马拉雅、蘑菇街

分类：React

答案&解析

26.redux-saga 和 mobx 的比较

公司：掌门一对一

分类：React

答案&解析

27.说一下 react-fiber

公司：头条、滴滴、菜鸟网络、挖财、喜马拉雅

分类：React

答案&解析

28.手写发布订阅

公司：滴滴、头条

分类：JavaScript

答案&解析

29.手写数组转树

公司：滴滴

分类：JavaScript

答案&解析

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

公司：滴滴

分类：JavaScript

答案&解析

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

<span>console</span>.log(<span>1</span>);
setTimeout(<span><span>()</span> =></span> {
  <span>console</span>.log(<span>2</span>);
  process.nextTick(<span><span>()</span> =></span> {
    <span>console</span>.log(<span>3</span>);
  });
  <span>new</span> <span>Promise</span>(<span>(<span>resolve</span>) =></span> {
    <span>console</span>.log(<span>4</span>);
    resolve();
  }).then(<span><span>()</span> =></span> {
    <span>console</span>.log(<span>5</span>);
  });
});
<span>new</span> <span>Promise</span>(<span>(<span>resolve</span>) =></span> {
  <span>console</span>.log(<span>7</span>);
  resolve();
}).then(<span><span>()</span> =></span> {
  <span>console</span>.log(<span>8</span>);
});
process.nextTick(<span><span>()</span> =></span> {
  <span>console</span>.log(<span>6</span>);
});
setTimeout(<span><span>()</span> =></span> {
  <span>console</span>.log(<span>9</span>);
  process.nextTick(<span><span>()</span> =></span> {
    <span>console</span>.log(<span>10</span>);
  });
  <span>new</span> <span>Promise</span>(<span>(<span>resolve</span>) =></span> {
    <span>console</span>.log(<span>11</span>);
    resolve();
  }).then(<span><span>()</span> =></span> {
    <span>console</span>.log(<span>12</span>);
  });
});
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

32.写出执行结果

<span><span>function</span> <span>side</span>(<span>arr</span>) </span>{
  arr[<span>0</span>] = arr[<span>2</span>];
}
<span><span>function</span> <span>a</span>(<span>a, b, c = <span>3</span></span>) </span>{
  c = <span>10</span>;
  side(<span>arguments</span>);
  <span>return</span> a + b + c;
}
a(<span>1</span>, <span>1</span>, <span>1</span>);
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

33.写出执行结果

<span>var</span> min = <span>Math</span>.min();
max = <span>Math</span>.max();
<span>console</span>.log(min < max);
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>var</span> a = <span>1</span>;
(<span><span>function</span> <span>a</span> (<span></span>) </span>{
    a = <span>2</span>;
    <span>console</span>.log(a);
})();

<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>var</span> a = [<span>0</span>];
<span>if</span> (a) {
  <span>console</span>.log(a == <span>true</span>);
} <span>else</span> {
  <span>console</span>.log(a);
}
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

(<span><span>function</span> (<span></span>) </span>{
  <span>var</span> a = (b = <span>5</span>);
})();

<span>console</span>.log(b);
<span>console</span>.log(a);
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>var</span> fullname = <span>'a'</span>;
<span>var</span> obj = {
   <span>fullname</span>: <span>'b'</span>,
   <span>prop</span>: {
      <span>fullname</span>: <span>'c'</span>,
      <span>getFullname</span>: <span><span>function</span>(<span></span>) </span>{
         <span>return</span> <span>this</span>.fullname;
      }
   }
};
 
<span>console</span>.log(obj.prop.getFullname()); <span>// c</span>
<span>var</span> test = obj.prop.getFullname;
<span>console</span>.log(test());  <span>// a</span>
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>var</span> company = {
    <span>address</span>: <span>'beijing'</span>
}
<span>var</span> yideng = <span>Object</span>.create(company);
<span>delete</span> yideng.address
<span>console</span>.log(yideng.address);
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>var</span> foo = <span><span>function</span> <span>bar</span>(<span></span>)</span>{ <span>return</span> <span>12</span>; };
<span>console</span>.log(<span>typeof</span> bar());  
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>var</span> x=<span>1</span>;
<span>if</span>(<span><span>function</span> <span>f</span>(<span></span>)</span>{}){
    x += <span>typeof</span> f;
}
<span>console</span>.log(x)
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span><span>function</span> <span>f</span>(<span></span>)</span>{
      <span>return</span> f;
 }
<span>console</span>.log(<span>new</span> f() <span>instanceof</span> f);
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>var</span> foo = {
        <span>bar</span>: <span><span>function</span>(<span></span>)</span>{
            <span>return</span> <span>this</span>.baz;
        },
         <span>baz</span>:<span>1</span>
    }
<span>console</span>.log(<span>typeof</span> (f=foo.bar)());
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

43.说一下React Hooks在平时开发中需要注意的问题和原因？

答案&解析

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

分类：Vue

答案&解析

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

Vue.set (object, propertyName, value) 
vm.$set (object, propertyName, value)
<span class="copy-code-btn">复制代码</span>

分类：Vue

答案&解析

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

分类：Vue

答案&解析

47.关于Vue.js虚拟DOM的优缺点说法正确的是？（多选）

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

分类：Vue

答案&解析

48.下面代码输出什么？

<span>for</span> (<span>let</span> i = <span>0</span>; i < <span>3</span>; i++) {
  setTimeout(<span><span>()</span> =></span> <span>console</span>.log(i), <span>1</span>);
}
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>const</span> num = {
  <span>a</span>: <span>10</span>,
  add() {
    <span>return</span> <span>this</span>.a + <span>2</span>;
  },
  <span>reduce</span>: <span><span>()</span> =></span> <span>this</span>.a <span>-2</span>;
};
<span>console</span>.log(num.add());
<span>console</span>.log(num.reduce());
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析

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

<span>const</span> person = { <span>name</span>: <span>"yideng"</span> };

<span><span>function</span> <span>sayHi</span>(<span>age</span>) </span>{
  <span>return</span> <span>`<span>${<span>this</span>.name}</span> is <span>${age}</span>`</span>;
}
<span>console</span>.log(sayHi.call(person, <span>5</span>));
<span>console</span>.log(sayHi.bind(person, <span>5</span>));
<span class="copy-code-btn">复制代码</span>

分类：JavaScript

答案&解析