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

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

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

第一眼看到这个题目的时候，脑海跳出的答案是 [1, 2, 3]，但是真正的答案是[1,NaN, NaN]。
首先让我们回顾一下，map 函数的第一个参数 callback。这个 callback 一共可以接收三个参数，其中第一个参数代表当前被处理的元素，而第二个参数代表该元素的索引。
arr.map(callback: (value: T, index: number, array: T[]) => U, thisArg?: any);
而 parseInt 则是用来解析字符串的，使字符串成为指定基数的整数。接收两个参数，第一个表示被处理的值（字符串），第二个表示为解析时的基数。parseInt(string, radix)
了解这两个函数后，我们可以模拟一下运行情况
表示的数中，最大值小于 2，所以无法解析，返回 NaNparseInt(‘3’, 2) //基数为2（2 进制）表示的数中，最大值小于 3，所以无法解析，返回 NaN

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

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

function debounce(fn) {let timeout = null
// 创建一个标记用来存放定时器的返回值
return function() { clearTimeout(timeout)
// 每当用户输入的时候把前一个 setTimeout clear 掉timeout = setTimeout(() => {
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的interval 间隔内如果还有字符输入的话，就不会执行 fn 函数fn.apply(this, arguments)}, 500)
}}function sayHi() {
console.log(' 防 抖 成 功 ')}
var inp = document.getElementById('inp')inp.addEventListener('input',debounce(sayHi)) // 防抖

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

function throttle(fn) { let canRun = true  return function() {  通过闭包保存一个标记if (!canRun) return// 在函数开头判断标记是否为 true，不为 true 则 returncanRun = false // 立即设置为 falsesetTimeout(() => {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))

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

Set——对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用WeakSet——成员都是对象；成员都是弱引用，可以被垃圾回收机制回收，可以用来保存 DOM 节点，不容易造成内存泄漏；
Map——本质上是键值对的集合，类似集合；可以遍历，方法很多，可以跟各种数据格式转换。
WeakMap——只接受对象最为键名（null 除外），不接受其他类型的值作为键名；键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收， 此时键名是无效的；不能遍历，方法有 get、set、has、delete。

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

深度优先遍历——是指从某个顶点出发，首先访问这个顶点，然后找出刚访问这个结点的第一个未被访问的邻结点，然后再以此邻结点为顶点，继续找它的下一个顶点进行访问。重复此步骤，直至所有结点都被访问完为止。
广度优先遍历——是从某个顶点出发，首先访问这个顶点，然后找出刚访问这个结点所有未被访问的邻结点，访问完后再访问这些结点中第一个邻结点的所有结点，重复此方法，直到所有结点都被访问完为止。

//1.深度优先遍历的递归写法 function deepTraversal(node) {let nodes = []if (node != null) {nodes.push[node]let childrens = node.childrenfor (let i = 0;i < childrens.length; i++) deepTraversal(childrens[i])}	return nodes}
//2.深度优先遍历的非递归写法 function deepTraversal(node) {let nodes = []if (node != null) {let stack = []//同来存放将来要访问的节点stack.push(node)while (stack.length != 0) {let item = stack.pop()
//正在访问的节点nodes.push(item)let childrens = item.children for (let i = childrens.length - 1;i >= 0;i--)
//将现在访问点的节点的子节点存入 stack，供将来访问stack.push(childrens[i])}}return nodes}
//3.广度优先遍历的递归写法 function wideTraversal(node) {let nodes = [],i = 0if (node != null) {nodes.push(node)wideTraversal(node.nextElementSibling)node = nodes[i++]wideTraversal(node.firstElementChild)}return nodes}//4.广度优先遍历的非递归写法 function wideTraversal(node) {(node != null) { nodes.push(node)node = nodes[i++]let childrens = node.childrenfor (let i = 0;i < childrens.length;i++) {nodes.push(childrens[i])}}}