前端面试题记录

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

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

1. 更准确

因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。

2. 更快

利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

题2：['1', '2', '3'].map(parseInt)

1. map函数

将数组的每个元素传递给指定的函数处理，并返回处理后的数组，所以 ['1','2','3'].map(parseInt) 就是将字符串1，2，3作为元素；0，1，2作为下标分别调用 parseInt 函数。即分别求出 parseInt('1',0), parseInt('2',1), parseInt('3',2)的结果。

2. parseInt函数（重点）

概念：以第二个参数为基数来解析第一个参数字符串，通常用来做十进制的向上取整（省略小数）如：parseInt(2.7) //结果为2

特点：接收两个参数parseInt(string,radix)

string：字母（大小写均可）、数组、特殊字符（不可放在开头,特殊字符及特殊字符后面的内容不做解析）的任意字符串，如 '2'、'2w'、'2!'

radix：解析字符串的基数，基数规则如下：

   1）   区间范围介于2~36之间；

   2 ）  当参数为 0，parseInt() 会根据十进制来解析；

   3 ）  如果忽略该参数，默认的基数规则：

           如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数；parseInt("0xf")   //15 

           如果 string 以 0 开头，其后的字符解析为八进制或十六进制的数字；parseInt("08")   //8

           如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数；parseInt("88.99f")   //88

           只有字符串中的第一个数字会被返回。parseInt("10.33")   //返回10；

           开头和结尾的空格是允许的。parseInt(" 69 10 ")   //返回69

           如果字符串的第一个字符不能被转换为数字，返回 NaN。parseInt("f")  //返回NaN  而parseInt("f"，16)  //返回15

['1','2','3'].map(parseInt)即

parseInt('1',0);radix 为 0，parseInt() 会根据十进制来解析，所以结果为 1；

parseInt('2',1);radix 为 1，超出区间范围，所以结果为 NaN；

parseInt('3',2);radix 为 2，用2进制来解析，应以 0 和 1 开头，所以结果为 NaN。

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

1. 防抖
触发高频事件后 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)); // 防抖

2. 节流
高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
思路：每次触发事件时都判断当前是否有等待执行的延时函数。

function throttle(fn) {
     let canRun = true; // 通过闭包保存一个标记
     return function () {
       if (!canRun) return; // 在函数开头判断标记是否为 true，不为 true 则 return
       canRun = false; // 立即设置为 false
       setTimeout(() => { // 将外部传入的函数的执行放在 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
1.类似数组，成员值都是唯一的，没有重复的值。
2.可以遍历，遍历方法有keys，values，entries，forEach
3.键名就是键值，两者是同一个值

weakset
1.成员只能是对象
2.成员都是弱引用，垃圾回收机制不考虑对该对象的引用，可能随时消失
3.没有size属性，不可遍历

map
1.类似对象，是键值对的集合，键名可以是任何类型
2.可以遍历，遍历方法有keys，values，entries，forEach
3.可以和每个成员都是双元素的数组互相转换

weakmap
1.只接受对象作为键名，除了null
2.键名所引用的对象都是弱引用，垃圾回收机制不将该引用计算在内，一旦该对象的其它引用都被清除，垃圾回收机制就会释放对象占用的内存。键名对象和对应的键值也会自动消失。
3.没有size属性，不可遍历

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

1. 深度优先遍历（DFS-Depth First Search）

思路：

• 从一个节点出发，如果有邻居没访问过的，则访问邻居

• 如果邻居都被访问过了，则返回上一个顶点，继续访问上一个顶点的邻居

• 反复1,2的步骤，直到所有顶点都被访问完

2. 广度优先遍历（BFS-Breadth First Search）

思路：类似于二叉树的层次遍历，使用队列实现

• 出发点进队

• 如果队头元素没有被访问过，则访问队头的所有邻居中，如果有被访问过的邻居则进队

• 队头出队

• 反复2,3,直到队列为空

  const data = [
      {
          name: 'a',
          children: [
              { name: 'b', children: [{ name: 'e' }] },
              { name: 'c', children: [{ name: 'f' }] },
              { name: 'd', children: [{ name: 'g' }] },
          ],
      },
      {
          name: 'a2',
          children: [
              { name: 'b2', children: [{ name: 'e2' }] },
              { name: 'c2', children: [{ name: 'f2' }] },
              { name: 'd2', children: [{ name: 'g2' }] },
          ],
      }
  ]
  
  // 深度遍历, 使用递归
  function getName(data) {
      const result = [];
      data.forEach(item => {
          const map = data => {
              result.push(data.name);
              data.children && data.children.forEach(child => map(child));
          }
          map(item);
      })
      return result.join(',');
  }
  
  // 广度遍历, 创建一个执行队列, 当队列为空的时候则结束
  function getName2(data) {
      let result = [];
      let queue = data;
      while (queue.length > 0) {
          [...queue].forEach(child => {
              queue.shift();
              result.push(child.name);
              child.children && (queue.push(...child.children));
          });
      }
      return result.join(',');
  }
  
  console.log(getName(data))
  console.log(getName2(data))

 题6：请分别用深度优先思想和广度优先思想实现一个拷贝函数？

// 如果是对象/数组，返回一个空的对象/数组，
// 都不是的话直接返回原对象
// 判断返回的对象和原有对象是否相同就可以知道是否需要继续深拷贝
// 处理其他的数据类型的话就在这里加判断
function getEmpty(o) {
  if (Object.prototype.toString.call(o) === "[object Object]") {
    return {};
  }
  if (Object.prototype.toString.call(o) === "[object Array]") {
    return [];
  }
  return o;
}

function deepCopyBFS(origin) {
  let queue = [];
  let map = new Map(); // 记录出现过的对象，用于处理环

  let target = getEmpty(origin);
  if (target !== origin) {
    queue.push([origin, target]);
    map.set(origin, target);
  }

  while (queue.length) {
    let [ori, tar] = queue.shift();
    for (let key in ori) {
      // 处理环状
      if (map.get(ori[key])) {
        tar[key] = map.get(ori[key]);
        continue;
      }

      tar[key] = getEmpty(ori[key]);
      if (tar[key] !== ori[key]) {
        queue.push([ori[key], tar[key]]);
        map.set(ori[key], tar[key]);
      }
    }
  }

  return target;
}

function deepCopyDFS(origin) {
  let stack = [];
  let map = new Map(); // 记录出现过的对象，用于处理环

  let target = getEmpty(origin);
  if (target !== origin) {
    stack.push([origin, target]);
    map.set(origin, target);
  }

  while (stack.length) {
    let [ori, tar] = stack.pop();
    for (let key in ori) {
      // 处理环状
      if (map.get(ori[key])) {
        tar[key] = map.get(ori[key]);
        continue;
      }

      tar[key] = getEmpty(ori[key]);
      if (tar[key] !== ori[key]) {
        stack.push([ori[key], tar[key]]);
        map.set(ori[key], tar[key]);
      }
    }
  }

  return target;
}

// test
[deepCopyBFS, deepCopyDFS].forEach((deepCopy) => {
  console.log(deepCopy({ a: 1 }));
  console.log(deepCopy([1, 2, { a: [3, 4] }]));
  console.log(
    deepCopy(function () {
      return 1;
    })
  );
  console.log(
    deepCopy({
      x: function () {
        return "x";
      },
      val: 3,
      arr: [1, { test: 1 }],
    })
  );

  let circle = {};
  circle.child = circle;
  console.log(deepCopy(circle));
});

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

 区别：

• ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this(Parent.apply(this)).
• ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this。
• ES5的继承时通过原型或构造函数机制来实现。
• ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。
• 注意super关键字指代父类的实例，即父类的this对象。
• 注意：在子类构造函数中，调用super后，才可使用this关键字，否则报错。

 题8：setTimeout、Promise、Async/Await 的区别

1. setTimeout 

console.log('script start')	//1. 打印 script start
setTimeout(function(){
    console.log('settimeout')	// 4. 打印 settimeout
})	// 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数
console.log('script end')	//3. 打印 script start
// 输出顺序：script start->script end->settimeout

2. Promise

Promise本身是同步的立即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

当JS主线程执行到Promise对象时，

• promise1.then() 的回调就是一个 task

• promise1 是 resolved或rejected: 那这个 task 就会放入当前事件循环回合的 microtask queue

• promise1 是 pending: 这个 task 就会放入 事件循环的未来的某个(可能下一个)回合的 microtask queue 中

• setTimeout 的回调也是个 task ，它会被放入 macrotask queue 即使是 0ms 的情况

3. async/await 

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 输出顺序：script start->async1 start->async2->script end->async1 end

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。 

题9：Async/Await 如何通过同步的方式实现异步

第 9 题：Async/Await 如何通过同步的方式实现异步 | 木易杨前端进阶

题10：异步笔试题，请写出下面代码的运行结果 

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

//script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout

题11：算法手写题

已知如下数组：

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

var arr = [1, 2, [1,2,3,435], 5, 7,[6,4,6,7,[8,9,65]]];

        function flatten1(array){
            return array.reduce((prev, cur) => {
                return prev.concat(Array.isArray(cur) ? flatten1(cur) : cur);
            }, [])
        }

        // ...拓展运算符展开数组
        // 注意: 1.contact 只能展平一层
        function extendArray(array){

            while(array.some(item => Array.isArray(item))){
                array = [].concat(...array);
            }
            return Array.from(new Set(array));
        }

        //排序方法
        function sortArray(array){
            array.sort((a, b) => {
                return a - b;
            })
            return array;
        }

        // Array.from --创建一个新的，浅拷贝的数组
        // set 不重复的数组 

        // 1. reduce
        console.log(Array.from(new Set(flatten1(arr))))
        
        //2. toString().split(",")
        console.log(Array.from(new Set((arr).toString().split(",").map(item=> {
            return Number(item)
        }))))

        //3. join().split(",")
        console.log(Array.from(new Set((arr).join().split(",").map(item=> {
            return Number(item)
        }))))

        //4. ...拓展运算符
        console.log(sortArray(extendArray(arr)))

题12：JS 异步解决方案的发展历程以及优缺点。

1. 回调函数（callback）

缺点：回调地狱，不能用 try catch 捕获错误，不能 return

回调地狱的根本问题在于：

• 缺乏顺序性： 回调地狱导致的调试困难，和大脑的思维方式不符
• 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（控制反转）
• 嵌套函数过多的多话，很难处理错误

优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。） 

2. Promise

Promise就是为了解决callback的问题而产生的。

Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，如果我们在 then 中 return ，return 的结果会被 Promise.resolve() 包装

优点：解决了回调地狱的问题

缺点：无法取消 Promise ，错误需要通过回调函数来捕获

3. Generator

特点：可以控制函数的执行，可以配合 co 函数库使用

4. Async/await

async、await 是异步的终极解决方案

优点是：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题

缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

题13：Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？

Promise new的时候会立即执行里面的代码 then是微任务 会在本次任务执行完的时候执行 setTimeout是宏任务 会在下次任务执行的时候执行

题14：情人节福利题，如何实现一个 new

先理清楚 new 关键字调用函数都的具体过程，那么写出来就很清楚了

1. 首先创建一个空的对象，空对象的__proto__属性指向构造函数的原型对象
2. 把上面创建的空对象赋值构造函数内部的this，用构造函数内部的方法修改空对象
3. 如果构造函数返回一个非基本类型的值，则返回这个值，否则上面创建的对象

function _new(fn, ...arg) {
    var obj = Object.create(fn.prototype);
    const result = fn.apply(obj, ...arg);
    return Object.prototype.toString.call(result) == '[object Object]' ? result : obj;
}

题15：简单讲解一下http2的多路复用

在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：

• 第一个：串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）
• 第二个：连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。

HTTP/2的多路复用就是为了解决上述的两个性能问题。 在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。 帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。

多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

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

一、三次握手讲解

1. 客户端发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器，服务器由SYN=1知道客户端要求建立联机（客户端：我要连接你）

2. 服务器收到请求后要确认联机信息，向A发送ack number=(客户端的seq+1),syn=1,ack=1,随机产生seq=7654321的包（服务器：好的，你来连吧）

3. 客户端收到后检查ack number是否正确，即第一次发送的seq number+1,以及位码ack是否为1，若正确，客户端会再发送ack number=(服务器的seq+1),ack=1，服务器收到后确认seq值与ack=1则连接建立成功。（客户端：好的，我来了）

二、为什么http建立连接需要三次握手，不是两次或四次?

答：三次是最少的安全次数，两次不安全，四次浪费资源；

三、TCP关闭连接过程

1. Client向Server发送FIN包，表示Client主动要关闭连接，然后进入FIN_WAIT_1状态，等待Server返回ACK包。此后Client不能再向Server发送数据，但能读取数据。

2. Server收到FIN包后向Client发送ACK包，然后进入CLOSE_WAIT状态，此后Server不能再读取数据，但可以继续向Client发送数据。

3. Client收到Server返回的ACK包后进入FIN_WAIT_2状态，等待Server发送FIN包。

4. Server完成数据的发送后，将FIN包发送给Client，然后进入LAST_ACK状态，等待Client返回ACK包，此后Server既不能读取数据，也不能发送数据。

5. Client收到FIN包后向Server发送ACK包，然后进入TIME_WAIT状态，接着等待足够长的时间（2MSL）以确保Server接收到ACK包，最后回到CLOSED状态，释放网络资源。

6. Server收到Client返回的ACK包后便回到CLOSED状态，释放网络资源。

四、为什么要四次挥手？

TCP是全双工信道，何为全双工就是客户端与服务端建立两条通道，通道1:客户端的输出连接服务端的输入；通道2:客户端的输入连接服务端的输出。两个通道可以同时工作：客户端向服务端发送信号的同时服务端也可以向客户端发送信号。所以关闭双通道的时候就是这样：

客户端：我要关闭输入通道了。 服务端：好的，你关闭吧，我这边也关闭这个通道。

服务端：我也要关闭输入通道了。 客户端：好的你关闭吧，我也把这个通道关闭。

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

题17：A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态

问题定义

• A -> B 发起TCP请求，A端为请求侧，B端为服务侧

• TCP 三次握手已完成

• TCP 三次握手后双方没有任何数据交互

• B 在无预警情况下掉线（类似意外掉电重启状态）

问题答案

结论

A侧的TCP链路状态在未发送任何数据的情况下与等待的时间相关，如果在多个超时值范围以内那么状态为;如果触发了某一个超时的情况那么视情况的不同会有不同的改变。

一般情况下不管是KeepAlive超时还是内核超时，只要出现超时，那么必然会抛出异常，只是这个异常截获的时机会因编码方式的差异而有所不同。（同步异步IO，以及有无使用select、poll、epoll等IO多路复用机制）

原因与相关细节

基于IP网络的无状态特征，A侧系统不会在无动作情况下收到任何通知获知到B侧掉线的情况(除非AB是直连状态，那么A可以获知到自己网卡掉线的异常)

在此大前提的基础上，会因为链路环境、SOCKET设定、以及内核相关配置的不同，A侧会在不同的时机获知到B侧无响应的结果，但总归是以异常的形式获得这个结果。

操作系统有一堆时间超级长的兜底用timeout参数，用于在不同的时候给TCP栈一个异常退出的机会，避免无效连接过多而耗尽系统资源

其中，特性能让应用层配置一个远小于内核timeout参数的值，用于在这一堆时间超长的兜底参数生效之前，判断链路是否为有效状态。

以下仅讨论三次握手成功之后的兜底情况

TCP链路在建立之后，内核会初始化一个由参数控制的计时器（这个计时器在Ubuntu 18.04里面长达5天），以防止在未开启TCP KeepAlive的情况下连接因各种原因导致的长时间无动作而过度消耗系统资源，这个计时器会在每次TCP链路活动后重置

TCP正常传输过程中，每一次数据发送之后，必然伴随对端的ACK确认信息。如果对端因为各种原因失去反应（网络链路中断、意外掉电等）这个ACK将永远不会到来，内核在每次发送之后都会重置一个由参数控制的计时器，以防止对端以外断网导致的资源过度消耗。（这个计时器在Ubuntu 18.04里面是300秒/5分钟）

以上两个计时器作为keepalive参数未指定情况下的兜底参数，为内核自保特性，所以事件都很长，建议实际开发与运维中用更为合理的参数覆盖这些数值

A侧在超时退出之后一般会发送一个RST包用于告知对端重置链路，并给应用层一个异常的状态信息，视乎同步IO与异步IO的差异，这个异常获知的时机会有所不同。

B侧重启之后，因为不存有之前A-B之间建立链路相关的信息，这时候收到任何A侧来的数据都会以RST作为响应，以告知A侧链路发生异常

RST的设计用意在于链路发生意料之外的故障时告知链路上的各方释放资源（一般指的是NAT网关与收发两端）;FIN的设计是用于在链路正常情况下的正常单向终止与结束。二者不可混淆。

应用层到底层网卡发送的过程中，数据包会经历多个缓冲区，也会经历一到多次的分片操作，阻塞这一结果的发生是具有从底向上传递的特性。

这一过程中有一个需要强调的关键点：socket.send这个操作只是把数据发送到了内核缓冲区，只要数据量不大那么这个调用必然是在拷贝完之后立即返回的。而数据量大的时候，必然会产生阻塞。

在TCP传输中，决定阻塞与否的最终节点，是TCP的可靠传输特性。此特性决定了必须要有ACK数据包回复响应正确接收的数据段范围，内核才会把对应的数据从TCP发送缓冲区中移除，腾出空间让新的数据可以写入进来。

这个过程意味着，只要应用层发送了大于内核缓冲区可容容纳的数据量，那么必然会在应用层出现阻塞，等待ACK的到来，然后把新数据压入缓冲队列，循环往复，直到数据发送完毕。

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

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

原因： 在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

题19：React setState 笔试题，下面的代码输出什么？ 

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};

第 19 题：React setState 笔试题，下面的代码输出什么？ | 木易杨前端进阶

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

1、发出npm install命令；

2、npm 向 registry 查询模块压缩包的网址；

3、下载压缩包，存放在~/.npm目录；

4、解压压缩包到当前项目的node_modules目录；

题21：有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣 

1. Object.prototype.toString.call()

每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。

这种方法对于所有基本的数据类型都能进行判断，即使是 null 和 undefined 

Object.prototype.toString.call() 常用于判断浏览器内置对象时。 

2. instanceof

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

使用 instanceof判断一个对象是否为数组，instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型，找到返回 true，否则返回 false。

但 instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true。 

3. Array.isArray()

• 功能：用来判断对象是否为数组

• instanceof 与 isArray

  当检测Array实例时，Array.isArray 优于 instanceof ，因为 Array.isArray 可以检测出 iframes

Array.isArray() 与 Object.prototype.toString.call()

Array.isArray()是ES5新增的方法，当不存在 Array.isArray() ，可以用 Object.prototype.toString.call() 实现。 

题22：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

在讨论回流与重绘之前，我们要知道：

1. 浏览器使用流式布局模型 (Flow Based Layout)。
2. 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
3. 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
4. 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

一句话：回流必将引起重绘，重绘不一定会引起回流。

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。 

性能影响

回流比重绘的代价要更高。

有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。

现代浏览器会对频繁的回流或重绘操作进行优化：

浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

如何避免

CSS

• 避免使用table布局。
• 尽可能在DOM树的最末端改变class。
• 避免设置多层内联样式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 避免使用CSS表达式（例如：calc()）。

JavaScript

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。