50 Frontend Interview Quesitions
# 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
[答案 & 解析](








