每天5道前端面试题 | 大厂篇

第 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 则 return
 	canRun = false // 立即设置为 false
 	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))

第 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.children
 	for (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 = 0
    if (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.children
 	for (let i = 0;
 		 i < childrens.length;
 		 i++) {
 			nodes.push(childrens[i])
 		}
    }

}