https://juejin.im/post/5d23e750f265da1b855c7bbe
1 （滴滴、饿了么）写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
react和vue都使用diff算法来对比新旧虚拟节点，从而更新节点。
当新节点和旧节点从头到尾交叉对比没有结果时，会根据新节点的key对比旧节点数组中的key，如果没有找到就认为是新增了一个节点。
如果没有key，那么就会采用循环遍历的方式查找就的节点
在不带key的情况下，节点可以复用，省去dom操作的开销，但是只适用于无状态组件的渲染。
带上dom虽然会增加开销，但是可以保证组件的状态正确，并且用户感受不到差距。
2['1', '2', '3'].map(parseInt) what & why ?
返回1，NaN，NaN
因为parseInt有三个参数，第一个是被处理的元素，第二个是该元素的索引。。。
parseInt（“1”，0）按照十进制处理，返回 整数 1
parseInt（“2”，1）按照1进制处理，2 不符合一进制表示法，所以返回NaN
parseInt（“3”，2）按照2进制处理，3不符合二进制表示法，所以返回NaN
3（挖财）什么是防抖和节流？有什么区别？如何实现？
防抖：触发高频事件后n秒后调用一次函数，如果在n秒之内，高频事件再次被触发，则重新计算时间
常见的比如input框输入与文本同步需要防抖
解决思路： 创建一个标记用来存放定时器的返回值，每次事件触发前，都清除之前的延时调用
然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数，只有在你停止输入的时候才会执行fn函数
<input id="inpu" />
function debounce(e) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
console.log("e.target.value",e.target.value)
}, 500);
};
}
document.getElementById("inpu").addEventListener("keyup",debounce) // 防抖
节流：高频事件触发，但在n秒内只会执行一次，稀释函数的执行频率
思路：每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
比如打王者荣耀，用户高频率点击输出时，机器只周期性输出，1秒输出一次
总结：防抖和节流 都是防止某一时间函数高频率触发，但是他们俩的原理却不同
防抖是每一时间段内只能触发一次，而节流是周期间歇性触发函数
应用场景：
防抖：1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
节流：1.鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。
4 介绍下 Set、Map、WeakSet 和 WeakMap 的区别？
Set(集合）
成员唯一、无序且不重复
[value, value]，键值与键名是一致的（或者说只有键值，没有键名）
可以遍历，方法有：add、delete、has
WeakSet
成员都是对象
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏
不能遍历，方法有add、delete、has
Map (字典)
本质上是键值对的集合，类似集合
可以遍历，方法很多可以跟各种数据格式转换
WeakMap
只接受对象作为键名（null除外），不接受其他类型的值作为键名
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
不能遍历，方法有get、set、has、delete
5 介绍下深度优先遍历和广度优先遍历，如何实现？
深度遍历就是自上而下的遍历，广度遍历就是逐层遍历
深度遍历有回溯的操作(没有路走了需要回头)，
深度优先采用的是堆栈的形式, 即先进后出
广度优先则采用的是队列的形式, 即先进先出
const data = [
{
name: 'a',
children: [
{ name: 'b', children: [{ name: 'e' }] },
{ name: 'c', children: [{ name: 'f' }] },
{ name: 'd', children: [{ name: 'g' }] },
],
},
{
name: 'a2',
children: [
{ name: 'b2', children: [{ name: 'e2' }] },
{ name: 'c2', children: [{ name: 'f2' }] },
{ name: 'd2', children: [{ name: 'g2' }] },
],
}
]
深度遍历(递归调用）
function getName(data){
let result=[];
data.forEach(
item=>{
const maps=(data)=>{
result.push(data.name)
//对象里的数组如果存在就继续调用
data.children&&data.children.forEach(
p=>maps(p)
)
}
maps(item)
}
)
return result.join(",")
}
console.log(getName(data))
//a,a2,b,c,d,b2,c2,d2,e,f,g,e2,f2,g2
广度遍历（数组循环）
function getNames(data){
let result=[];
let queue=data ;
while(queue.length>0){
[...queue].forEach(
p=>{
queue.shift();
result.push(p.name)
p.children&&(queue.push(...p.children))
}
)
}
return result.join(",")
}
console.log(getNames(datad))
//a,a2,b,c,d,b2,c2,d2,e,f,g,e2,f2,g2
6 ：请分别用深度优先思想和广度优先思想实现一个拷贝函数？
我不会做
7 ES5/ES6 的继承除了写法以外还有什么区别？
es6 ：
class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。
class 声明内部会启用严格模式。
class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype(只有proto），所以也没有[[construct]]，不能使用 new 来调用。 class 内部无法重写类名。
8 setTimeout、Promise、Async/Await 的区别
宏观任务和微观任务
image.png
Promise本身是一个立即执行函数，如果带then或者catch，有一步操作功能
async 函数返回一个 Promise 对象，await配合async触发异步操作，控制函数的执行顺序。async可以单独使用，await不可以。
8 （头条、微医）Async/Await 如何通过同步的方式实现异步
function fun1() {
console.log(1);
console.log(2);
}
function fun2() {
console.log(3);
console.log(4);
}
// async 实现的是一个异步操作，await 等待一个异步方法执行完成。
// async内使用await等待async的执行完成，就形成了异步函数的同步实现。
async function fun3() {
await fun1();
await console.log(5);
await fun2();
}
fun3();
9 // 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
写法一： console.log("整理后", [...new Set(arr.flat(Infinity))].sort((a, b) => a - b))
// 整理后 (14) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
写法二 ： 数据扁平化写法不同，其他都一样
1 let arrs = JSON.stringify(arr );
2 扩展运算符：
while (ary.some(Array.isArray)) {
ary = [].concat(...ary);
}
3 递归调用：
function maps(arr){
arr.map(
p =>{
if(p.constructor === Array){
return maps(p)
}else{
data.push(p)
}
}
)
}
10 Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})
promise.then(() => {
console.log(3)
})
console.log(4)
//执行结果： 1243
Promise构造函数是同步执行的，then方法是异步执行的
扩展 ：
console.log(1);
resolve(5);
console.log(2);
}).then(val => {
console.log(val);
});
promise.then(() => {
console.log(3);
});
console.log(4);
setTimeout(function() {
console.log(6);
});
// 124536
promise是微观任务，setTimeout是宏观任务，先执行微观任务，在执行宏观任务；微观任务里，先执行同步再执行异步 所以结果是 124536
11 如何实现一个 new
// 实现一个new
var Dog = function(name) {
this.name = name
}
Dog.prototype.bark = function() {
console.log('wangwang')
}
Dog.prototype.sayName = function() {
console.log('my name is ' + this.name)
}
let sanmao = new Dog('三毛')
sanmao.sayName()
sanmao.bark()
//打印： wangwang
// my name is 三毛
new的作用：1 创建一个新对象
2 新对象（实例）的proto指向构造函数的prototype ，实现继承
3 执行构造函数，传递参数，改变this指向 Dog.call(obj, ...args)
4 最后把new出来的对象赋值给 变量sanmao
网友评论