关于前端:社招前端高频面试题

在地址栏里输出一个地址回车会产生哪些事件

1、解析 URL：首先会对 URL 进行解析，剖析所须要应用的传输协定和申请的资源的门路。如果输出的 URL 中的协定或者主机名不非法，将会把地址栏中输出的内容传递给搜索引擎。如果没有问题，浏览器会查看 URL 中是否呈现了非法字符，如果存在非法字符，则对非法字符进行本义后再进行下一过程。2、缓存判断：浏览器会判断所申请的资源是否在缓存里，如果申请的资源在缓存里并且没有生效，那么就间接应用，否则向服务器发动新的申请。3、DNS 解析：下一步首先须要获取的是输出的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则应用，如果没有则向本地 DNS 服务器发动申请。本地 DNS 服务器也会先查看是否存在缓存，如果没有就会先向根域名服务器发动申请，取得负责的顶级域名服务器的地址后，再向顶级域名服务器申请，而后取得负责的权威域名服务器的地址后，再向权威域名服务器发动申请，最终取得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给申请的用户。用户向本地 DNS 服务器发动申请属于递归申请，本地 DNS 服务器向各级域名服务器发动申请属于迭代申请。4、获取 MAC 地址：当浏览器失去 IP 地址后，数据传输还须要晓得目标主机 MAC 地址，因为应用层下发数据给传输层，TCP 协定会指定源端口号和目标端口号，而后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目标地址。而后将下发给数据链路层，数据链路层的发送须要退出通信单方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目标 MAC 地址须要分状况解决。通过将 IP 地址与本机的子网掩码相与，能够判断是否与申请主机在同一个子网里，如果在同一个子网里，能够应用 APR 协定获取到目标主机的 MAC 地址，如果不在一个子网里，那么申请应该转发给网关，由它代为转发，此时同样能够通过 ARP 协定来获取网关的 MAC 地址，此时目标主机的 MAC 地址应该为网关的地址。5、TCP 三次握手：上面是 TCP 建设连贯的三次握手的过程，首先客户端向服务器发送一个 SYN 连贯申请报文段和一个随机序号，服务端接管到申请后向客户端发送一个 SYN ACK 报文段，确认连贯申请，并且也向客户端发送一个随机序号。客户端接管服务器的确认应答后，进入连贯建设的状态，同时向服务器也发送一个 ACK 确认报文段，服务器端接管到确认后，也进入连贯建设状态，此时单方的连贯就建设起来了。6、HTTPS 握手：如果应用的是 HTTPS 协定，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送应用的协定的版本号、一个随机数和能够应用的加密办法。服务器端收到后，确认加密的办法，也向客户端发送一个随机数和本人的数字证书。客户端收到后，首先查看数字证书是否无效，如果无效，则再生成一个随机数，并应用证书中的公钥对随机数加密，而后发送给服务器端，并且还会提供一个后面所有内容的 hash 值供服务器端测验。服务器端接管后，应用本人的私钥对数据解密，同时向客户端发送一个后面所有内容的 hash 值供客户端测验。这个时候单方都有了三个随机数，依照之前所约定的加密办法，应用这三个随机数生成一把秘钥，当前单方通信前，就应用这个秘钥对数据进行加密后再传输。7、返回数据：当页面申请发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接管到响应后，开始对 html 文件进行解析，开始页面的渲染过程。8、页面渲染：浏览器首先会依据 html 文件构建 DOM 树，依据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建设好后，依据它们来构建渲染树。渲染树构建好后，会依据渲染树来进行布局。布局实现后，最初应用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示进去了。9、TCP 四次挥手：最初一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送实现，则它须要向服务端发送连贯开释申请。服务端收到连贯开释申请后，会通知应用层要开释 TCP 链接。而后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连贯曾经开释，不再接管客户端发的数据了。然而因为 TCP 连贯是双向的，所以服务端仍旧能够发送数据给客户端。服务端如果此时还有没发完的数据会持续发送，结束后会向客户端发送连贯开释申请，而后服务端便进入 LAST-ACK 状态。客户端收到开释申请后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会继续 2MSL（最大段生存期，指报文段在网络中生存的工夫，超时会被摈弃）工夫，若该时间段内没有服务端的重发申请的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。

—- 问题知识点分割线 —-

手写题：Promise 原理

class MyPromise {constructor(fn) {this.callbacks = [];
    this.state = "PENDING";
    this.value = null;

    fn(this._resolve.bind(this), this._reject.bind(this));
  }

  then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) =>
      this._handle({
        onFulfilled: onFulfilled || null,
        onRejected: onRejected || null,
        resolve,
        reject,
      })
    );
  }

  catch(onRejected) {return this.then(null, onRejected);
  }

  _handle(callback) {if (this.state === "PENDING") {this.callbacks.push(callback);

      return;
    }

    let cb =
      this.state === "FULFILLED" ? callback.onFulfilled : callback.onRejected;
    if (!cb) {
      cb = this.state === "FULFILLED" ? callback.resolve : callback.reject;
      cb(this.value);

      return;
    }

    let ret;

    try {ret = cb(this.value);
      cb = this.state === "FULFILLED" ? callback.resolve : callback.reject;
    } catch (error) {
      ret = error;
      cb = callback.reject;
    } finally {cb(ret);
    }
  }

  _resolve(value) {if (value && (typeof value === "object" || typeof value === "function")) {
      let then = value.then;

      if (typeof then === "function") {then.call(value, this._resolve.bind(this), this._reject.bind(this));

        return;
      }
    }

    this.state === "FULFILLED";
    this.value = value;
    this.callbacks.forEach((fn) => this._handle(fn));
  }

  _reject(error) {
    this.state === "REJECTED";
    this.value = error;
    this.callbacks.forEach((fn) => this._handle(fn));
  }
}

const p1 = new Promise(function (resolve, reject) {setTimeout(() => reject(new Error("fail")), 3000);
});

const p2 = new Promise(function (resolve, reject) {setTimeout(() => resolve(p1), 1000);
});

p2.then((result) => console.log(result)).catch((error) => console.log(error));

—- 问题知识点分割线 —-

个别如何产生闭包

• 返回函数
• 函数当做参数传递

—- 问题知识点分割线 —-

画一条 0.5px 的线

• 采纳 transform: scale()的形式，该办法用来定义元素的 2D 缩放转换：

transform: scale(0.5,0.5);

• 采纳 meta viewport 的形式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样就能缩放到原来的 0.5 倍，如果是 1px 那么就会变成 0.5px。viewport 只针对于挪动端，只在挪动端上能力看到成果

—- 问题知识点分割线 —-

setState

在理解 setState 之前，咱们先来简略理解下 React 一个包装构造: Transaction:

事务 (Transaction)

是 React 中的一个调用构造，用于包装一个办法，构造为: initialize – perform(method) – close。通过事务，能够对立治理一个办法的开始与完结；处于事务流中，示意过程正在执行一些操作

• setState: React 中用于批改状态，更新视图。它具备以下特点:

异步与同步: setState 并不是单纯的异步或同步，这其实与调用时的环境相干:

• 在 合成事件 和 生命周期钩子 (除 componentDidUpdate) 中，setState 是 ” 异步 ” 的；

  • 起因: 因为在 setState 的实现中，有一个判断: 当更新策略正在事务流的执行中时，该组件更新会被推入 dirtyComponents 队列中期待执行；否则，开始执行 batchedUpdates 队列更新；

    • 在生命周期钩子调用中，更新策略都处于更新之前，组件仍处于事务流中，而 componentDidUpdate 是在更新之后，此时组件曾经不在事务流中了，因而则会同步执行；
    • 在合成事件中，React 是基于 事务流实现的事件委托机制 实现，也是处于事务流中；
  • 问题: 无奈在 setState 后马上从 this.state 上获取更新后的值。
  • 解决: 如果须要马上同步去获取新值，setState 其实是能够传入第二个参数的。setState(updater, callback)，在回调中即可获取最新值；

• 在 原生事件 和 setTimeout 中，setState 是同步的，能够马上获取更新后的值；

  • 起因: 原生事件是浏览器自身的实现，与事务流无关，天然是同步；而 setTimeout 是搁置于定时器线程中延后执行，此时事务流已完结，因而也是同步；
• 批量更新 : 在 合成事件 和 生命周期钩子 中，setState 更新队列时，存储的是 合并状态(Object.assign)。因而后面设置的 key 值会被前面所笼罩，最终只会执行一次更新；

• 函数式 : 因为 Fiber 及 合并 的问题，官网举荐能够传入 函数 的模式。setState(fn)，在 fn 中返回新的 state 对象即可，例如 this.setState((state, props) => newState)；

  • 应用函数式，能够用于防止 setState 的批量更新的逻辑，传入的函数将会被 顺序调用；

注意事项:

• setState 合并，在 合成事件 和 生命周期钩子 中屡次间断调用会被优化为一次；

• 当组件已被销毁，如果再次调用 setState，React 会报错正告，通常有两种解决办法

  • 将数据挂载到内部，通过 props 传入，如放到 Redux 或 父级中；
  • 在组件外部保护一个状态量 (isUnmounted)，componentWillUnmount 中标记为 true，在 setState 前进行判断；

总结

setState 并非真异步，只是看上去像异步。在源码中，通过 isBatchingUpdates 来判断

• setState 是先存进 state 队列还是间接更新，如果值为 true 则执行异步操作，为 false 则间接更新。
• 那么什么状况下 isBatchingUpdates 会为 true 呢？在 React 能够管制的中央，就为 true，比方在 React 生命周期事件和合成事件中，都会走合并操作，提早更新的策略。
• 但在 React 无法控制的中央，比方原生事件，具体就是在 addEventListener、setTimeout、setInterval 等事件中，就只能同步更新。

个别认为，做异步设计是为了性能优化、缩小渲染次数，React 团队还补充了两点。

• 放弃外部一致性。如果将 state 改为同步更新，那只管 state 的更新是同步的，然而 props 不是。
• 启用并发更新，实现异步渲染。

1. setState 只有在 React 本身的合成事件和钩子函数中是异步的，在原生事件和 setTimeout 中都是同步的
2. setState 的异步并不是说外部由异步代码实现，其实自身执行的过程和代码都是同步的，只是合成事件和钩子函数中没法立马拿到更新后的值，造成了所谓的异步。当然能够通过 setState 的第二个参数中的 callback 拿到更新后的后果
3. setState 的批量更新优化也是建设在异步（合成事件、钩子函数）之上的，在原生事件和 setTimeout 中不会批量更新，在异步中如果对同一个值进行屡次 setState，setState 的批量更新策略会对其进行笼罩，去最初一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新
4. 合成事件中是异步
5. 钩子函数中的是异步
6. 原生事件中是同步
7. setTimeout 中是同步

这是一道常常会呈现的 React setState 口试题：上面的代码输入什么呢？

class Test extends React.Component {
  state  = {count: 0};

    componentDidMount() {this.setState({count: this.state.count + 1});
    console.log(this.state.count);

    this.setState({count: this.state.count + 1});
    console.log(this.state.count);

    setTimeout(() => {this.setState({count: this.state.count + 1});
      console.log(this.state.count);

      this.setState({count: this.state.count + 1});
      console.log(this.state.count);
    }, 0);
  }

  render() {return null;}
};

咱们能够进行如下的剖析：

• 首先第一次和第二次的 console.log，都在 React 的生命周期事件中，所以是异步的解决形式，则输入都为 0；
• 而在 setTimeout 中的 console.log 处于原生事件中，所以会同步的解决再输入后果，但须要留神，尽管 count 在后面通过了两次的 this.state.count + 1，然而每次获取的 this.state.count 都是初始化时的值，也就是 0；
• 所以此时 count 是 1，那么后续在 setTimeout中的输入则是 2 和 3。

所以残缺答案是 0,0,2,3

同步场景

异步场景中的案例使咱们建设了这样一个认知：setState 是异步的，但上面这个案例又会颠覆你的认知。如果咱们将 setState 放在 setTimeout 事件中，那状况就齐全不同了。

class Test extends Component {
    state = {count: 0}

    componentDidMount(){this.setState({ count: this.state.count + 1});
        console.log(this.state.count);
        setTimeout(() => {this.setState({ count: this.state.count + 1});
          console.log("setTimeout:" + this.state.count);
        }, 0);
    }

    render(){...}
}

那这时输入的应该是什么呢？如果你认为是 0,0，那么又错了。

正确的后果是 0,2。因为 setState 并不是真正的异步函数，它实际上是通过队列提早执行操作实现的，通过 isBatchingUpdates 来判断 setState 是先存进 state 队列还是间接更新。值为 true 则执行异步操作，false 则间接同步更新

接下来这个案例的答案是什么呢

class Test extends Component {
    state = {count: 0}

    componentDidMount(){
        this.setState({count: this.state.count + 1}, () => {console.log(this.state.count)
         })
         this.setState({count: this.state.count + 1}, () => {console.log(this.state.count)
         })
    }

    render(){...}
}

如果你感觉答案是 1,2，那必定就错了。这种迷惑性极强的考题在面试中十分常见，因为它反直觉。

如果从新认真思考，你会发现以后拿到的 this.state.count 的值并没有变动，都是 0，所以输入后果应该是 1,1。

当然，也能够在 setState 函数中获取批改后的 state 值进行批改。

class Test extends Component {
    state = {count: 0}

    componentDidMount(){
        this.setState(
          preState=> ({count:preState.count + 1}),()=>{console.log(this.state.count)
        })
        this.setState(
          preState=>({count:preState.count + 1}),()=>{console.log(this.state.count)
        })
    }

    render(){...}
}

这些统统是异步的回调，如果你认为输入后果是 1,2，那就又错了，实际上是 2,2。

为什么会这样呢？当调用 setState 函数时，就会 把以后的操作放入队列中 。React 依据队列内容，合并 state 数据，实现后再逐个执行回调，依据后果更新虚构 DOM，触发渲染。所以 回调时，state 曾经合并计算实现了，输入的后果就是 2,2 了。

—- 问题知识点分割线 —-

JavaScript 为什么要进行变量晋升，它导致了什么问题？

变量晋升的体现是，无论在函数中何处地位申明的变量，如同都被晋升到了函数的首部，能够在变量申明前拜访到而不会报错。

造成变量申明晋升的 实质起因 是 js 引擎在代码执行前有一个解析的过程，创立了执行上下文，初始化了一些代码执行时须要用到的对象。当拜访一个变量时，会到以后执行上下文中的作用域链中去查找，而作用域链的首端指向的是以后执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它蕴含了函数的形参、所有的函数和变量申明，这个对象的是在代码解析的时候创立的。

首先要晓得，JS 在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。

• 在解析阶段，JS 会查看语法，并对函数进行预编译。解析的时候会先创立一个全局执行上下文环境，先把代码中行将执行的变量、函数申明都拿进去，变量先赋值为 undefined，函数先申明好可应用。在一个函数执行之前，也会创立一个函数执行上下文环境，跟全局执行上下文相似，不过函数执行上下文会多出 this、arguments 和函数的参数。

  • 全局上下文：变量定义，函数申明
  • 函数上下文：变量定义，函数申明，this，arguments
• 在执行阶段，就是依照代码的程序顺次执行。

那为什么会进行变量晋升呢？次要有以下两个起因：

• 进步性能
• 容错性更好

（1）进步性能 在 JS 代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了进步性能，如果没有这一步，那么每次执行代码前都必须从新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会扭转，解析一遍就够了。

在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计申明了哪些变量、创立了哪些函数，并对函数的代码进行压缩，去除正文、不必要的空白等。这样做的益处就是每次执行函数时都能够间接为该函数调配栈空间（不须要再解析一遍去获取代码中申明了哪些变量，创立了哪些函数），并且因为代码压缩的起因，代码执行也更快了。

（2）容错性更好

变量晋升能够在肯定水平上进步 JS 的容错性，看上面的代码：

a = 1;var a;console.log(a);

如果没有变量晋升，这两行代码就会报错，然而因为有了变量晋升，这段代码就能够失常执行。

尽管，在能够开发过程中，能够完全避免这样写，然而有时代码很简单的时候。可能因为忽略而先应用后定义了，这样也不会影响失常应用。因为变量晋升的存在，而会失常运行。

总结：

• 解析和预编译过程中的申明晋升能够进步性能，让函数能够在执行时事后为变量调配栈空间
• 申明晋升还能够进步 JS 代码的容错性，使一些不标准的代码也能够失常执行

变量晋升尽管有一些长处，然而他也会造成肯定的问题，在 ES6 中提出了 let、const 来定义变量，它们就没有变量晋升的机制。上面看一下变量晋升可能会导致的问题：

var tmp = new Date();

function fn(){console.log(tmp);
    if(false){var tmp = 'hello world';}
}

fn();  // undefined

在这个函数中，本来是要打印出外层的 tmp 变量，然而因为变量晋升的问题，内层定义的 tmp 被提到函数外部的最顶部，相当于笼罩了外层的 tmp，所以打印后果为 undefined。

var tmp = 'hello world';

for (var i = 0; i < tmp.length; i++) {console.log(tmp[i]);
}

console.log(i); // 11

因为遍历时定义的 i 会变量晋升成为一个全局变量，在函数完结之后不会被销毁，所以打印进去 11。

—- 问题知识点分割线 —-

代码输入后果

const p1 = new Promise((resolve) => {setTimeout(() => {resolve('resolve3');
    console.log('timer1')
  }, 0)
  resolve('resovle1');
  resolve('resolve2');
}).then(res => {console.log(res)  // resolve1
  setTimeout(() => {console.log(p1)
  }, 1000)
}).finally(res => {console.log('finally', res)
})

执行后果为如下：

resolve1
finally  undefined
timer1
Promise{<resolved>: undefined}

须要留神的是最初一个定时器打印出的 p1 其实是 .finally 的返回值，咱们晓得 .finally 的返回值如果在没有抛出谬误的状况下默认会是上一个 Promise 的返回值，而这道题中 .finally 上一个 Promise 是 .then()，然而这个.then() 并没有返回值，所以 p1 打印进去的 Promise 的值会是undefined，如果在定时器的上面加上一个return 1，则值就会变成 1。

—- 问题知识点分割线 —-

map 和 foreach 有什么区别

foreach()办法会针对每一个元素执行提供得函数, 该办法没有返回值, 是否会扭转原数组取决与数组元素的类型是根本类型还是援用类型
map()办法不会扭转原数组的值, 返回一个新数组, 新数组中的值为原数组调用函数解决之后的值：

—- 问题知识点分割线 —-

二分查找 – 工夫复杂度 log2(n)

题目形容: 如何确定一个数在一个有序数组中的地位

实现代码如下:

function search(arr, target, start, end) {
  let targetIndex = -1;

  let mid = Math.floor((start + end) / 2);

  if (arr[mid] === target) {
    targetIndex = mid;
    return targetIndex;
  }

  if (start >= end) {return targetIndex;}

  if (arr[mid] < target) {return search(arr, target, mid + 1, end);
  } else {return search(arr, target, start, mid - 1);
  }
}
// const dataArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// const position = search(dataArr, 6, 0, dataArr.length - 1);
// if (position !== -1) {//   console.log(` 指标元素在数组中的地位:${position}`);
// } else {//   console.log("指标元素不在数组中");
// }

—- 问题知识点分割线 —-

深刻数组

一、梳理数组 API

1. Array.of

Array.of 用于将参数顺次转化为数组中的一项，而后返回这个新数组，而不论这个参数是数字还是其余。它基本上与 Array 结构器性能统一，惟一的区别就在单个数字参数的解决上

Array.of(8.0); // [8]
Array(8.0); // [empty × 8]
Array.of(8.0, 5); // [8, 5]
Array(8.0, 5); // [8, 5]
Array.of('8'); // ["8"]
Array('8'); // ["8"]

2. Array.from

从语法上看，Array.from 领有 3 个参数：

• 相似数组的对象，必选；
• 加工函数，新生成的数组会通过该函数的加工再返回；
• this 作用域，示意加工函数执行时 this 的值。

这三个参数外面第一个参数是必选的，后两个参数都是可选的。咱们通过一段代码来看看它的用法。

var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, function(value, index){console.log(value, index, this, arguments.length);
  return value.repeat(3);   // 必须指定返回值，否则返回 undefined
}, obj);

// return 的 value 反复了三遍，最初返回的数组为 ["aaa","bbb","ccc"]


// 如果这里不指定 this 的话，加工函数齐全能够是一个箭头函数。上述代码能够简写为如下模式。Array.from(obj, (value) => value.repeat(3));
//  控制台返回 (3) ["aaa", "bbb", "ccc"]

除了上述 obj 对象以外，领有迭代器的对象还包含 String、Set、Map 等，Array.from 通通能够解决，请看上面的代码。

// String
Array.from('abc');         // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])); // ["abc", "def"]
// Map
Array.from(new Map([[1, 'ab'], [2, 'de']])); 
// [[1, 'ab'], [2, 'de']]

3. Array 的判断

在 ES5 提供该办法之前，咱们至多有如下 5 种形式去判断一个变量是否为数组。

var a = [];
// 1. 基于 instanceof
a instanceof Array;
// 2. 基于 constructor
a.constructor === Array;
// 3. 基于 Object.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(a);
// 4. 基于 getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype;
// 5. 基于 Object.prototype.toString
Object.prototype.toString.apply(a) === '[object Array]';

ES6 之后新增了一个 Array.isArray 办法，能直接判断数据类型是否为数组，然而如果 isArray 不存在，那么 Array.isArray 的 polyfill 通常能够这样写：

if (!Array.isArray){Array.isArray = function(arg){return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

4. 扭转本身的办法

基于 ES6，会扭转本身值的办法一共有 9 个，别离为 pop、push、reverse、shift、sort、splice、unshift，以及两个 ES6 新增的办法 copyWithin 和 fill

// pop 办法
var array = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse
// push 办法
var array = ["football", "basketball",  "badminton"];
var i = array.push("golfball");
console.log(array); 
// ["football", "basketball", "badminton", "golfball"]
console.log(i); // 4
// reverse 办法
var array = [1,2,3,4,5];
var array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true
// shift 办法
var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1
// unshift 办法
var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4
// sort 办法
var array = ["apple","Boy","Cat","dog"];
var array2 = array.sort();
console.log(array); // ["Boy", "Cat", "apple", "dog"]
console.log(array2 == array); // true
// splice 办法
var array = ["apple","boy"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
console.log(splices); // ["boy"]
// copyWithin 办法
var array = [1,2,3,4,5]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2);  // true [4, 5, 3, 4, 5]
// fill 办法
var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2); 
// true [10, 10, 10, 4, 5], 可见数组区间 [0,3] 的元素全副替换为 10

5. 不扭转本身的办法

基于 ES7，不会扭转本身的办法也有 9 个，别离为 concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未造成规范的 toSource，以及 ES7 新增的办法 includes。

// concat 办法
var array = [1, 2, 3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被批改
// join 办法
var array = ['We', 'are', 'Chinese'];
console.log(array.join()); // "We,are,Chinese"
console.log(array.join('+')); // "We+are+Chinese"
// slice 办法
var array = ["one", "two", "three","four", "five"];
console.log(array.slice()); // ["one", "two", "three","four", "five"]
console.log(array.slice(2,3)); // ["three"]
// toString 办法
var array = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = array.toString();
console.log(str); // Jan,Feb,Mar,Apr
// tolocalString 办法
var array= [{name:'zz'}, 123, "abc", new Date()];
var str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午 1:06:23
// indexOf 办法
var array = ['abc', 'def', 'ghi','123'];
console.log(array.indexOf('def')); // 1
// includes 办法
var array = [-0, 1, 2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true
var array = [NaN];
console.log(array.includes(NaN)); // true

其中 includes 办法须要留神的是，如果元素中有 0，那么在判断过程中不论是 +0 还是 -0 都会判断为 True，这里的 includes 疏忽了 +0 和 -0

6. 数组遍历的办法

基于 ES6，不会扭转本身的遍历办法一共有 12 个，别离为 forEach、every、some、filter、map、reduce、reduceRight，以及 ES6 新增的办法 entries、find、findIndex、keys、values

// forEach 办法
var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){array[index] = value;
  console.log(this.name); // cc 被打印了三次, this 指向 obj
},obj);
console.log(array); // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为 undefined
// every 办法
var o = {0:10, 1:8, 2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){return value >= 8;},o);
console.log(bool); // true
// some 办法
var array = [18, 9, 10, 35, 80];
var isExist = array.some(function(value, index, array){return value > 20;});
console.log(isExist); // true 
// map 办法
var array = [18, 9, 10, 35, 80];
array.map(item => item + 1);
console.log(array);  // [19, 10, 11, 36, 81]
// filter 办法
var array = [18, 9, 10, 35, 80];
var array2 = array.filter(function(value, index, array){return value > 20;});
console.log(array2); // [35, 80]
// reduce 办法
var array = [1, 2, 3, 4];
var s = array.reduce(function(previousValue, value, index, array){return previousValue * value;},1);
console.log(s); // 24
// ES6 写法更加简洁
array.reduce((p, v) => p * v); // 24
// reduceRight 办法 (和 reduce 的区别就是从后往前累计)
var array = [1, 2, 3, 4];
array.reduceRight((p, v) => p * v); // 24
// entries 办法
var array = ["a", "b", "c"];
var iterator = array.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组开端时, 再迭代就会返回 undefined
// find & findIndex 办法
var array = [1, 3, 5, 7, 8, 9, 10];
function f(value, index, array){return value%2==0;     // 返回偶数}
function f2(value, index, array){return value > 20;     // 返回大于 20 的数}
console.log(array.find(f)); // 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); // 4
console.log(array.findIndex(f2)); // -1
// keys 办法
[...Array(10).keys()];     // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// values 办法
var array = ["abc", "xyz"];
var iterator = array.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz

7. 总结

这些办法之间存在很多共性，如下：

• 所有插入元素的办法，比方 push、unshift 一律返回数组新的长度；
• 所有删除元素的办法，比方 pop、shift、splice 一律返回删除的元素，或者返回删除的多个元素组成的数组；
• 局部遍历办法，比方 forEach、every、some、filter、map、find、findIndex，它们都蕴含 function(value,index,array){} 和 thisArg 这样两个形参。

数组和字符串办法

二、了解 JS 的类数组

在 JavaScript 中有哪些状况下的对象是类数组呢？次要有以下几种

• 函数外面的参数对象 arguments；
• 用 getElementsByTagName/ClassName/Name 取得的 HTMLCollection
• 用 querySelector 取得的 NodeList

1. arguments 对象

arguments 对象是函数中传递的参数值的汇合。它是一个相似数组的对象，因为它有一个 length 属性，咱们能够应用数组索引表示法 arguments[1] 来拜访单个值，但它没有数组中的内置办法，如：forEach、reduce、filter 和 map。

function foo(name, age, sex) {console.log(arguments);
    console.log(typeof arguments);
    console.log(Object.prototype.toString.call(arguments));
}
foo('jack', '18', 'male');

这段代码比拟容易，就是间接将这个函数的 arguments 在函数外部打印进去，那么咱们看下这个 arguments 打印进去的后果，请看控制台的这张截图。

从后果中能够看到，typeof 这个 arguments 返回的是 object，通过 Object.prototype.toString.call 返回的后果是 '[object arguments]'，能够看进去返回的不是 '[object array]'，阐明 arguments 和数组还是有区别的。

咱们能够应用 Array.prototype.slice 将arguments对象转换成一个数组。

function one() {return Array.prototype.slice.call(arguments);
}

留神: 箭头函数中没有 arguments 对象。

function one() {return arguments;}
const two = function () {return arguments;}
const three = function three() {return arguments;}

const four = () => arguments;

four(); // Throws an error  - arguments is not defined

当咱们调用函数 four 时，它会抛出一个 ReferenceError: arguments is not defined error。应用 rest 语法，能够解决这个问题。

const four = (...args) => args;

这会主动将所有参数值放入数组中。

arguments 不仅仅有一个 length 属性，还有一个 callee 属性，咱们接下来看看这个 callee 是干什么的，代码如下所示

function foo(name, age, sex) {console.log(arguments.callee);
}
foo('jack', '18', 'male');

从控制台能够看到，输入的就是函数本身，如果在函数外部间接执行调用 callee 的话，那它就会不停地执行以后函数，直到执行到内存溢出

2. HTMLCollection

HTMLCollection 简略来说是 HTML DOM 对象的一个接口，这个接口蕴含了获取到的 DOM 元素汇合，返回的类型是类数组对象，如果用 typeof 来判断的话，它返回的是 ‘object’。它是及时更新的，当文档中的 DOM 变动时，它也会随之变动。

形容起来比拟形象，还是通过一段代码来看下 HTMLCollection 最初返回的是什么，咱们先轻易找一个页面中有 form 表单的页面，在控制台中执行下述代码

var elem1, elem2;
// document.forms 是一个 HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
console.log(elem1);
console.log(elem2);
console.log(typeof elem1);
console.log(Object.prototype.toString.call(elem1));

在这个有 form 表单的页面执行下面的代码，失去的后果如下。

能够看到，这里打印进去了页面第一个 form 表单元素，同时也打印进去了判断类型的后果，阐明打印的判断的类型和 arguments 返回的也比拟相似，typeof 返回的都是 ‘object’，和下面的相似。

另外须要留神的一点就是 HTML DOM 中的 HTMLCollection 是即时更新的，当其所蕴含的文档构造产生扭转时，它会自动更新。上面咱们再看最初一个 NodeList 类数组。

3. NodeList

NodeList 对象是节点的汇合，通常是由 querySlector 返回的。NodeList 不是一个数组，也是一品种数组。尽管 NodeList 不是一个数组，然而能够应用 for…of 来迭代。在一些状况下，NodeList 是一个实时汇合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变动。咱们还是利用代码来了解一下 Nodelist 这品种数组。

var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list) {checkbox.checked = true;}
console.log(list);
console.log(typeof list);
console.log(Object.prototype.toString.call(list));

从下面的代码执行的后果中能够发现，咱们是通过有 CheckBox 的页面执行的代码，在后果可中输入了一个 NodeList 类数组，外面有一个 CheckBox 元素，并且咱们判断了它的类型，和下面的 arguments 与 HTMLCollection 其实是相似的，执行后果如下图所示。

4. 类数组利用场景

1. 遍历参数操作

咱们在函数外部能够间接获取 arguments 这个类数组的值，那么也能够对于参数进行一些操作，比方上面这段代码，咱们能够将函数的参数默认进行求和操作。

function add() {
    var sum =0,
        len = arguments.length;
    for(var i = 0; i < len; i++){sum += arguments[i];
    }
    return sum;
}
add()                           // 0
add(1)                          // 1
add(1，2)                       // 3
add(1,2,3,4);                   // 10

2. 定义链接字符串函数

咱们能够通过 arguments 这个例子定义一个函数来连贯字符串。这个函数惟一正式申明了的参数是一个字符串，该参数指定一个字符作为连接点来连贯字符串。该函数定义如下。

// 这段代码阐明了，你能够传递任意数量的参数到该函数，并应用每个参数作为列表中的项创立列表进行拼接。从这个例子中也能够看出，咱们能够在日常编码中采纳这样的代码形象形式，把须要解决的这一类问题，都形象成通用的办法，来晋升代码的可复用性
function myConcat(separa) {var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separa);
}
myConcat(",", "red", "orange", "blue");
// "red, orange, blue"
myConcat(";", "elephant", "lion", "snake");
// "elephant; lion; snake"
myConcat(".", "one", "two", "three", "four", "five");
// "one. two. three. four. five"

3. 传递参数应用

// 应用 apply 将 foo 的参数传递给 bar
function foo() {bar.apply(this, arguments);
}
function bar(a, b, c) {console.log(a, b, c);
}
foo(1, 2, 3)   //1 2 3

5. 如何将类数组转换成数组

1. 类数组借用数组办法转数组

function sum(a, b) {let args = Array.prototype.slice.call(arguments);
 // let args = [].slice.call(arguments); // 这样写也是一样成果
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);  // 3
function sum(a, b) {let args = Array.prototype.concat.apply([], arguments);
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);  // 3

2. ES6 的办法转数组

function sum(a, b) {let args = Array.from(arguments);
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);    // 3
function sum(a, b) {let args = [...arguments];
  console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);    // 3
function sum(...args) {console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2);    // 3

Array.from 和 ES6 的开展运算符 ，都能够把 arguments 这个类数组转换成数组 args

类数组和数组的异同点

在前端工作中，开发者往往会漠视对类数组的学习，其实在高级 JavaScript 编程中常常须要将类数组向数组转化，尤其是一些比较复杂的开源我的项目，常常会看到函数中解决参数的写法，例如：[].slice.call(arguments) 这行代码。

三、实现数组扁平化的 6 种形式

1. 办法一：一般的递归实

一般的递归思路很容易了解，就是通过循环递归的形式，一项一项地去遍历，如果每一项还是一个数组，那么就持续往下遍历，利用递归程序的办法，来实现数组的每一项的连贯。咱们来看下这个办法是如何实现的，如下所示

// 办法 1
var a = [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;
}
flatten(a);  //  [1, 2, 3, 4，5]

从下面这段代码能够看出，最初返回的后果是扁平化的后果，这段代码外围就是循环遍历过程中的递归操作，就是在遍历过程中发现数组元素还是数组的时候进行递归操作，把数组的后果通过数组的 concat 办法拼接到最初要返回的 result 数组上，那么最初输入的后果就是扁平化后的数组

2. 办法二：利用 reduce 函数迭代

从下面一般的递归函数中能够看出，其实就是对数组的每一项进行解决，那么咱们其实也能够用 reduce 来实现数组的拼接，从而简化第一种办法的代码，革新后的代码如下所示。

// 办法 2
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.reduce(function(prev, next){return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr));//  [1, 2, 3, 4，5]

3. 办法三：扩大运算符实现

这个办法的实现，采纳了扩大运算符和 some 的办法，两者独特应用，达到数组扁平化的目标，还是来看一下代码

// 办法 3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

从执行的后果中能够发现，咱们先用数组的 some 办法把数组中依然是组数的项过滤出来，而后执行 concat 操作，利用 ES6 的开展运算符，将其拼接到原数组中，最初返回原数组，达到了预期的成果。

前三种实现数组扁平化的形式其实是最根本的思路，都是通过最一般递归思路衍生的办法，尤其是前两种实现办法比拟相似。值得注意的是 reduce 办法，它能够在很多利用场景中实现，因为 reduce 这个办法提供的几个参数比拟灵便，能解决很多问题，所以是值得纯熟应用并且精通的

4. 办法四：split 和 toString 独特解决

咱们也能够通过 split 和 toString 两个办法，来独特实现数组扁平化，因为数组会默认带一个 toString 的办法，所以能够把数组间接转换成逗号分隔的字符串，而后再用 split 办法把字符串从新转换为数组，如上面的代码所示。

// 办法 4
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.toString().split(',');
}
console.log(flatten(arr)); //  [1, 2, 3, 4]

通过这两个办法能够将多维数组间接转换成逗号连贯的字符串，而后再从新分隔成数组，你能够在控制台执行一下查看后果。

5. 办法五：调用 ES6 中的 flat

咱们还能够间接调用 ES6 中的 flat 办法，能够间接实现数组扁平化。先来看下 flat 办法的语法：

arr.flat([depth])

其中 depth 是 flat 的参数，depth 是能够传递数组的开展深度（默认不填、数值是 1），即开展一层数组。那么如果多层的该怎么解决呢？参数也能够传进 Infinity，代表不管多少层都要开展。那么咱们来看下，用 flat 办法怎么实现，请看上面的代码。

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

• 能够看出，一个嵌套了两层的数组，通过将 flat 办法的参数设置为 Infinity，达到了咱们预期的成果。其实同样也能够设置成 2，也能实现这样的成果。
• 因而，你在编程过程中，发现对数组的嵌套层数不确定的时候，最好间接应用 Infinity，能够达到扁平化。上面咱们再来看最初一种场景

6. 办法六：正则和 JSON 办法独特解决

咱们在第四种办法中曾经尝试了用 toString 办法，其中依然采纳了将 JSON.stringify 的办法先转换为字符串，而后通过正则表达式过滤掉字符串中的数组的方括号，最初再利用 JSON.parse 把它转换成数组。请看上面的代码

// 办法 6
let arr = [1, [2, [3, [4, 5]]], 6];
function flatten(arr) {let str = JSON.stringify(arr);
  str = str.replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  return JSON.parse(str); 
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

能够看到，其中先把传入的数组转换成字符串，而后通过正则表达式的形式把括号过滤掉，这部分正则的表达式你不太了解的话，能够看看上面的图片

通过这个在线网站 https://regexper.com/ 能够把正则剖析成容易了解的可视化的逻辑脑图。其中咱们能够看到，匹配规定是：全局匹配（g）左括号或者右括号，将它们替换成空格，最初返回解决后的后果。之后拿着正则解决好的后果从新在外层包裹括号，最初通过 JSON.parse 转换成数组返回。

四、如何用 JS 实现各种数组排序

数据结构算法中排序有很多种，常见的、不常见的，至多蕴含十种以上。依据它们的个性，能够大抵分为两种类型：比拟类排序和非比拟类排序。

• 比拟类排序：通过比拟来决定元素间的绝对秩序，其工夫复杂度不能冲破 O(nlogn)，因而也称为非线性工夫比拟类排序。
• 非比拟类排序：不通过比拟来决定元素间的绝对秩序，它能够冲破基于比拟排序的工夫下界，以线性工夫运行，因而也称为线性工夫非比拟类排序。

咱们通过一张图片来看看这两种分类形式别离包含哪些排序办法。

非比拟类的排序在理论状况中用的比拟少

1. 冒泡排序

冒泡排序是最根底的排序，个别在最开始学习数据结构的时候就会接触它。冒泡排序是一次比拟两个元素，如果程序是谬误的就把它们替换过去。走访数列的工作会反复地进行，直到不须要再替换，也就是说该数列曾经排序实现。请看上面的代码。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function bubbleSort(array) {
  const len = array.length
  if (len < 2) return array
  for (let i = 0; i < len; i++) {for (let j = 0; j < i; j++) {if (array[j] > array[i]) {const temp = array[j]
        array[j] = array[i]
        array[i] = temp
      }
    }
  }
  return array
}
bubbleSort(a);  // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从下面这段代码能够看出，最初返回的是排好序的后果。因为冒泡排序切实太根底和简略，这里就不过多赘述了。上面咱们来看看疾速排序法

2. 疾速排序

疾速排序的根本思维是通过一趟排序，将待排记录分隔成独立的两局部，其中一部分记录的关键字均比另一部分的关键字小，则能够别离对这两局部记录持续进行排序，以达到整个序列有序。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function quickSort(array) {var quick = function(arr) {if (arr.length <= 1) return arr
    const len = arr.length
    const index = Math.floor(len >> 1)
    const pivot = arr.splice(index, 1)[0]
    const left = []
    const right = []
    for (let i = 0; i < len; i++) {if (arr[i] > pivot) {right.push(arr[i])
      } else if (arr[i] <= pivot) {left.push(arr[i])
      }
    }
    return quick(left).concat([pivot], quick(right))
  }
  const result = quick(array)
  return result
}
quickSort(a);//  [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

下面的代码在控制台执行之后，也能够失去预期的后果。最次要的思路是从数列中挑出一个元素，称为“基准”（pivot）；而后从新排序数列，所有元素比基准值小的摆放在基准后面、比基准值大的摆在基准的前面；在这个辨别搞定之后，该基准就处于数列的两头地位；而后把小于基准值元素的子数列（left）和大于基准值元素的子数列（right）递归地调用 quick 办法排序实现，这就是快排的思路。

3. 插入排序

插入排序算法形容的是一种简略直观的排序算法。它的 工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应地位并插入，从而达到排序的成果。来看一下代码

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function insertSort(array) {
  const len = array.length
  let current
  let prev
  for (let i = 1; i < len; i++) {current = array[i]
    prev = i - 1
    while (prev >= 0 && array[prev] > current) {array[prev + 1] = array[prev]
      prev--
    }
    array[prev + 1] = current
  }
  return array
}
insertSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从执行的后果中能够发现，通过插入排序这种形式实现了排序成果。插入排序的思路是基于数组自身进行调整的，首先循环遍历从 i 等于 1 开始，拿到以后的 current 的值，去和后面的值比拟，如果后面的大于以后的值，就把后面的值和以后的那个值进行替换，通过这样一直循环达到了排序的目标

4. 抉择排序

抉择排序是一种简略直观的排序算法。它的工作原理是，首先将最小的元素寄存在序列的起始地位，再从残余未排序元素中持续寻找最小元素，而后放到已排序的序列前面……以此类推，直到所有元素均排序结束。请看上面的代码。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function selectSort(array) {
  const len = array.length
  let temp
  let minIndex
  for (let i = 0; i < len - 1; i++) {
    minIndex = i
    for (let j = i + 1; j < len; j++) {if (array[j] <= array[minIndex]) {minIndex = j}
    }
    temp = array[i]
    array[i] = array[minIndex]
    array[minIndex] = temp
  }
  return array
}
selectSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

这样，通过抉择排序的办法同样也能够实现数组的排序，从下面的代码中能够看出该排序是体现最稳固的排序算法之一，因为无论什么数据进去都是 O(n 平方) 的工夫复杂度，所以用到它的时候，数据规模越小越好

5. 堆排序

堆排序是指利用堆这种数据结构所设计的一种排序算法。沉积是一个近似齐全二叉树的构造，并同时满足沉积的性质，即子结点的键值或索引总是小于（或者大于）它的父节点。堆的底层实际上就是一棵齐全二叉树，能够用数组实现。

根节点最大的堆叫作大根堆，根节点最小的堆叫作小根堆，你能够依据从大到小排序或者从小到大来排序，别离建设对应的堆就能够。请看上面的代码

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function heap_sort(arr) {
  var len = arr.length
  var k = 0
  function swap(i, j) {var temp = arr[i]
    arr[i] = arr[j]
    arr[j] = temp
  }
  function max_heapify(start, end) {
    var dad = start
    var son = dad * 2 + 1
    if (son >= end) return
    if (son + 1 < end && arr[son] < arr[son + 1]) {son++}
    if (arr[dad] <= arr[son]) {swap(dad, son)
      max_heapify(son, end)
    }
  }
  for (var i = Math.floor(len / 2) - 1; i >= 0; i--) {max_heapify(i, len)
  }

  for (var j = len - 1; j > k; j--) {swap(0, j)
    max_heapify(0, j)
  }

  return arr
}
heap_sort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从代码来看，堆排序相比下面几种排序整体上会简单一些，不太容易了解。不过你应该晓得两点：

• 一是堆排序最外围的点就在于排序前先建堆；
• 二是因为堆其实就是齐全二叉树，如果父节点的序号为 n，那么叶子节点的序号就别离是 2n 和 2n+1。

你了解了这两点，再看代码就比拟好了解了。堆排序最初有两个循环：第一个是解决父节点的程序；第二个循环则是依据父节点和叶子节点的大小比照，进行堆的调整。通过这两轮循环的调整，最初堆排序实现。

6. 归并排序

归并排序是建设在归并操作上的一种无效的排序算法，该算法是采纳分治法的一个十分典型的利用。将已有序的子序列合并，失去齐全有序的序列；先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为二路归并。咱们先看一下代码。

var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function mergeSort(array) {const merge = (right, left) => {const result = []
    let il = 0
    let ir = 0
    while (il < left.length && ir < right.length) {if (left[il] < right[ir]) {result.push(left[il++])
      } else {result.push(right[ir++])
      }
    }
    while (il < left.length) {result.push(left[il++])
    }
    while (ir < right.length) {result.push(right[ir++])
    }
    return result
  }
  const mergeSort = array => {if (array.length === 1) {return array}
    const mid = Math.floor(array.length / 2)
    const left = array.slice(0, mid)
    const right = array.slice(mid, array.length)
    return merge(mergeSort(left), mergeSort(right))
  }
  return mergeSort(array)
}
mergeSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]

从下面这段代码中能够看到，通过归并排序能够失去想要的后果。下面提到了分治的思路，你能够从 mergeSort 办法中看到，通过 mid 能够把该数组分成左右两个数组，别离对这两个进行递归调用排序办法，最初将两个数组依照程序归并起来。

归并排序是一种稳固的排序办法，和抉择排序一样，归并排序的性能不受输出数据的影响，但体现比抉择排序好得多，因为始终都是 O(nlogn) 的工夫复杂度。而代价是须要额定的内存空间。

其中你能够看到排序相干的工夫复杂度和空间复杂度以及稳定性的状况，如果遇到须要本人实现排序的时候，能够依据它们的空间和工夫复杂度综合考量，抉择最适宜的排序办法

—- 问题知识点分割线 —-

JavaScript 有哪些内置对象

全局的对象（global objects）或称规范内置对象，不要和 “ 全局对象（global object）” 混同。这里说的全局的对象是说在
全局作用域里的对象。全局作用域中的其余对象能够由用户的脚本创立或由宿主程序提供。

规范内置对象的分类：

（1）值属性，这些全局属性返回一个简略值，这些值没有本人的属性和办法。例如 Infinity、NaN、undefined、null 字面量

（2）函数属性，全局函数能够间接调用，不须要在调用时指定所属对象，执行完结后会将后果间接返回给调用者。例如 eval()、parseFloat()、parseInt() 等

（3）根本对象，根本对象是定义或应用其余对象的根底。根本对象包含个别对象、函数对象和谬误对象。例如 Object、Function、Boolean、Symbol、Error 等

（4）数字和日期对象，用来示意数字、日期和执行数学计算的对象。例如 Number、Math、Date

（5）字符串，用来示意和操作字符串的对象。例如 String、RegExp

（6）可索引的汇合对象，这些对象示意依照索引值来排序的数据汇合，包含数组和类型数组，以及类数组构造的对象。例如 Array

（7）应用键的汇合对象，这些汇合对象在存储数据时会应用到键，反对依照插入程序来迭代元素。
例如 Map、Set、WeakMap、WeakSet

（8）矢量汇合，SIMD 矢量汇合中的数据会被组织为一个数据序列。
例如 SIMD 等

（9）结构化数据，这些对象用来示意和操作结构化的缓冲区数据，或应用 JSON 编码的数据。例如 JSON 等

（10）管制形象对象
例如 Promise、Generator 等

（11）反射。例如 Reflect、Proxy

（12）国际化，为了反对多语言解决而退出 ECMAScript 的对象。例如 Intl、Intl.Collator 等

（13）WebAssembly

（14）其余。例如 arguments

总结： js 中的内置对象次要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其余对象的构造函数对象。个别常常用到的如全局变量值 NaN、undefined，全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等，还有提供数学计算的单体内置对象如 Math 对象。

—- 问题知识点分割线 —-

什么是 margin 重叠问题？如何解决？

问题形容： 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。须要留神的是，浮动的元素和相对定位 这种脱离文档流的元素的外边距不会折叠。重叠只会呈现在 垂直方向。

计算准则： 折叠合并后外边距的计算准则如下：

• 如果两者都是负数，那么就去最大者
• 如果是一正一负，就会正值减去负值的绝对值
• 两个都是负值时，用 0 减去两个中绝对值大的那个

解决办法： 对于折叠的状况，次要有两种：兄弟之间重叠 和父子之间重叠（1）兄弟之间重叠

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的 position 的值为absolute/fixed

（2）父子之间重叠

• 父元素退出：overflow: hidden
• 父元素增加通明边框：border:1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素退出浮动属性或定位

—- 问题知识点分割线 —-

如何进攻 XSS 攻打？

能够看到 XSS 危害如此之大，那么在开发网站时就要做好进攻措施，具体措施如下：

• 能够从浏览器的执行来进行预防，一种是应用纯前端的形式，不必服务器端拼接后返回（不应用服务端渲染）。另一种是对须要插入到 HTML 中的代码做好充沛的本义。对于 DOM 型的攻打，次要是前端脚本的不牢靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能呈现的恶意代码状况进行判断。
• 应用 CSP，CSP 的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行，从而避免恶意代码的注入攻打。

1. CSP 指的是内容安全策略，它的实质是建设一个白名单，通知浏览器哪些内部资源能够加载和执行。咱们只须要配置规定，如何拦挡由浏览器本人来实现。
2. 通常有两种形式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的形式

• 对一些敏感信息进行爱护，比方 cookie 应用 http-only，使得脚本无奈获取。也能够应用验证码，防止脚本伪装成用户执行一些操作。

—- 问题知识点分割线 —-

数组扁平化

数组扁平化就是将 [1, [2, [3]]] 这种多层的数组拍平成一层 [1, 2, 3]。应用 Array.prototype.flat 能够间接将多层数组拍平成一层：

[1, [2, [3]]].flat(2)  // [1, 2, 3]

当初就是要实现 flat 这种成果。

ES5 实现：递归。

function flatten(arr) {var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {if (Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]))
        } else {result.push(arr[i])
        }
    }
    return result;
}

ES6 实现：

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

—- 问题知识点分割线 —-

Sass、Less 是什么？为什么要应用他们？

他们都是 CSS 预处理器，是 CSS 上的一种形象层。他们是一种非凡的语法 / 语言编译成 CSS。例如 Less 是一种动静款式语言，将 CSS 赋予了动静语言的个性，如变量，继承，运算，函数，LESS 既能够在客户端上运行 (反对 IE 6+, Webkit, Firefox)，也能够在服务端运行 (借助 Node.js)。

为什么要应用它们？

• 构造清晰，便于扩大。能够不便地屏蔽浏览器公有语法差别。封装对浏览器语法差别的反复解决，缩小无意义的机械劳动。
• 能够轻松实现多重继承。齐全兼容 CSS 代码，能够不便地利用到老我的项目中。LESS 只是在 CSS 语法上做了扩大，所以老的 CSS 代码也能够与 LESS 代码一起编译。

—- 问题知识点分割线 —-

connect 组件原理剖析

1. connect 用法

作用：连贯 React 组件与 Redux store

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
// 这个函数容许咱们将 store 中的数据作为 props 绑定到组件上
const mapStateToProps = (state) => {
  return {count: state.count}
}

• 这个函数的第一个参数就是 Redux 的 store，咱们从中摘取了 count 属性。你不用将 state 中的数据一成不变地传入组件，能够依据 state 中的数据，动静地输入组件须要的（最小）属性
• 函数的第二个参数 ownProps，是组件本人的 props

当 state 变动，或者 ownProps 变动的时候，mapStateToProps 都会被调用，计算出一个新的 stateProps，（在与 ownProps merge 后）更新给组件

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二个参数是 mapDispatchToProps，它的性能是，将 action 作为 props绑定到组件上，也会成为 MyComp 的 `props

2. 原理解析

首先 connect 之所以会胜利，是因为 Provider 组件

• 在原利用组件上包裹一层，使原来整个利用成为 Provider 的子组件
• 接管 Redux 的store作为 props，通过context 对象传递给子孙组件上的connect

connect 做了些什么

它真正连贯 Redux 和 React，它包在咱们的容器组件的外一层，它接管下面 Provider提供的 store 外面的 state和 dispatch，传给一个构造函数，返回一个对象，以属性模式传给咱们的容器组件

3. 源码

connect是一个高阶函数，首先传入 mapStateToProps、mapDispatchToProps，而后返回一个生产Component 的函数 (wrapWithConnect)，而后再将真正的Component 作为参数传入 wrapWithConnect，这样就生产出一个通过包裹的Connect 组件，该组件具备如下特点

• 通过 props.store 获取先人 Component 的store props包含 stateProps、dispatchProps、parentProps, 合并在一起失去nextState，作为props 传给真正的Component
• componentDidMount时，增加事件this.store.subscribe(this.handleChange)，实现页面交互
• shouldComponentUpdate时判断是否有防止进行渲染，晋升页面性能，并失去nextState
• componentWillUnmount时移除注册的事件this.handleChange

// 次要逻辑

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {return function wrapWithConnect(WrappedComponent) {
    class Connect extends Component {constructor(props, context) {
        // 从先人 Component 处取得 store
        this.store = props.store || context.store
        this.stateProps = computeStateProps(this.store, props)
        this.dispatchProps = computeDispatchProps(this.store, props)
        this.state = {storeState: null}
        // 对 stateProps、dispatchProps、parentProps 进行合并
        this.updateState()}
      shouldComponentUpdate(nextProps, nextState) {
        // 进行判断，当数据产生扭转时，Component 从新渲染
        if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {this.updateState(nextProps)
            return true
          }
        }
        componentDidMount() {
          // 扭转 Component 的 state
          this.store.subscribe(() = {
            this.setState({storeState: this.store.getState()
            })
          })
        }
        render() {
          // 生成包裹组件 Connect
          return (<WrappedComponent {...this.nextState} />
          )
        }
      }
      Connect.contextTypes = {store: storeShape}
      return Connect;
    }
}

—- 问题知识点分割线 —-

说一下 for…in 和 for…of 的区别?

for...of 遍历获取的是对象的键值, for...in 获取的是对象的键名;
for...in 会遍历对象的整个原型链, 性能十分差不举荐应用, 而 for...of 只遍历以后对象不会遍历原型链;
对于数组的遍历,for...in 会返回数组中所有可枚举的属性(包含原型链上可枚举的属性),for...of 只返回数组的下标对应的属性值;
总结：for...in 循环次要是为了遍历对象而生, 不实用遍历数组; for....of 循环能够用来遍历数组、类数组对象、字符串、Set、Map 以及 Generator 对象

—- 问题知识点分割线 —-

Promise.race

形容 ：只有promises 中有一个率先扭转状态，就返回这个率先扭转的 Promise 实例的返回值。

实现：

Promise.race = function(promises){return new Promise((resolve, reject) => {if(Array.isArray(promises)) {if(promises.length === 0) return resolve(promises);
            promises.forEach((item) => {Promise.resolve(item).then(value => resolve(value), 
                    reason => reject(reason)
                );
            })
        }
        else return reject(new TypeError("Argument is not iterable"));
    });
}

—- 问题知识点分割线 —-

介绍一下 Connection:keep-alive

什么是 keep-alive

咱们晓得 HTTP 协定采纳“申请 - 应答”模式，当应用一般模式，即非 KeepAlive 模式时，每个申请 / 应答客户和服务器都要新建一个连贯，实现 之后立刻断开连接（HTTP 协定为无连贯的协定）；

当应用 Keep-Alive 模式（又称长久连贯、连贯重用）时，Keep-Alive 性能使客户端到服 务器端的连贯继续无效，当呈现对服务器的后继申请时，Keep-Alive 性能防止了建设或者从新建设连贯。

为什么要应用 keep-alive

keep-alive 技术的创立目标，能在屡次 HTTP 之前重用同一个 TCP 连贯，从而缩小创立 / 敞开多个 TCP 连贯的开销（包含响应工夫、CPU 资源、缩小拥挤等），参考如下示意图

客户端如何开启

在 HTTP/1.0 协定中，默认是敞开的，须要在 http 头退出 ”Connection: Keep-Alive”，能力启用 Keep-Alive；

Connection: keep-alive

http 1.1 中默认启用 Keep-Alive，如果退出 ”Connection: close“，才敞开。

Connection: close

目前大部分浏览器都是用 http1.1 协定，也就是说默认都会发动 Keep-Alive 的连贯申请了，所以是否能实现一个残缺的 Keep- Alive 连贯就看服务器设置状况。

—- 问题知识点分割线 —-

宏工作和微工作别离有哪些

• 微工作包含：promise 的回调、node 中的 process.nextTick、对 Dom 变动监听的 MutationObserver。
• 宏工作包含：script 脚本的执行、setTimeout，setInterval，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。