传说中的前端100问

一、第1-10题

1. (滴滴)写react、vue项目是为什么要在列表组件中写key,其作用是什么？

key是给每一个vnode的唯一id,可以依靠key，更准确，更快的拿到oldVnode中对应的vnode节点

　　2.什么是防抖、节流？有什么区别？如何实现？

防抖：触发高频事件后n秒内只会执行一次，如果n秒内高频事件再次被触发，测重新计算事件

思路：每次触发事件时都会取消之前的延时回调方法.

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

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

　　3.介绍一下set、map、weakSet和weakMap的区别？

set和map主要的应用场景在于数据重组和数据储存

set是一个叫做集合的数据结构类似于数组，但是成员时唯一且无序的，没有重复的值

//数组去重
let arr=[1,2,3,4,1]
[...new Set(arr)]

向set中加入值时，不会发生类型转换

weakSet对象允许你将弱引用对象储存在一个集合中

weakset对象于set的区别：

　　weakset只能储存对象引用，不能存放值，而set对象都可以

Map（字典）集合与字典的区别：

　　共同点：集合、字典可以储存不重复的值

　　不同点：集合是以【vaue,value】的形式存储，字典是以[key,value]的形式储存

• 本质上时键值对的集合，类似集合
• 可以遍历，方法很多可以跟各种数据格式转化

weakMap

• 只接受对象作为键名，不接受其他类型的值作为键名
• 键名时弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
• 不能遍历，方法有get、set、has、delete

　　4.已知如下数组：

var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化并去除其中重复部分数据，最终得到一个升序且不重复的数组

var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
let arr1=[];
arr1=[...new Set(arr.flat(Infinity))].sort((a,b)=>a-b)
console.log(arr1)

　　5.有以下3个判断数组的方法，请分别介绍他们的区别和优劣

Object.prototype.toString.call()、instanceof以及Array.isArray()

1.Object.prototype.toString.call()这种方法对于所有基本的数据类型都能进行判断，即使是null和undefined.

2.instanceof的内部机制是通过判断对象向的原型链中是不是能找到类型的prototype。

　　[] instanceof Array;//true

3.Array.isArray()

　　6.请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。

let a1=['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'];
let a2=['A','B','C','D'].map((item)=>{
   return item+3 
});
let a3=[...a1,...a2].sort().map((item)=>{
   if(item.includes('3')){
       returen item.split('')[0]
}
return item
})