网上的面试题一大堆，鱼龙混杂，一方面多数题目质量不高，另一方面有答案的很少，即使拿到面试题对自己的帮助也不大。
最近我花了一些时间，为大家整理了2020年各一、二线互联网公司的前端面试题，内容包括JavaScript、算法、网络&安全、Vue、React等大量的前端知识点和相关面试题。答案和解析也整理在文中了，整理不易，麻烦各位走过路过的壮士给颗star，如果可以star fork watch三连更好，感谢😄 🙏
因篇幅太长，本文收录前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
Promise.all = function (arr) {
// 实现代码
};
公司：滴滴、头条、有赞、微医
分类：JavaScript、编程题
25.React 组件通信方式
公司：滴滴、掌门一对一、喜马拉雅、蘑菇街
分类：React
26.redux-saga 和 mobx 的比较
公司：掌门一对一
分类：React
27.说一下 react-fiber
公司：头条、滴滴、菜鸟网络、挖财、喜马拉雅
分类：React
28.手写发布订阅
公司：滴滴、头条
分类：JavaScript
29.手写数组转树
公司：滴滴
分类：JavaScript
30.手写用 ES6proxy 如何实现 arr[-1] 的访问
公司：滴滴
分类：JavaScript
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
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
33.写出执行结果
var min = Math.min();
max = Math.max();
console.log(min < max);
分类：JavaScript
34.写出执行结果,并解释原因
var a = 1;
(function a () {
a = 2;
console.log(a);
})();
分类：JavaScript
35.写出执行结果,并解释原因
var a = [0];
if (a) {
console.log(a == true);
} else {
console.log(a);
}
分类：JavaScript
36.写出执行结果,并解释原因
(function () {
var a = (b = 5);
})();
console.log(b);
console.log(a);
分类：JavaScript
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
38.写出执行结果,并解释原因
var company = {
address: 'beijing'
}
var yideng = Object.create(company);
delete yideng.address
console.log(yideng.address);
分类：JavaScript
39.写出执行结果,并解释原因
var foo = function bar(){ return 12; };
console.log(typeof bar());
分类：JavaScript
40.写出执行结果,并解释原因
var x=1;
if(function f(){}){
x += typeof f;
}
console.log(x)
分类：JavaScript
41.写出执行结果,并解释原因
function f(){
return f;
}
console.log(new f() instanceof f);
分类：JavaScript
42.写出执行结果,并解释原因
var foo = {
bar: function(){
return this.baz;
},
baz:1
}
console.log(typeof (f=foo.bar)());
分类：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)
分类：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.下面代码输出什么？
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
分类：JavaScript
49.写出执行结果,并解释原因
const num = {
a: 10,
add() {
return this.a + 2;
},
reduce: () => this.a -2;
};
console.log(num.add());
console.log(num.reduce());
分类：JavaScript
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
前端刷题神器
这些题还不过瘾？扫码进入前端面试星球🌍，解锁刷题神器，还可以获取800+道前端面试题和一线常见面试高频考点。
今天的文章2020最新：100道有答案的前端面试题（上）分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/17769.html
