---

为什么有时连续多次setState只有一次生效？

React会对多次连续的 setState进行合并，如果你想立即使用上次 setState后的结果进行下一次 setState，可以让 setState 接收一个函数而不是一个对象。这个函数用第一个参数为上一次的state，第二个参数为此时更新被应用props

http的缓存机制

HTTP缓存机制是根据HTTP报文的缓存标识进行的。HTTP缓存分为强缓存和协商缓存。优先级最高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。

强缓存
强缓存是利用http头中的Expires和Cache-Control两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的Expires和Cache-Control判断目标资源是否“命中”强缓存，如果命中则直接从缓存中获取资源，不会再与服务端发生通信。命中强缓存的情况下，返回的HTTP状态码为200。

协商缓存：
向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

共同点：都是从客户端缓存中读取资源；
区别是强缓存不会发请求，协商缓存会发请求。

什么是数组扁平化，实现扁平化的方法有哪些？

一、普通递归实现

普通递归的思路很容易理解，就是通过for循环的方式，逐层逐个元素地去展平，如果当前元素是一个数组，那么就对它进行递归处理，再将递归处理的结果拼接到结果数组上。

let arr = [1, [2, [3, 4, 5]]];
function flatten(arr) {
  let result = [];
  for(let i = 0; i < arr.length; i++) {
    // 当前元素是一个数组，对其进行递归展平
    if(Array.isArray(arr[i])) {
      // 递归展平结果拼接到结果数组
      result = result.concat(flatten(arr[i]));
    } 
    // 否则直接加入结果数组
    else {
      result.push(arr[i]);
    }
  }
  return result;
}
console.log(flatten(a));  //  [1, 2, 3, 4，5]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二、reduce实现

reduce是JS数组中非常强大的一个方法，同时也是JS中的一个函数式编程API。
上面的递归实现的关键就是对数组的每一项进行处理，遇到数组就递归处理它，既然需要循环和结果数组，那么我们可以使用reduce来简化我们的代码：

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.reduce(function(pre, cur){
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4，5]

1
2
3
4
5
6
7
8

使用reduce后，代码更加的简洁，reduce 的第一个参数用来返回最后累加的结果，第二个参数是当前遍历到的元素值，处理数组元素和非数组元素的思路和第一种方法是一样，最后再把处理后的结果拼接到累加的结果数组中返回即可。

三、扩展运算符实现

扩展运算符是ES6的新特性之一，用它操作数组可以直接展开数组的第一层，利用这个特性，我们可以不使用递归来实现数组的展平，这是因为每一次递归都是对当前层次数组的一次展开，而扩展操作符就是干这工作的。

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    while (arr.some(i => Array.isArray(i))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]
1
2
3
4
5
6
7
8

代码中使用了数组的另一个方法some，目的是判断当前数组是否还有数组元素，如果有则对数组进行一层展开，同时将展开结果作为下一次判断的条件，这样就像剥洋葱一样，一层层地剥开洋葱皮，当循环条件不满足时说明数组里已经没有数组元素了，这是数组已经完全扁平。

四、split + toString 实现

我们也可以通过 split 和 toString 两个方法，来共同实现数组扁平化。toString是Object原型链上的一个方法，由于JS中所有对象都派生自Object对象，所以它们都能调用toString，只不过不同的对象可能会对这个方法进行改写以输出自己想要的格式。数组的toString方法会将数组转换成一个元素间以逗号相隔的字符串，它内部会先将数组展平成一维后再转换成字符串，因此我们可以先利用toString进行展平，然后再通过split方法以逗号分隔每个元素来复原一个包含所有元素的数组，从而实现数组的扁平化。

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.toString().split(',').map(i=>Number(i));
}
console.log(flatten(arr)); //  [1, 2, 3, 4]
1
2
3
4
5

不过需要注意的是，虽然这个方法非常简单，但具有一定的局限性，对于包含引用类型元素的数组来说，在toString过程中会发生类型转换，从而使得转换结果异常，因为对于引用类型转成字符串，会调用引用类型的toString，上面提到不同对象会对它进行改写，例如函数就会得到一个函数体的代码字符串，而不是我们想要的函数引用。

五、正则 + JSON实现

正则实现也是先将数组转换成字符串的表达形式，这里将数组转成字符串我们使用JSON.stringify方法，将数组转换成一个由括号包裹、元素间以逗号相隔的字符串，例如"[1, [2, [3, [4, 5]]], 6]",从转换后的字符可以发现，每一对括号包着的范围就是一个层级，数组的展平就是将内部的层级全部消除，只保留最外层，在这里，就是将括号全部替换成空字符，得到一个元素以逗号相隔字符串，最后将利用JSON.parse方法解析成数组对象。

let arr = [1, [2, [3, [4, 5]]], 6];
function flatten(arr) {
  let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  // 拼接最外层，变成JSON能解析的格式
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]
1
2
3
4
5
6
7
8
9

六、Array.prototype.flat

Array.prototype.flat是ES6新增的一个数组方法，它的作用就是用来数组扁平化，并且根据传入的参数来决定展开的层级，是数组扁平化的终极解决方案。

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
  return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]
1
2
3
4
5

什么是回流、重绘？

重绘：
DOM树没有元素增加或删除，只是样式的改变，针对浏览器对某一元素进行单独的渲染，这个过程就叫做重绘

回流：
DOM树中的元素被增加或者删除，导致浏览器需要重新的去渲染整个DOM树，回流比重绘更消耗性能，发生回流必定重绘，重绘不一定会导致回流。

重绘和重排的关系
重绘：某些元素的外观被改变，例如：元素的填充颜色
回流：重新生成布局，重新排列元素。
局部范围重排：
用局部布局来解释这种现象：把一个 dom 的宽高之类的几何信息定死，然后在 dom 内部触发重排，就只会重新渲染该 dom 内部的元素，而不会影响到外界。
就如上面的概念一样，单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。
一句话概括：回流必将引起重绘，重绘不一定会引起回流

webpack中在使用babel插件处理js代码的时候，为什么使用polyfill，如何使用polyfill ？

Babel 是什么？
Babel 是一个 JavaScript 编译器。
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
下面列出的是 Babel 能为你做的事情：
语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性

babel/polyfill
Babel 包含一个polyfill 库。这个库里包含 regenerator 和 core-js.
这个库将会模拟一个完全的 ES2015+ 的环境。
这意味着你可以使用 新的内置语法 比如 promise 或者 WeakMap， 静态方法比如Array.from 或 Object.assign, 实例方法 比如 Array.prototype.includes 和 generator 函数。

babel polyfill 有三种：
●babel-polyfill
●babel-runtime
●babel-plugin-transform-runtime

babel-polyfill通过向全局对象和内置对象的prototype上添加方法来实现的。所以这会造成全局空间污染。

babel-polyfill使用的两种方式：
webpack.config.js 中：
配置webpack.config.js里的entry设置为entry: [‘babel-polyfill’,path.join(__dirname, ‘index.js’)]

业务 js 中：
在webpack.config.js配置的主入口index.js文件的最顶层键入