每日一题

[XiaoChengyin]

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

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
理想的 key 值是每项都有的唯一 id。

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
当基于下标的组件进行重新排序时，组件 state 可能会遇到一些问题。
由于组件实例是基于它们的 key 来决定是否更新以及复用，如果 key 是一个下标，那么修改顺序时会修改当前的 key，导致非受控组件的 state（比如输入框）可能相互篡改导致无法预期的变动。

避免“就地复用”，便于跟踪节点位置变化，防止“就地复用”时导致丢失表单输入值等问题。

[XiaoChengyin]

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

防抖：高频触发事件，最后一次触发事件n秒后才能够被再次执行。
节流：高频触发事件，第一次触发事件n秒后才能够被再次执行。

防抖

每次触发事件后都取消之前的延时调用，重新计时

function debounce(func, wait, immediate) {

    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

节流

每次触发事件后判断是否符合执行回调条件

// 简单实现
function throttle(func, wait) {
    var timeout;

    return function() {
        context = this;
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

// leading：false 表示禁用第一次执行
// trailing: false 表示禁用停止触发的回调
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function() {
        var now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
    };

    throttled.cancel = function() {
        clearTimeout(timeout);
        previous = 0;
        timeout = null;
    }

    return throttled;
}

[XiaoChengyin]

Set、WeakSet、Map、WeakMap

Set

• 类似数组，成员不能重复
• 可以遍历：keys、values(default)、entries、forEach
• 方法：add、delete、has、clear
• 属性：size

WeakSet

• 类似数组，成员不能重复，只能是对象
• 成员都是弱引用，不计入垃圾回收机制
• 不可遍历
• 方法：add、delete、has
• 属性：size

Map

• 键值对的集合，键名可以是任何类型
• 可以遍历：keys、values、entries(default)、forEach
• 方法：set、get、has、delete、clear
• 属性：size

WeakMap

• 键值对的集合，只接受对象作为键名
• 不可遍历
• 键名是弱引用，不计入垃圾回收机制，键值不是弱引用
• 方法：set、get、has、delete
• 属性：没有size属性

WeakMap可以用来引用DOM节点或部署class私有属性，一旦DOM节点或实例被删除，键名页随之消失，不用担心内存泄漏

[XiaoChengyin]

介绍下深度优先遍历和广度优先遍历，如何实现

深度优先（DFS）

先遍历子节点，后遍历兄弟节点

• 先序遍历：根结点 => 左子树 => 右子树
• 中序遍历：左子树 => 根结点 => 右子树
• 后序遍历：左子树 => 右子树 => 根结点

/*深度优先遍历三种方式*/
let deepTraversal1 = (node, nodeList = []) => {
  if (node !== null) {
    nodeList.push(node)
    let children = node.children
    for (let i = 0; i < children.length; i++) {
      deepTraversal1(children[i], nodeList)
    }
  }
  return nodeList
}
let deepTraversal2 = node => {
    let nodes = []
    if (node !== null) {
      nodes.push(node)
      let children = node.children
      for (let i = 0; i < children.length; i++) {
        nodes = nodes.concat(deepTraversal2(children[i]))
      }
    }
    return nodes
  }
// 非递归
let deepTraversal3 = node => {
  let stack = []
  let nodes = []
  if (node) {
    // 推入当前处理的node
    stack.push(node)
    while (stack.length) {
      let item = stack.pop()
      let children = item.children
      nodes.push(item)
      // node = [] stack = [parent]
      // node = [parent] stack = [child3,child2,child1]
      // node = [parent, child1] stack = [child3,child2,child1-2,child1-1]
      // node = [parent, child1-1] stack = [child3,child2,child1-2]
      for (let i = children.length - 1; i >= 0; i--) {
        stack.push(children[i])
      }
    }
  }
  return nodes
}

广度优先（BFS）

先遍历兄弟节点，后遍历子节点

let widthTraversal = node => {
  let nodes = []
  let stack = []
  if (node) {
    stack.push(node)
    while (stack.length) {
      let item = stack.shift()
      let children = item.children
      nodes.push(item)
        // 队列，先进先出
        // nodes = [] stack = [parent]
        // nodes = [parent] stack = [child1,child2,child3]
        // nodes = [parent, child1] stack = [child2,child3,child1-1,child1-2]
        // nodes = [parent,child1,child2]
      for (let i = 0; i < children.length; i++) {
        stack.push(children[i])
      }
    }
  }
  return nodes
}

[XiaoChengyin]

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

1. class 声明会提升，但不会初始化赋值。会进入暂时性死区，类似于 let、const 声明变量。
2. class 声明内部会启用严格模式。
3. class 的所有方法（包括静态方法和实例方法）都是不可枚举的。
4. class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。
5. 必须使用 new 调用 class。
6. class 内部无法重写类名。

[XiaoChengyin]

setTimeout、Promise、Async/Await 的区别

• setTimeout 的回调是宏任务
• Promise 的回调是同步执行，then 方法的回调是微任务
• Async / Await 是 Promise 的语法糖

事件循环包括宏任务和微任务，其中微任务队列会在每个宏任务执行完毕后执行

[XiaoChengyin]

数组扁平化去重排序

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

Array.from(new Set(arr.flat(Infinity))).sort((a, b) => a - b)

[XiaoChengyin]

如何实现一个 new

function _new(fn, ...arg) {
    const obj = Object.create(fn.prototype);
    const ret = fn.apply(obj, arg);
    return ret instanceof Object ? ret : obj;
}

[XiaoChengyin]

谈谈你对TCP三次握手和四次挥手的理解

三次握手

• 第一次握手：Server确认能够接收消息
• 第二次握手：Client确认能够发送消息并接收消息
• 第三次握手：Server确认能够发送消息

“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”

client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况，client不会向server的确认发出确认。server由于收不到确认，就知道client并没有要求建立连接。

四次挥手

TCP是全双工模式

• 第一次挥手：A表示停止发送数据
• 第二次挥手：B表示停止接收数据
• 第三次挥手：B表示停止发送数据
• 第四次挥手：A表示停止接收数据

男：我要挂了哦
女：等哈，我还要敷面膜
女：我敷完了，现在可以挂了
男：我舍不得挂，你挂吧
女：好吧，我挂了
男：等了2MSL听见嘟嘟嘟的声音后挂断

[XiaoChengyin]

React 中 setState 什么时候是同步的，什么时候是异步的？

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

[XiaoChengyin]

介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

1. npm 模块安装机制

查询 node_modules 目录之中是否已经存在指定模块，若存在，则不再重新安装；若不存在，npm 向 registry 查询模块压缩包的地址，下载压缩包并存放到根目录下的 .npm 目录里，解压压缩包到当前项目的 node_modules 目录

2. npm 实现原理

• 执行自身 preinstall
• 确定首层依赖模块
• 递归获取模块
• 模块扁平化(dedupe)
• 安装模块
• 执行自身生命周期(install、postinstall、prepublish、prepare)

[XiaoChengyin]

两个数组合并成一个数组

请把两个数组 ['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 arr1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2']
let arr2 = ['A', 'B', 'C', 'D']
[...arr1, ...arr2].sort((a, b) => {
	if (a[0] === b[0] && a.length !== b.length) {
		return b.length - a.length 
	}
	return a > b ? 1 : -1
})
[...arr1, ...arr2].sort((a, b) =>
    a.codePointAt(0) - b.codePointAt(0) ||
    b.length - a.length ||
    a.codePointAt(1) - b.codePointAt(1)
)

[XiaoChengyin]

下面的代码打印什么内容，为什么？

var b = 10;
(function b() {
  b = 20;
  console.log(b)
})()

/*
 *ƒ b() {
 *  b = 20;
 *  console.log(b)
 *}
*/

这是一个立即执行函数表达式（IIFES——Immediately Invoked Function Expressions），为了让IIFES能够递归调用，可以对它命名，此时该函数表达式的名称的作用域仅仅是该函数自身，并且不能对该变量重新赋值。

var b = 10;
(function b() {
   // 内部作用域，会先去查找是有已有变量b的声明，有就直接赋值20，确实有了呀。发现了具名函数 function b(){}，拿此b做赋值；
   // IIFE的函数无法进行赋值（内部机制，类似const定义的常量），所以无效。
  // （这里说的“内部机制”，想搞清楚，需要去查阅一些资料，弄明白IIFE在JS引擎的工作方式，堆栈存储IIFE的方式等）
    b = 20;
    console.log(b); // [Function b]
    console.log(window.b); // 10，不是20
})();

var b = 10;
(function b() {
  'use strict'
  b = 20;
  console.log(b)
})() // "Uncaught TypeError: Assignment to constant variable."

[XiaoChengyin]

使用迭代的方式实现 flatten 函数。

const flattenES5 = function (arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr)
    }
    return arr
}

const flattenES6 = array => 
    array.reduce(
        (acc, cur) => (Array.isArray(cur) ? [...acc, ...flattenES6(cur)] : [...acc, cur]), 
        []
    )

[XiaoChengyin]

为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？

• 能够完成整个 HTTP 请求+响应（尽管不需要响应内容）
• 触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据
• 跨域友好
• 执行过程无阻塞
• 相比 XMLHttpRequest 对象发送 GET 请求，性能上更好
• GIF的最低合法体积最小（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节）

[XiaoChengyin]

什么是CDN，CDN有什么好处

CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景

• 多域名加载资源

一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。
因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。

• 文件可能已经被加载过并保存有缓存

一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度

• 高效率

一个好的CDNs会提供更高的效率，更低的网络延时和更小的丢包率

• 分布式的数据中心

假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。

• 使用情况分析

一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。

• 有效防止网站被攻击

一般情况下CDNs提供商也是会提供网站安全服务的