react 面试题高级_高级前端面试题目大全(一)

最新推荐文章于 2024-07-21 16:08:28 发布

weixin_39640008

最新推荐文章于 2024-07-21 16:08:28 发布

阅读量2.1k

点赞数 3

文章标签： react 面试题高级

本文链接：https://blog.csdn.net/weixin_39640008/article/details/111554197

版权

第 1 题：(滴滴、饿了么)写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

1. 更准确

因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。

2. 更快

利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。主要是为了提升diff【同级比较】的效率。自己想一下自己要实现前后列表的diff，如果对列表的每一项增加一个key，即唯一索引，那就可以很清楚的知道两个列表谁少了谁没变。而如果不加key的话，就只能一个个对比了。

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中(建议先了解一下diff算法过程)。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。 vue部分源码如下：

第 2 题：['1', '2', '3'].map(parseInt) what & why ?

首先让我们回顾一下，map函数的第一个参数callback：

var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])

这个callback一共可以接收三个参数，其中第一个参数代表当前被处理的元素，而第二个参数代表该元素的索引。

而parseInt则是用来解析字符串的，使字符串成为指定基数的整数。

parseInt(string, radix)

接收两个参数，第一个表示被处理的值(字符串)，第二个表示为解析时的基数。

了解这两个函数后，我们可以模拟一下运行情况

parseInt('1', 0) //radix为0时，且string参数不以“0x”和“0”开头时，按照10为基数处理。这个时候返回1

parseInt('2', 1) //基数为1(1进制)表示的数中，最大值小于2，所以无法解析，返回NaN

parseInt('3', 2) //基数为2(2进制)表示的数中，最大值小于3，所以无法解析，返回NaN

map函数返回的是一个数组，所以最后结果为[1, NaN, NaN]

第 3 题：(挖财)什么是防抖和节流？有什么区别？如何实现？

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

思路

每次触发事件时都取消之前的延时调用方法

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

思路

每次触发事件时都判断当前是否有等待执行的延时函数

第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

Set

成员唯一、无序且不重复

[value, value]，键值与键名是一致的(或者说只有键值，没有键名)

可以遍历，方法有：add、delete、has

WeakSet

成员都是对象

成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏

不能遍历，方法有add、delete、has

Map

本质上是键值对的集合，类似集合

可以遍历，方法很多可以跟各种数据格式转换

WeakMap

只接受对象作为键名(null除外)，不接受其他类型的值作为键名

键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的

不能遍历，方法有get、set、has、delete

第 5 题：介绍下深度优先遍历和广度优先遍历，如何实现？

第 6 题：请分别用深度优先思想和广度优先思想实现一个拷贝函数？

第 7 题：ES5/ES6 的继承除了写法以外还有什么区别？

先看ES5的继承(原型链继承)

ES6继承

对比代码可以知道，子类的继承都是成功的，但是问题出在，子类的 __proto__ 指向不一样。

ES5 的子类和父类一样，都是先创建好，再实现继承的，所以它们的指向都是 [Function] 。

ES6 则得到不一样的结果，它指向父类，那么我们应该能推算出来，它的子类是通过 super 来改造的。

根据 es6--阮一峰在class继承里面的说法，是这样子的：

引用阮一峰的 ECMAScript6入门的class继承篇

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面(Parent.apply(this))。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面(所以必须先调用super方法)，然后再用子类的构造函数修改this。

1、class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。

2、class 声明内部会启用严格模式。

3、class 的所有方法(包括静态方法和实例方法)都是不可枚举的。

4、class 的所有方法(包括静态方法和实例方法)都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。

5、必须使用 new 调用 class。

6、class 内部无法重写类名

第 8 题：setTimeout、Promise、Async/Await 的区别

其中settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行； promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行；async函数表示函数里面可能会有异步方法，await后面跟一个表达式，async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。

第 9 题：(头条、微医)Async/Await 如何通过同步的方式实现异步

async await 用于把异步请求变为同步请求的方式,第一个请求的返回值作为后面一个请求的参数,其中每一个参数都是一个promise对象

例如：这种情况工作中会经常遇到

第 10 题：(头条)异步笔试题

请写出下面代码的运行结果

第 11 - 20 题

第 11 题：(携程)算法手写题

已知如下数组：

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

第 12 题：(滴滴、挖财、微医、海康)JS 异步解决方案的发展历程以及优缺点。

1. 回调函数(callback)