最新100道大厂前端面试题

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

最近我花了一些时间,为大家整理了2020年各一、二线互联网公司的前端面试题" title="前端面试题">前端面试题,内容包括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

答案&解析

31.写出执行结果

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

答案&解析

32.写出执行结果

var min = Math.min();

max = Math.max();

console.log(min < max);

分类:JavaScript

答案&解析

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

var a = 1;

(function a () {

a = 2;

console.log(a);

})();

分类:JavaScript

答案&解析

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

var a = [0];

if (a) {

console.log(a == true);

} else {

console.log(a);

}

分类:JavaScript

答案&解析

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

(function () {

var a = (b = 5);

})();

console.log(b);

console.log(a);

分类:JavaScript

答案&解析

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

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

答案&解析

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

var company = {

address: 'beijing'

}

var yideng = Object.create(company);

delete yideng.address

console.log(yideng.address);

分类:JavaScript

答案&解析

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

var foo = function bar(){ return 12; };

console.log(typeof bar());

分类:JavaScript

答案&解析

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

var x=1;

if(function f(){}){

x += typeof f;

}

console.log(x)

分类:JavaScript

答案&解析

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

function f(){

return f;

}

console.log(new f() instanceof f);

分类:JavaScript

答案&解析

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

var foo = {

bar: function(){

return this.baz;

},

baz:1

}

console.log(typeof (f=foo.bar)());

分类:JavaScript

答案&解析

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

答案&解析

 

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

分类:Vue

答案&解析

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

Vue.set (object, propertyName, value)

vm.$set (object, propertyName, value)

分类:Vue

答案&解析

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

分类:Vue

答案&解析

分类:Vue

答案&解析

46.下面代码输出什么?

for (let i = 0; i < 3; i++) {

setTimeout(() => console.log(i), 1);

}

分类:JavaScript

答案&解析

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

const num = {

a: 10,

add() {

return this.a + 2;

},

reduce: () => this.a -2;

};

console.log(num.add());

console.log(num.reduce());

分类:JavaScript

答案&解析

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

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

答案&解析

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

["1", "2", "3"].map(parseInt);

分类:JavaScript

答案&解析

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

[typeof null, null instanceof Object]

分类:JavaScript

答案&解析

以上是 最新100道大厂前端面试题 的全部内容, 来源链接: utcz.com/a/32603.html

回到顶部