2021大场面试题（二）

1.算法手写题

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

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

使用set方法去重，flat(Infinity)扁平化。
Array.form(new Set(arr.flat(Infinity))).sort((a,b)=> { return a-b });

2.JS 异步解决方案的发展历程以及优缺点

• 回调函数（callback）
  • 优点：解决了同步的问题（只要一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）
  • 缺点：回调地狱，不能用try catch 捕获错误，不能return
• Promise
  • 优点：解决了回调地狱问题
  • 缺点：无法取消 Promise，错误需要通过回调函数来捕获
• Generator
  • 特点：可以控制函数的执行，可以配合 co 函数库使用。
• Async / await
  • 优点：代码清晰，不用像Promise 写一大堆then链，处理了回调地狱的问题
  • 缺点：await将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用await会导致性能上的降低。

 

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

4.如何实现一个 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;
}

5.简单讲解一下http2的多路复用

http2采用二级制格式传输，取代了http1文本格式，解析高效。多路复用代替http1的序列和阻塞机制，所有相同域名请求都通过同一个TCP连接并发完成。

在http1中，并发多个请求需要多个TCP连接，浏览器为了控制资源会有6-8个TCP连接限制。

http2中，同域名下所有通信都在单个连接上完成，消除了因多个TCP连接而带来的延时和内存消耗。

单个连接上可以并行交错的请求和响应，之间互不干扰。

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

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

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

• 由React 控制事件处理程序，以及生命周期函数调用setState 不会同步更新state。
• React控制之外的事件中调用setState是同步更新的，比如原生js绑定的事件，setTimeout 和 setInterval

9.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
  }
}

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

发出npm install 命令查询node_modules 目录之中是否已经存在指定模块

• 若存在，不在重新安装
• 若不存在，npm向registry 查询模块压缩包的网址
• 下载压缩包，存放在根目录下的npm包目录
• 解压压缩包到目前项目的node_modules目录