关于javascript:前端关于面试你可能需要收集的面试题

1、父传子
2、子传父
3、eventbus
4、ref/$refs
5、$parent/$children
6、$attrs/$listeners
7、依赖注入(provide/inject)

this 是执行上下文中的一个属性，它指向最初一次调用这个办法的对象。在理论开发中，this 的指向能够通过四种调用模式来判断。

第一种是 函数调用模式，当一个函数不是一个对象的属性时，间接作为函数来调用时，this 指向全局对象。
第二种是 办法调用模式，如果一个函数作为一个对象的办法来调用时，this 指向这个对象。
第三种是 结构器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
第四种是 apply、call 和 bind 调用模式，这三个办法都能够显示的指定调用函数的 this 指向。其中 apply 办法接管两个参数：一个是 this 绑定的对象，一个是参数数组。call 办法接管的参数，第一个是 this 绑定的对象，前面的其余参数是传入函数执行的参数。也就是说，在应用 call() 办法时，传递给函数的参数必须一一列举进去。bind 办法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了应用 new 时会被扭转，其余状况下都不会扭转。

这四种形式，应用结构器调用模式的优先级最高，而后是 apply、call 和 bind 调用模式，而后是办法调用模式，而后是函数调用模式。

HTTP/ 3 基于 UDP 协定实现了相似于 TCP 的多路复用数据流、传输可靠性等性能，这套性能被称为 QUIC 协定。

流量管制、传输可靠性性能：QUIC 在 UDP 的根底上减少了一层来保障数据传输可靠性，它提供了数据包重传、拥塞管制、以及其余一些 TCP 中的个性。
集成 TLS 加密性能：目前 QUIC 应用 TLS1.3，缩小了握手所破费的 RTT 数。
多路复用：同一物理连贯上能够有多个独立的逻辑数据流，实现了数据流的独自传输，解决了 TCP 的队头阻塞问题。
疾速握手：因为基于 UDP，能够实现应用 0 ~ 1 个 RTT 来建设连贯。

通过 Object.prototype.toString.call()做判断

Object.prototype.toString.call(obj).slice(8,-1) === 'Array';

通过原型链做判断

obj.__proto__ === Array.prototype;

通过 ES6 的 Array.isArray()做判断

Array.isArrray(obj);

通过 instanceof 做判断

obj instanceof Array

通过 Array.prototype.isPrototypeOf

Array.prototype.isPrototypeOf(obj)

对于 Vue 组件来说，模板编译只会在组件实例化的时候编译一次，生成渲染函数之后在也不会进行编译。因而，编译对组件的 runtime 是一种性能损耗。

而模板编译的目标仅仅是将 template 转化为 render function，这个过程，正好能够在我的项目构建的过程中实现，这样能够让理论组件在 runtime 时间接跳过模板渲染，进而晋升性能，这个在我的项目构建的编译 template 的过程，就是预编译。

闭包其实就是一个能够拜访其余函数外部变量的函数。创立闭包的最常见的形式就是在一个函数内创立另一个函数，创立的函数能够拜访到以后函数的局部变量。

因为通常状况下，函数外部变量是无奈在内部拜访的（即全局变量和局部变量的区别），因而应用闭包的作用，就具备实现了能在内部拜访某个函数外部变量的性能，让这些外部变量的值始终能够保留在内存中。上面咱们通过代码先来看一个简略的例子

function fun1() {
    var a = 1;
    return function(){console.log(a);
    };
}
fun1();
var result = fun1();
result();  // 1

// 联合闭包的概念，咱们把这段代码放到控制台执行一下，就能够发现最初输入的后果是 1（即 a 变量的值）。那么能够很分明地发现，a 变量作为一个 fun1 函数的外部变量，失常状况下作为函数内的局部变量，是无奈被内部拜访到的。然而通过闭包，咱们最初还是能够拿到 a 变量的值

闭包有两个罕用的用处

闭包的第一个用处是使咱们在函数内部可能拜访到函数外部的变量。通过应用闭包，咱们能够通过在内部调用闭包函数，从而在内部拜访到函数外部的变量，能够应用这种办法来创立公有变量。
函数的另一个用处是使曾经运行完结的函数上下文中的变量对象持续留在内存中，因为闭包函数保留了这个变量对象的援用，所以这个变量对象不会被回收。

其实闭包的实质就是作用域链的一个非凡的利用，只有理解了作用域链的创立过程，就可能了解闭包的实现原理。

let a = 1
// fn 是闭包
function fn() {console.log(a);
}

function fn1() {
  let a = 1
  // 这里也是闭包
  return () => {console.log(a);
  }
}
const fn2 = fn1()
fn2()

大家都晓得闭包其中一个作用是拜访公有变量，就比方上述代码中的 fn2 拜访到了 fn1 函数中的变量 a。然而此时 fn1 早已销毁，咱们是如何拜访到变量 a 的呢？不是都说原始类型是寄存在栈上的么，为什么此时却没有被销毁掉？
接下来笔者会依据浏览器的体现来从新了解对于原始类型寄存地位的说法。
先来说下数据寄存的正确规定是：部分、占用空间确定的数据，个别会寄存在栈中，否则就在堆中（也有例外）。那么接下来咱们能够通过 Chrome 来帮忙咱们验证这个说法说法。

上图中画红框的地位咱们能看到一个外部的对象 [[Scopes]]，其中寄存着变量 a，该对象是被寄存在堆上的，其中蕴含了闭包、全局对象等等内容，因而咱们能通过闭包拜访到本该销毁的变量。

另外最开始咱们对于闭包的定位是：如果一个函数能拜访内部的变量，那么这个函数它就是一个闭包，因而接下来咱们看看在全局下的体现是怎么样的。

let a = 1
var b = 2
// fn 是闭包
function fn() {console.log(a, b);
}

从上图咱们能发现全局下申明的变量，如果是 var 的话就间接被挂到 globe 上，如果是其余关键字申明的话就被挂到 Script 上。尽管这些内容同样还是存在 [[Scopes]]，然而全局变量应该是寄存在动态区域的，因为全局变量无需进行垃圾回收，等须要回收的时候整个利用都没了。

只有在下图的场景中，原始类型才可能是被存储在栈上。

这里为什么要说可能，是因为 JS 是门动静类型语言，一个变量申明时能够是原始类型，马上又能够赋值为对象类型，而后又回到原始类型。这样频繁的在堆栈上切换存储地位，外部引擎是不是也会有什么优化伎俩，或者罗唆全副都丢堆上？只有 const 申明的原始类型才肯定存在栈上？当然这只是笔者的一个揣测，临时没有深究，读者能够疏忽这段瞎想

因而笔者对于原始类型存储地位的了解为：局部变量才是被存储在栈上，全局变量存在动态区域上，其它都存储在堆上。

当然这个了解是建设的 Chrome 的体现之上的，在不同的浏览器上因为引擎的不同，可能存储的形式还是有所变动的。

闭包产生的起因

咱们在后面介绍了作用域的概念，那么你还须要明确作用域链的基本概念。其实很简略，当拜访一个变量时，代码解释器会首先在以后的作用域查找，如果没找到，就去父级作用域去查找，直到找到该变量或者不存在父级作用域中，这样的链路就是作用域链

须要留神的是，每一个子函数都会拷贝下级的作用域，造成一个作用域的链条。那么咱们还是通过上面的代码来具体阐明一下作用域链

var a = 1;
function fun1() {
  var a = 2
  function fun2() {
    var a = 3;
    console.log(a);//3
  }
}

从中能够看出，fun1 函数的作用域指向全局作用域（window）和它本人自身；fun2 函数的作用域指向全局作用域（window）、fun1 和它自身；而作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局还没有的话就会报错。
那么这就很形象地阐明了什么是作用域链，即以后函数个别都会存在下层函数的作用域的援用，那么他们就造成了一条作用域链。
由此可见，闭包产生的实质就是：以后环境中存在指向父级作用域的援用。那么还是拿上的代码举例。

function fun1() {
  var a = 2
  function fun2() {console.log(a);  //2
  }
  return fun2;
}
var result = fun1();
result();

从下面这段代码能够看出，这里 result 会拿到父级作用域中的变量，输入 2。因为在以后环境中，含有对 fun2 函数的援用，fun2 函数恰好援用了 window、fun1 和 fun2 的作用域。因而 fun2 函数是能够拜访到 fun1 函数的作用域的变量。
那是不是只有返回函数才算是产生了闭包呢？其实也不是，回到闭包的实质，咱们只须要让父级作用域的援用存在即可，因而还能够这么改代码，如下所示

var fun3;
function fun1() {
  var a = 2
  fun3 = function() {console.log(a);
  }
}
fun1();
fun3();

能够看出，其中实现的后果和前一段代码的成果其实是一样的，就是在给 fun3 函数赋值后，fun3 函数就领有了 window、fun1 和 fun3 自身这几个作用域的拜访权限；而后还是从下往上查找，直到找到 fun1 的作用域中存在 a 这个变量；因而输入的后果还是 2，最初产生了闭包，模式变了，实质没有扭转。

因而最初 返回的不论是不是函数，也都不能阐明没有产生闭包

闭包的表现形式

返回一个函数
在定时器、事件监听、Ajax 申请、Web Workers 或者任何异步中，只有应用了回调函数，实际上就是在应用闭包。请看上面这段代码，这些都是平时开发中用到的模式

// 定时器
setTimeout(function handler(){console.log('1');
}，1000);
// 事件监听
$('#app').click(function(){console.log('Event Listener');
});

作为函数参数传递的模式，比方上面的例子。

var a = 1;
function foo(){
  var a = 2;
  function baz(){console.log(a);
  }
  bar(baz);
}
function bar(fn){
  // 这就是闭包
  fn();}
foo();  // 输入 2，而不是 1

IIFE（立刻执行函数），创立了闭包，保留了全局作用域（window）和以后函数的作用域，因而能够输入全局的变量，如下所示

var a = 2;
(function IIFE(){console.log(a);  // 输入 2
})();

IIFE 这个函数会略微有些非凡，算是一种自执行匿名函数，这个匿名函数领有独立的作用域。这不仅能够防止了外界拜访此 IIFE 中的变量，而且又不会净化全局作用域，咱们常常能在高级的 JavaScript 编程中看见此类函数。

如何解决循环输入问题？

在互联网大厂的面试中，解决循环输入问题是比拟高频的面试题，个别都会给一段这样的代码让你来解释

for(var i = 1; i <= 5; i ++){setTimeout(function() {console.log(i)
  }, 0)
}

下面这段代码执行之后，从控制台执行的后果能够看进去，后果输入的是 5 个 6，那么个别面试官都会先问为什么都是 6？我想让你实现输入 1、2、3、4、5 的话怎么办呢？

因而联合本讲所学的常识咱们来思考一下，应该怎么给面试官一个称心的解释。你能够围绕这两点来答复。

setTimeout 为宏工作，因为 JS 中单线程 eventLoop 机制 ，在主线程同步工作执行完后才去执行宏工作，因而 循环完结后 setTimeout 中的回调才顺次执行
因为 setTimeout 函数也是一种闭包，往上找它的 父级作用域链就是 window，变量 i 为 window 上的全局变量，开始执行 setTimeout 之前变量 i 曾经就是 6 了，因而最初输入的间断就都是 6。

那么咱们再来看看如何按程序顺次输入 1、2、3、4、5 呢？

利用 IIFE

能够利用 IIFE（立刻执行函数），当每次 for 循环时，把此时的变量 i 传递到定时器中，而后执行，革新之后的代码如下。

for(var i = 1;i <= 5;i++){(function(j){setTimeout(function timer(){console.log(j)
    }, 0)
  })(i)
}

应用 ES6 中的 let

ES6 中新增的 let 定义变量的形式，使得 ES6 之后 JS 产生革命性的变动，让 JS 有了块级作用域，代码的作用域以块级为单位进行执行。通过革新后的代码，能够实现下面想要的后果。

for(let i = 1; i <= 5; i++){setTimeout(function() {console.log(i);
  },0)
}

定时器传入第三个参数

setTimeout 作为常常应用的定时器，它是存在第三个参数的，日常工作中咱们常常应用的个别是前两个，一个是回调函数，另外一个是工夫，而第三个参数用得比拟少。那么联合第三个参数，调整完之后的代码如下。

for(var i=1;i<=5;i++){setTimeout(function(j) {console.log(j)
  }, 0, i)
}

从中能够看到，第三个参数的传递，能够扭转 setTimeout 的执行逻辑，从而实现咱们想要的后果，这也是一种解决循环输入问题的路径

常见考点

闭包能考的很多，概念和口试题都会考。
概念题就是考考闭包是什么了。
口试题的话根本都会联合上异步，比方最常见的：

for (var i = 0; i < 6; i++) {setTimeout(() => {console.log(i)
  })
}

这道题会问输入什么，有哪几种形式能够失去想要的答案？

当初的办法也不肯定是平安的，因为没有方法确定失去的公钥就肯定是平安的公钥。可能存在一个中间人，截取了对方发给咱们的公钥，而后将他本人的公钥发送给咱们，当咱们应用他的公钥加密后发送的信息，就能够被他用本人的私钥解密。而后他伪装成咱们以同样的办法向对方发送信息，这样咱们的信息就被窃取了，然而本人还不晓得。为了解决这样的问题，能够应用数字证书。

首先应用一种 Hash 算法来对公钥和其余信息进行加密，生成一个信息摘要，而后让有公信力的认证核心（简称 CA）用它的私钥对音讯摘要加密，造成签名。最初将原始的信息和签名合在一起，称为数字证书。当接管方收到数字证书的时候，先依据原始信息应用同样的 Hash 算法生成一个摘要，而后应用公证处的公钥来对数字证书中的摘要进行解密，最初将解密的摘要和生成的摘要进行比照，就能发现失去的信息是否被更改了。

这个办法最要的是认证核心的可靠性，个别浏览器里会内置一些顶层的认证核心的证书，相当于咱们主动信赖了他们，只有这样能力保证数据的平安。

DNS 占用 53 号端口，同时应用 TCP 和 UDP 协定。（1）在区域传输的时候应用 TCP 协定

辅域名服务器会定时（个别 3 小时）向主域名服务器进行查问以便理解数据是否有变动。如有变动，会执行一次区域传送，进行数据同步。区域传送应用 TCP 而不是 UDP，因为数据同步传送的数据量比一个申请应答的数据量要多得多。
TCP 是一种牢靠连贯，保障了数据的准确性。

（2）在域名解析的时候应用 UDP 协定

客户端向 DNS 服务器查问域名，个别返回的内容都不超过 512 字节，用 UDP 传输即可。不必通过三次握手，这样 DNS 服务器负载更低，响应更快。实践上说，客户端也能够指定向 DNS 服务器查问时用 TCP，但事实上，很多 DNS 服务器进行配置的时候，仅反对 UDP 查问包。

短轮询和长轮询的目标都是用于实现客户端和服务器端的一个即时通讯。

短轮询的基本思路： 浏览器每隔一段时间向浏览器发送 http 申请，服务器端在收到申请后，不管是否有数据更新，都间接进行响应。这种形式实现的即时通信，实质上还是浏览器发送申请，服务器承受申请的一个过程，通过让客户端一直的进行申请，使得客户端可能模仿实时地收到服务器端的数据的变动。这种形式的长处是比较简单，易于了解。毛病是这种形式因为须要一直的建设 http 连贯，重大节约了服务器端和客户端的资源。当用户减少时，服务器端的压力就会变大，这是很不合理的。

长轮询的基本思路： 首先由客户端向服务器发动申请，当服务器收到客户端发来的申请后，服务器端不会间接进行响应，而是先将这个申请挂起，而后判断服务器端数据是否有更新。如果有更新，则进行响应，如果始终没有数据，则达到肯定的工夫限度才返回。客户端 JavaScript 响应处理函数会在解决完服务器返回的信息后，再次发出请求，从新建设连贯。长轮询和短轮询比起来，它的长处是显著缩小了很多不必要的 http 申请次数，相比之下节约了资源。长轮询的毛病在于，连贯挂起也会导致资源的节约。

SSE 的根本思维： 服务器应用流信息向服务器推送信息。严格地说，http 协定无奈做到服务器被动推送信息。然而，有一种变通方法，就是服务器向客户端申明，接下来要发送的是流信息。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过去。这时，客户端不会敞开连贯，会始终等着服务器发过来的新的数据流，视频播放就是这样的例子。SSE 就是利用这种机制，应用流信息向浏览器推送信息。它基于 http 协定，目前除了 IE/Edge，其余浏览器都反对。它绝对于后面两种形式来说，不须要建设过多的 http 申请，相比之下节约了资源。

WebSocket 是 HTML5 定义的一个新协定议，与传统的 http 协定不同，该协定容许由服务器被动的向客户端推送信息。应用 WebSocket 协定的毛病是在服务器端的配置比较复杂。WebSocket 是一个全双工的协定，也就是通信单方是平等的，能够互相发送音讯，而 SSE 的形式是单向通信的，只能由服务器端向客户端推送信息，如果客户端须要发送信息就是属于下一个 http 申请了。

下面的四个通信协议，前三个都是基于 HTTP 协定的。

对于这四种即便通信协议，从性能的角度来看：WebSocket > 长连贯（SEE）> 长轮询 > 短轮询 然而，咱们如果思考浏览器的兼容性问题，程序就恰恰相反了： 短轮询 > 长轮询 > 长连贯（SEE）> WebSocket 所以，还是要依据具体的应用场景来判断应用哪种形式。

参考：前端进阶面试题具体解答

__proto__和 prototype 关系 ：__proto__ 和constructor是对象独有的。2️⃣prototype属性是函数独有的

在 js 中咱们是应用构造函数来新建一个对象的，每一个构造函数的外部都有一个 prototype 属性值，这个属性值是一个对象，这个对象蕴含了能够由该构造函数的所有实例共享的属性和办法。当咱们应用构造函数新建一个对象后，在这个对象的外部将蕴含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说咱们是不应该可能获取到这个值的，然而当初浏览器中都实现了 proto 属性来让咱们拜访这个属性，然而咱们最好不要应用这个属性，因为它不是标准中规定的。ES5 中新增了一个 Object.getPrototypeOf() 办法，咱们能够通过这个办法来获取对象的原型。

当咱们拜访一个对象的属性时，如果这个对象外部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有本人的原型，于是就这样始终找上来，也就是原型链的概念。原型链的止境一般来说都是 Object.prototype 所以这就是咱们新建的对象为什么可能应用 toString() 等办法的起因。

特点：JavaScript 对象是通过援用来传递的，咱们创立的每个新对象实体中并没有一份属于本人的原型正本。当咱们批改原型时，与之相干的对象也会继承这一扭转

原型 (prototype): 一个简略的对象，用于实现对象的属性继承。能够简略的了解成对象的爹。在 Firefox 和 Chrome 中，每个JavaScript 对象中都蕴含一个 __proto__(非标准) 的属性指向它爹 (该对象的原型)，可obj.__proto__ 进行拜访。
构造函数: 能够通过 new 来新建一个对象的函数。
实例: 通过构造函数和 new 创立进去的对象，便是实例。实例通过 __proto__ 指向原型，通过 constructor 指向构造函数。

以 Object 为例，咱们罕用的 Object 便是一个构造函数，因而咱们能够通过它构建实例。

// 实例
const instance = new Object()

则此时，实例为 instance, 构造函数为Object，咱们晓得，构造函数领有一个prototype 的属性指向原型，因而原型为:

// 原型
const prototype = Object.prototype

这里咱们能够来看出三者的关系:

实例.__proto__ === 原型
原型.constructor === 构造函数
构造函数.prototype === 原型

// 这条线其实是是基于原型进行获取的，能够了解成一条基于原型的映射线
// 例如: 
// const o = new Object()
// o.constructor === Object   --> true
// o.__proto__ = null;
// o.constructor === Object   --> false
实例.constructor === 构造函数

原型链

原型链是由原型对象组成，每个对象都有 __proto__ 属性，指向了创立该对象的构造函数的原型，__proto__ 将对象连接起来组成了原型链。是一个用来实现继承和共享属性的无限的对象链

属性查找机制: 当查找对象的属性时，如果实例对象本身不存在该属性，则沿着原型链往上一级查找，找到时则输入，不存在时，则持续沿着原型链往上一级查找，直至最顶级的原型对象Object.prototype，如还是没找到，则输入undefined；
属性批改机制: 只会批改实例对象自身的属性，如果不存在，则进行增加该属性，如果须要批改原型的属性时，则能够用: b.prototype.x = 2；然而这样会造成所有继承于该对象的实例的属性产生扭转。

js 获取原型的办法

p.proto
p.constructor.prototype
Object.getPrototypeOf(p)

总结

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。
每个对象都有 __proto__ 属性，指向了创立该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，然而 [[prototype]]是外部属性，咱们并不能拜访到，所以应用 _proto_来拜访。
对象能够通过 __proto__ 来寻找不属于该对象的属性，__proto__ 将对象连接起来组成了原型链。

float，float + calc, 圣杯布局（设置 BFC，margin 负值法），flex

.wrap {
  width: 100%;
  height: 200px;
}
.wrap > div {height: 100%;}
/* 计划 1 */
.left {
  width: 120px;
  float: left;
}
.right {
  float: right;
  width: 120px;
}
.center {margin: 0 120px;}
/* 计划 2 */
.left {
  width: 120px;
  float: left;
}
.right {
  float: right;
  width: 120px;
}
.center {width: calc(100% - 240px);
  margin-left: 120px;
}
/* 计划 3 */
.wrap {display: flex;}
.left {width: 120px;}
.right {width: 120px;}
.center {flex: 1;}

proxy 在指标对象的外层搭建了一层拦挡，外界对指标对象的某些操作，必须通过这层拦挡

var proxy = new Proxy(target, handler);

new Proxy()示意生成一个 Proxy 实例，target参数示意所要拦挡的指标对象，handler参数也是一个对象，用来定制拦挡行为

var target = {name: 'poetries'};
 var logHandler = {get: function(target, key) {console.log(`${key} 被读取 `);
     return target[key];
   },
   set: function(target, key, value) {console.log(`${key} 被设置为 ${value}`);
     target[key] = value;
   }
 }
 var targetWithLog = new Proxy(target, logHandler);

 targetWithLog.name; // 控制台输入：name 被读取
 targetWithLog.name = 'others'; // 控制台输入：name 被设置为 others

 console.log(target.name); // 控制台输入: others

targetWithLog 读取属性的值时，实际上执行的是 logHandler.get：在控制台输入信息，并且读取被代理对象 target 的属性。
在 targetWithLog 设置属性值时，实际上执行的是 logHandler.set：在控制台输入信息，并且设置被代理对象 target 的属性的值

// 因为拦挡函数总是返回 35，所以拜访任何属性都失去 35
var proxy = new Proxy({}, {get: function(target, property) {return 35;}
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

Proxy 实例也能够作为其余对象的原型对象

var proxy = new Proxy({}, {get: function(target, property) {return 35;}
});

let obj = Object.create(proxy);
obj.time // 35

proxy对象是 obj 对象的原型，obj对象自身并没有 time 属性，所以依据原型链，会在 proxy 对象上读取该属性，导致被拦挡

Proxy 的作用

对于代理模式 Proxy 的作用次要体现在三个方面

拦挡和监督内部对对象的拜访
升高函数或类的复杂度
在简单操作前对操作进行校验或对所需资源进行治理

Proxy 所能代理的范畴 –handler

实际上 handler 自身就是 ES6 所新设计的一个对象. 它的作用就是用来自定义代理对象的各种可代理操作。它自身一共有 13 中办法, 每种办法都能够代理一种操作. 其 13 种办法如下

// 在读取代理对象的原型时触发该操作，比方在执行 Object.getPrototypeOf(proxy) 时。handler.getPrototypeOf()

// 在设置代理对象的原型时触发该操作，比方在执行 Object.setPrototypeOf(proxy, null) 时。handler.setPrototypeOf()


// 在判断一个代理对象是否是可扩大时触发该操作，比方在执行 Object.isExtensible(proxy) 时。handler.isExtensible()


// 在让一个代理对象不可扩大时触发该操作，比方在执行 Object.preventExtensions(proxy) 时。handler.preventExtensions()

// 在获取代理对象某个属性的属性形容时触发该操作，比方在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。handler.getOwnPropertyDescriptor()


// 在定义代理对象某个属性时的属性形容时触发该操作，比方在执行 Object.defineProperty(proxy, "foo", {}) 时。andler.defineProperty()


// 在判断代理对象是否领有某个属性时触发该操作，比方在执行 "foo" in proxy 时。handler.has()

// 在读取代理对象的某个属性时触发该操作，比方在执行 proxy.foo 时。handler.get()


// 在给代理对象的某个属性赋值时触发该操作，比方在执行 proxy.foo = 1 时。handler.set()

// 在删除代理对象的某个属性时触发该操作，比方在执行 delete proxy.foo 时。handler.deleteProperty()

// 在获取代理对象的所有属性键时触发该操作，比方在执行 Object.getOwnPropertyNames(proxy) 时。handler.ownKeys()

// 在调用一个指标对象为函数的代理对象时触发该操作，比方在执行 proxy() 时。handler.apply()


// 在给一个指标对象为构造函数的代理对象结构实例时触发该操作，比方在执行 new proxy() 时。handler.construct()

为何 Proxy 不能被 Polyfill

如 class 能够用 function 模仿；promise能够用 callback 模仿
然而 proxy 不能用 Object.defineProperty 模仿

目前谷歌的 polyfill 只能实现局部的性能，如 get、set https://github.com/GoogleChro…

// commonJS require
const proxyPolyfill = require('proxy-polyfill/src/proxy')();

// Your environment may also support transparent rewriting of commonJS to ES6:
import ProxyPolyfillBuilder from 'proxy-polyfill/src/proxy';
const proxyPolyfill = ProxyPolyfillBuilder();

// Then use...
const myProxy = new proxyPolyfill(...);

TCP 和 UDP 都是传输层协定，他们都属于 TCP/IP 协定族：

（1）UDP

UDP 的全称是 用户数据报协定，在网络中它与 TCP 协定一样用于解决数据包，是一种无连贯的协定。在 OSI 模型中，在传输层，处于 IP 协定的上一层。UDP 有不提供数据包分组、组装和不能对数据包进行排序的毛病，也就是说，当报文发送之后，是无奈得悉其是否平安残缺达到的。

它的特点如下：

1）面向无连贯

首先 UDP 是不须要和 TCP 一样在发送数据前进行三次握手建设连贯的，想发数据就能够开始发送了。并且也只是数据报文的搬运工，不会对数据报文进行任何拆分和拼接操作。

具体来说就是：

在发送端，应用层将数据传递给传输层的 UDP 协定，UDP 只会给数据减少一个 UDP 头标识下是 UDP 协定，而后就传递给网络层了
在接收端，网络层将数据传递给传输层，UDP 只去除 IP 报文头就传递给应用层，不会任何拼接操作

2）有单播，多播，播送的性能

UDP 不止反对一对一的传输方式，同样反对一对多，多对多，多对一的形式，也就是说 UDP 提供了单播，多播，播送的性能。

3）面向报文

发送方的 UDP 对应用程序交下来的报文，在增加首部后就向下交付 IP 层。UDP 对应用层交下来的报文，既不合并，也不拆分，而是保留这些报文的边界。因而，应用程序必须抉择适合大小的报文

4）不可靠性

首先不可靠性体现在无连贯上，通信都不须要建设连贯，想发就发，这样的状况必定不牢靠。

并且收到什么数据就传递什么数据，并且也不会备份数据，发送数据也不会关怀对方是否曾经正确接管到数据了。

再者网络环境时好时坏，然而 UDP 因为没有拥塞管制，始终会以恒定的速度发送数据。即便网络条件不好，也不会对发送速率进行调整。这样实现的弊病就是在网络条件不好的状况下可能会导致丢包，然而长处也很显著，在某些实时性要求高的场景（比方电话会议）就须要应用 UDP 而不是 TCP。

5）头部开销小，传输数据报文时是很高效的。

UDP 头部蕴含了以下几个数据：

两个十六位的端口号，别离为源端口（可选字段）和指标端口
整个数据报文的长度
整个数据报文的测验和（IPv4 可选字段），该字段用于发现头部信息和数据中的谬误

因而 UDP 的头部开销小，只有 8 字节，相比 TCP 的至多 20 字节要少得多，在传输数据报文时是很高效的。

（2）TCP TCP 的全称是传输控制协议是一种面向连贯的、牢靠的、基于字节流的传输层通信协议。TCP 是面向连贯的、牢靠的流协定（流就是指不间断的数据结构）。

它有以下几个特点：

1）面向连贯

面向连贯，是指发送数据之前必须在两端建设连贯。建设连贯的办法是“三次握手”，这样能建设牢靠的连贯。建设连贯，是为数据的牢靠传输打下了根底。

2）仅反对单播传输

每条 TCP 传输连贯只能有两个端点，只能进行点对点的数据传输，不反对多播和播送传输方式。

3）面向字节流

TCP 不像 UDP 一样那样一个个报文独立地传输，而是在不保留报文边界的状况下以字节流形式进行传输。

4）牢靠传输

对于牢靠传输，判断丢包、误码靠的是 TCP 的段编号以及确认号。TCP 为了保障报文传输的牢靠，就给每个包一个序号，同时序号也保障了传送到接收端实体的包的按序接管。而后接收端实体对已胜利收到的字节发回一个相应的确认 (ACK)；如果发送端实体在正当的往返时延(RTT) 内未收到确认，那么对应的数据（假如失落了）将会被重传。

5）提供拥塞管制

当网络呈现拥塞的时候，TCP 可能减小向网络注入数据的速率和数量，缓解拥塞。

6）提供全双工通信

TCP 容许通信单方的应用程序在任何时候都能发送数据，因为 TCP 连贯的两端都设有缓存，用来长期寄存双向通信的数据。当然，TCP 能够立刻发送一个数据段，也能够缓存一段时间以便一次发送更多的数据段（最大的数据段大小取决于 MSS）

ISO为了更好的使网络应用更为遍及，推出了 OSI 参考模型。

OSI参考模型中最靠近用户的一层，是为计算机用户提供利用接口，也为用户间接提供各种网络服务。咱们常见应用层的网络服务协定有：HTTP，HTTPS，FTP，POP3、SMTP等。

在客户端与服务器中常常会有数据的申请，这个时候就是会用到 http(hyper text transfer protocol)(超文本传输协定) 或者https. 在后端设计数据接口时，咱们经常应用到这个协定。
FTP是文件传输协定，在开发过程中，集体并没有波及到，然而我想，在一些资源网站，比方 百度网盘` 迅雷 ` 应该是基于此协定的。
SMTP是simple mail transfer protocol（简略邮件传输协定）。在一个我的项目中，在用户邮箱验证码登录的性能时，应用到了这个协定。

表示层提供各种用于应用层数据的编码和转换性能, 确保一个零碎的应用层发送的数据能被另一个零碎的应用层辨认。如果必要，该层可提供一种规范示意模式，用于将计算机外部的多种数据格式转换成通信中采纳的规范示意模式。数据压缩和加密也是表示层可提供的转换性能之一。

在我的项目开发中，为了不便数据传输，能够应用 base64 对数据进行编解码。如果按性能来划分，base64应该是工作在表示层。

会话层就是负责建设、治理和终止表示层实体之间的通信会话。该层的通信由不同设施中的应用程序之间的服务申请和响应组成。

传输层建设了主机端到端的链接，传输层的作用是为下层协定提供端到端的牢靠和通明的数据传输服务，包含解决差错控制和流量管制等问题。该层向高层屏蔽了上层数据通信的细节，使高层用户看到的只是在两个传输实体间的一条主机到主机的、可由用户管制和设定的、牢靠的数据通路。咱们通常说的，TCP UDP就是在这一层。端口号既是这里的“端”。

本层通过 IP 寻址来建设两个节点之间的连贯，为源端的运输层送来的分组，抉择适合的路由和替换节点，正确无误地依照地址传送给目标端的运输层。就是通常说的 IP 层。这一层就是咱们常常说的 IP 协定层。IP协定是 Internet 的根底。咱们能够这样了解，网络层规定了数据包的传输路线，而传输层则规定了数据包的传输方式。

将比特组合成字节, 再将字节组合成帧, 应用链路层地址 (以太网应用 MAC 地址)来拜访介质, 并进行过错检测。
网络层与数据链路层的比照，通过下面的形容，咱们或者能够这样了解，网络层是布局了数据包的传输路线，而数据链路层就是传输路线。不过，在数据链路层上还减少了差错控制的性能。

理论最终信号的传输是通过物理层实现的。通过物理介质传输比特流。规定了电平、速度和电缆针脚。罕用设施有（各种物理设施）集线器、中继器、调制解调器、网线、双绞线、同轴电缆。这些都是物理层的传输介质。

OSI 七层模型通信特点：对等通信 对等通信，为了使数据分组从源传送到目的地，源端 OSI 模型的每一层都必须与目标端的对等层进行通信，这种通信形式称为对等层通信。在每一层通信过程中，应用本层本人协定进行通信。

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则从新计时。这能够应用在一些点击申请的事件上，防止因为用户的屡次点击向后端发送屡次申请。
函数节流是指规定一个单位工夫，在这个单位工夫内，只能有一次触发事件的回调函数执行，如果在同一个单位工夫内某事件被触发屡次，只有一次能失效。节流能够应用在 scroll 函数的事件监听上，通过事件节流来升高事件调用的频率。

// 函数防抖的实现
function debounce(fn, wait) {
  var timer = null;

  return function() {
    var context = this,
      args = arguments;

    // 如果此时存在定时器的话，则勾销之前的定时器从新记时
    if (timer) {clearTimeout(timer);
      timer = null;
    }

    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {fn.apply(context, args);
    }, wait);
  };
}

// 函数节流的实现;
function throttle(fn, delay) {var preTime = Date.now();

  return function() {
    var context = this,
      args = arguments,
      nowTime = Date.now();

    // 如果两次工夫距离超过了指定工夫，则执行函数。if (nowTime - preTime >= delay) {preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

三次握手（Three-way Handshake）其实就是指建设一个 TCP 连贯时，须要客户端和服务器总共发送 3 个包。进行三次握手的次要作用就是为了确认单方的接管能力和发送能力是否失常、指定本人的初始化序列号为前面的可靠性传送做筹备。本质上其实就是连贯服务器指定端口，建设 TCP 连贯，并同步连贯单方的序列号和确认号，替换 TCP 窗口大小信息。

刚开始客户端处于 Closed 的状态，服务端处于 Listen 状态。

第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN，此时客户端处于 SYN_SEND 状态。

首部的同步位 SYN=1，初始序号 seq=x，SYN= 1 的报文段不能携带数据，但要消耗掉一个序号。

第二次握手：服务器收到客户端的 SYN 报文之后，会以本人的 SYN 报文作为应答，并且也是指定了本人的初始化序列号 ISN。同时会把客户端的 ISN + 1 作为 ACK 的值，示意本人曾经收到了客户端的 SYN，此时服务器处于 SYN_REVD 的状态。

在确认报文段中 SYN=1，ACK=1，确认号 ack=x+1，初始序号 seq=y

第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，示意曾经收到了服务端的 SYN 报文，此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，单方已建设起了连贯。

确认报文段 ACK=1，确认号 ack=y+1，序号 seq=x+1（初始为 seq=x，第二个报文段所以要 +1），ACK 报文段能够携带数据，不携带数据则不耗费序号。

那为什么要三次握手呢？两次不行吗？

为了确认单方的接管能力和发送能力都失常
如果是用两次握手，则会呈现上面这种状况：

如客户端收回连贯申请，但因连贯申请报文失落而未收到确认，于是客户端再重传一次连贯申请。起初收到了确认，建设了连贯。数据传输结束后，就开释了连贯，客户端共收回了两个连贯申请报文段，其中第一个失落，第二个达到了服务端，然而第一个失落的报文段只是在某些网络结点长时间滞留了，延误到连贯开释当前的某个工夫才达到服务端，此时服务端误认为客户端又收回一次新的连贯申请，于是就向客户端收回确认报文段，批准建设连贯，不采纳三次握手，只有服务端收回确认，就建设新的连贯了，此时客户端疏忽服务端发来的确认，也不发送数据，则服务端统一期待客户端发送数据，浪费资源。

简略来说就是以下三步：

第一次握手： 客户端向服务端发送连贯申请报文段。该报文段中蕴含本身的数据通讯初始序号。申请发送后，客户端便进入 SYN-SENT 状态。
第二次握手： 服务端收到连贯申请报文段后，如果批准连贯，则会发送一个应答，该应答中也会蕴含本身的数据通讯初始序号，发送实现后便进入 SYN-RECEIVED 状态。
第三次握手： 当客户端收到连贯批准的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连贯建设胜利。

TCP 三次握手的建设连贯的过程就是互相确认初始序号的过程，通知对方，什么样序号的报文段可能被正确接管。第三次握手的作用是客户端对服务器端的初始序号的确认。如果只应用两次握手，那么服务器就没有方法晓得本人的序号是否已被确认。同时这样也是为了避免生效的申请报文段被服务器接管，而呈现谬误的状况。

刚开始单方都处于 ESTABLISHED 状态，如果是客户端先发动敞开申请。四次挥手的过程如下：

第一次挥手：客户端会发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。

即收回连贯开释报文段（FIN=1，序号 seq=u），并进行再发送数据，被动敞开 TCP 连贯，进入 FIN_WAIT1（终止期待 1）状态，期待服务端的确认。

第二次挥手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 +1 作为 ACK 报文的序列号值，表明曾经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。

即服务端收到连贯开释报文段后即收回确认报文段（ACK=1，确认号 ack=u+1，序号 seq=v），服务端进入 CLOSE_WAIT（敞开期待）状态，此时的 TCP 处于半敞开状态，客户端到服务端的连贯开释。客户端收到服务端的确认后，进入 FIN_WAIT2（终止期待 2）状态，期待服务端收回的连贯开释报文段。

第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。

即服务端没有要向客户端收回的数据，服务端收回连贯开释报文段（FIN=1，ACK=1，序号 seq=w，确认号 ack=u+1），服务端进入 LAST_ACK（最初确认）状态，期待客户端的确认。

第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 +1 作为本人 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。须要过一阵子以确保服务端收到本人的 ACK 报文之后才会进入 CLOSED 状态，服务端收到 ACK 报文之后，就处于敞开连贯了，处于 CLOSED 状态。

即客户端收到服务端的连贯开释报文段后，对此收回确认报文段（ACK=1，seq=u+1，ack=w+1），客户端进入 TIME_WAIT（工夫期待）状态。此时 TCP 未开释掉，须要通过工夫期待计时器设置的工夫 2MSL 后，客户端才进入 CLOSED 状态。

那为什么须要四次挥手呢？

因为当服务端收到客户端的 SYN 连贯申请报文后，能够间接发送 SYN+ACK 报文。其中 ACK 报文是用来应答的，SYN 报文是用来同步的。然而敞开连贯时，当服务端收到 FIN 报文时，很可能并不会立刻敞开 SOCKET，所以只能先回复一个 ACK 报文，通知客户端，“你发的 FIN 报文我收到了”。只有等到我服务端所有的报文都发送完了，我能力发送 FIN 报文，因而不能一起发送，故须要四次挥手。

简略来说就是以下四步：

第一次挥手： 若客户端认为数据发送实现，则它须要向服务端发送连贯开释申请。
第二次挥手：服务端收到连贯开释申请后，会通知应用层要开释 TCP 链接。而后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连贯曾经开释，不再接管客户端发的数据了。然而因为 TCP 连贯是双向的，所以服务端仍旧能够发送数据给客户端。
第三次挥手：服务端如果此时还有没发完的数据会持续发送，结束后会向客户端发送连贯开释申请，而后服务端便进入 LAST-ACK 状态。
第四次挥手： 客户端收到开释申请后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会继续 2MSL（最大段生存期，指报文段在网络中生存的工夫，超时会被摈弃）工夫，若该时间段内没有服务端的重发申请的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。

TCP 应用四次挥手的起因是因为 TCP 的连贯是全双工的，所以须要单方别离开释到对方的连贯，独自一方的连贯开释，只代表不能再向对方发送数据，连贯处于的是半开释的状态。

最初一次挥手中，客户端会期待一段时间再敞开的起因，是为了避免发送给服务器的确认报文段失落或者出错，从而导致服务器端不能失常敞开。

ES6 Module 和 CommonJS 模块的区别：

CommonJS 是对模块的浅拷⻉，ES6 Module 是对模块的引⽤，即 ES6 Module 只存只读，不能扭转其值，也就是指针指向不能变，相似 const；
import 的接⼝是 read-only（只读状态），不能批改其变量值。即不能批改其变量的指针指向，但能够扭转变量外部指针指向，能够对 commonJS 对从新赋值（扭转指针指向），然而对 ES6 Module 赋值会编译报错。

ES6 Module 和 CommonJS 模块的共同点：

CommonJS 和 ES6 Module 都能够对引⼊的对象进⾏赋值，即对对象外部属性的值进⾏扭转。

1. 浅拷贝的原理和实现

本人创立一个新的对象，来承受你要从新复制或援用的对象值。如果对象属性是根本的数据类型，复制的就是根本类型的值给新对象；但如果属性是援用数据类型，复制的就是内存中的地址，如果其中一个对象扭转了这个内存中的地址，必定会影响到另一个对象

办法一：object.assign

object.assign是 ES6 中 object 的一个办法，该办法能够用于 JS 对象的合并等多个用处，其中一个用处就是能够进行浅拷贝。该办法的第一个参数是拷贝的指标对象，前面的参数是拷贝的起源对象（也能够是多个起源）。

object.assign 的语法为：Object.assign(target, ...sources)

object.assign 的示例代码如下：

let target = {};
let source = {a: { b: 1} };
Object.assign(target, source);
console.log(target); // {a: { b: 1} };

然而应用 object.assign 办法有几点须要留神

它不会拷贝对象的继承属性；
它不会拷贝对象的不可枚举的属性；
能够拷贝 Symbol 类型的属性。

let obj1 = {a:{ b:1}, sym:Symbol(1)}; 
Object.defineProperty(obj1, 'innumerable' ,{
    value:'不可枚举属性',
    enumerable:false
});
let obj2 = {};
Object.assign(obj2,obj1)
obj1.a.b = 2;
console.log('obj1',obj1);
console.log('obj2',obj2);

从下面的样例代码中能够看到，利用 object.assign 也能够拷贝 Symbol 类型的对象，然而如果到了对象的第二层属性 obj1.a.b 这里的时候，前者值的扭转也会影响后者的第二层属性的值，阐明其中 仍旧存在着拜访独特堆内存的问题 ，也就是说 这种办法还不能进一步复制，而只是实现了浅拷贝的性能

办法二：扩大运算符形式

咱们也能够利用 JS 的扩大运算符，在结构对象的同时实现浅拷贝的性能。
扩大运算符的语法为：let cloneObj = {...obj};

/* 对象的拷贝 */
let obj = {a:1,b:{c:1}}
let obj2 = {...obj}
obj.a = 2
console.log(obj)  //{a:2,b:{c:1}} console.log(obj2); //{a:1,b:{c:1}}
obj.b.c = 2
console.log(obj)  //{a:2,b:{c:2}} console.log(obj2); //{a:1,b:{c:2}}
/* 数组的拷贝 */
let arr = [1, 2, 3];
let newArr = [...arr]; // 跟 arr.slice()是一样的成果

扩大运算符和 object.assign 有同样的缺点，也就是 实现的浅拷贝的性能差不多 ，然而如果属性都是 根本类型的值，应用扩大运算符进行浅拷贝会更加不便

办法三：concat 拷贝数组

数组的 concat 办法其实也是浅拷贝，所以连贯一个含有援用类型的数组时，须要留神批改原数组中的元素的属性，因为它会影响拷贝之后连贯的数组。不过 concat 只能用于数组的浅拷贝，应用场景比拟局限。代码如下所示。

let arr = [1, 2, 3];
let newArr = arr.concat();
newArr[1] = 100;
console.log(arr);  // [1, 2, 3]
console.log(newArr); // [1, 100, 3]

办法四：slice 拷贝数组

slice 办法也比拟有局限性，因为 它仅仅针对数组类型。slice 办法会返回一个新的数组对象，这一对象由该办法的前两个参数来决定原数组截取的开始和完结工夫，是不会影响和扭转原始数组的。

slice 的语法为：arr.slice(begin, end);

let arr = [1, 2, {val: 4}];
let newArr = arr.slice();
newArr[2].val = 1000;
console.log(arr);  //[1, 2, { val: 1000} ]

从下面的代码中能够看出，这就是 浅拷贝的限度所在了——它只能拷贝一层对象 。如果 存在对象的嵌套，那么浅拷贝将无能为力。因而深拷贝就是为了解决这个问题而生的，它能解决多层对象嵌套问题，彻底实现拷贝

手工实现一个浅拷贝

依据以上对浅拷贝的了解，如果让你本人实现一个浅拷贝，大抵的思路分为两点：

对根底类型做一个最根本的一个拷贝；
对援用类型开拓一个新的存储，并且拷贝一层对象属性。

const shallowClone = (target) => {if (typeof target === 'object' && target !== null) {const cloneTarget = Array.isArray(target) ? []: {};
    for (let prop in target) {if (target.hasOwnProperty(prop)) {cloneTarget[prop] = target[prop];
      }
    }
    return cloneTarget;
  } else {return target;}
}

利用类型判断，针对援用类型的对象进行 for 循环遍历对象属性赋值给指标对象的属性，根本就能够手工实现一个浅拷贝的代码了

2. 深拷贝的原理和实现

浅拷贝只是创立了一个新的对象，复制了原有对象的根本类型的值，而援用数据类型只拷贝了一层属性，再深层的还是无奈进行拷贝。深拷贝则不同，对于简单援用数据类型，其在堆内存中齐全开拓了一块内存地址，并将原有的对象齐全复制过去寄存。

这两个对象是互相独立、不受影响的，彻底实现了内存上的拆散。总的来说，深拷贝的原理能够总结如下：

将一个对象从内存中残缺地拷贝进去一份给指标对象，并从堆内存中开拓一个全新的空间寄存新对象，且新对象的批改并不会扭转原对象，二者实现真正的拆散。

办法一：乞丐版（JSON.stringify）

JSON.stringify() 是目前开发过程中最简略的深拷贝办法，其实就是把一个对象序列化成为 JSON 的字符串，并将对象外面的内容转换成字符串，最初再用 JSON.parse() 的办法将 JSON 字符串生成一个新的对象

let a = {
    age: 1,
    jobs: {first: 'FE'}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

然而该办法也是有局限性的：

会疏忽 undefined
会疏忽 symbol
不能序列化函数
无奈拷贝不可枚举的属性
无奈拷贝对象的原型链
拷贝 RegExp 援用类型会变成空对象
拷贝 Date 援用类型会变成字符串
对象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的后果会变成 null
不能解决循环援用的对象，即对象成环 (obj[key] = obj)。

function Obj() {this.func = function () {alert(1) }; 
  this.obj = {a:1};
  this.arr = [1,2,3];
  this.und = undefined; 
  this.reg = /123/; 
  this.date = new Date(0); 
  this.NaN = NaN;
  this.infinity = Infinity;
  this.sym = Symbol(1);
} 
let obj1 = new Obj();
Object.defineProperty(obj1,'innumerable',{ 
  enumerable:false,
  value:'innumerable'
});
console.log('obj1',obj1);
let str = JSON.stringify(obj1);
let obj2 = JSON.parse(str);
console.log('obj2',obj2);

应用 JSON.stringify 办法实现深拷贝对象，尽管到目前为止还有很多无奈实现的性能，然而这种办法足以满足日常的开发需要，并且是最简略和快捷的。而对于其余的也要实现深拷贝的，比拟麻烦的属性对应的数据类型，JSON.stringify 临时还是无奈满足的，那么就须要上面的几种办法了

办法二：根底版（手写递归实现）

上面是一个实现 deepClone 函数封装的例子，通过 for in 遍历传入参数的属性值，如果值是援用类型则再次递归调用该函数，如果是根底数据类型就间接复制

let obj1 = {
  a:{b:1}
}
function deepClone(obj) {let cloneObj = {}
  for(let key in obj) {                 // 遍历
    if(typeof obj[key] ==='object') {cloneObj[key] = deepClone(obj[key])  // 是对象就再次调用该函数递归
    } else {cloneObj[key] = obj[key]  // 根本类型的话间接复制值
    }
  }
  return cloneObj
}
let obj2 = deepClone(obj1);
obj1.a.b = 2;
console.log(obj2);   //  {a:{b:1}}

尽管利用递归能实现一个深拷贝，然而同下面的 JSON.stringify 一样，还是有一些问题没有齐全解决，例如：

这个深拷贝函数并不能复制不可枚举的属性以及 Symbol 类型；
这种办法 只是针对一般的援用类型的值做递归复制，而对于 Array、Date、RegExp、Error、Function 这样的援用类型并不能正确地拷贝；
对象的属性外面成环，即 循环援用没有解决。

这种根底版本的写法也比较简单，能够应答大部分的利用状况。然而你在面试的过程中，如果只能写出这样的一个有缺点的深拷贝办法，有可能不会通过。

所以为了“援救”这些缺点，上面我带你一起看看改良的版本，以便于你能够在面试种呈现出更好的深拷贝办法，博得面试官的青眼。

办法三：改进版（改良后递归实现）

针对下面几个待解决问题，我先通过四点相干的实践通知你别离应该怎么做。

针对可能遍历对象的不可枚举属性以及 Symbol 类型，咱们能够应用 Reflect.ownKeys 办法；
当参数为 Date、RegExp 类型，则间接生成一个新的实例返回；
利用 Object 的 getOwnPropertyDescriptors 办法能够取得对象的所有属性，以及对应的个性，顺便联合 Object.create 办法创立一个新对象，并继承传入原对象的原型链；
利用 WeakMap 类型作为 Hash 表，因为 WeakMap 是弱援用类型，能够无效避免内存透露（你能够关注一下 Map 和 weakMap 的要害区别，这里要用 weakMap），作为检测循环援用很有帮忙，如果存在循环，则援用间接返回 WeakMap 存储的值

如果你在思考到循环援用的问题之后，还能用 WeakMap 来很好地解决，并且向面试官解释这样做的目标，那么你所展现的代码，以及你对问题思考的全面性，在面试官眼中应该算是合格的了

实现深拷贝

const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null)

const deepClone = function (obj, hash = new WeakMap()) {if (obj.constructor === Date) {return new Date(obj)       // 日期对象间接返回一个新的日期对象
  }

  if (obj.constructor === RegExp){return new RegExp(obj)     // 正则对象间接返回一个新的正则对象
  }

  // 如果循环援用了就用 weakMap 来解决
  if (hash.has(obj)) {return hash.get(obj)
  }
  let allDesc = Object.getOwnPropertyDescriptors(obj)

  // 遍历传入参数所有键的个性
  let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc)

  // 把 cloneObj 原型复制到 obj 上
  hash.set(obj, cloneObj)

  for (let key of Reflect.ownKeys(obj)) {cloneObj[key] = (isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ? deepClone(obj[key], hash) : obj[key]
  }
  return cloneObj
}

// 上面是验证代码
let obj = {
  num: 0,
  str: '',
  boolean: true,
  unf: undefined,
  nul: null,
  obj: {name: '我是一个对象', id: 1},
  arr: [0, 1, 2],
  func: function () { console.log('我是一个函数') },
  date: new Date(0),
  reg: new RegExp('/ 我是一个正则 /ig'),
  [Symbol('1')]: 1,
};
Object.defineProperty(obj, 'innumerable', {enumerable: false, value: '不可枚举属性'}
);
obj = Object.create(obj, Object.getOwnPropertyDescriptors(obj))
obj.loop = obj    // 设置 loop 成循环援用的属性
let cloneObj = deepClone(obj)
cloneObj.arr.push(4)
console.log('obj', obj)
console.log('cloneObj', cloneObj)

咱们看一下后果，cloneObj 在 obj 的根底上进行了一次深拷贝，cloneObj 里的 arr 数组进行了批改，并未影响到 obj.arr 的变动，如下图所示

一、梳理数组 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. 类数组利用场景

遍历参数操作

咱们在函数外部能够间接获取 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

定义链接字符串函数

咱们能够通过 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"

传递参数应用

// 应用 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. 如何将类数组转换成数组

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

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

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) 的工夫复杂度。而代价是须要额定的内存空间。

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

1. JS 内置类型

JavaScript 的数据类型有下图所示

其中，前 7 种类型为根底类型，最初 1 种（Object）为援用类型，也是你须要重点关注的，因为它在日常工作中是应用得最频繁，也是须要关注最多技术细节的数据类型

JavaScript一共有 8 种数据类型，其中有 7 种根本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，示意举世无双的值）和 BigInt（es10 新增）；
1 种援用数据类型——Object（Object 实质上是由一组无序的名值对组成的）。外面蕴含 function、Array、Date等。JavaScript 不反对任何创立自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。
- 援用数据类型: 对象Object（蕴含一般对象 -Object，数组对象 -Array，正则对象 -RegExp，日期对象 -Date，数学函数 -Math，函数对象 -Function）

在这里，我想先请你重点理解上面两点，因为各种 JavaScript 的数据类型最初都会在初始化之后放在不同的内存中，因而下面的数据类型大抵能够分成两类来进行存储：

原始数据类型：根底类型存储在栈内存，被援用或拷贝时，会创立一个齐全相等的变量；占据空间小、大小固定，属于被频繁应用数据，所以放入栈中存储。
援用数据类型：援用类型存储在堆内存，存储的是地址，多个援用指向同一个地址，这里会波及一个“共享”的概念；占据空间大、大小不固定。援用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找援用值时，会首先检索其在栈中的地址，获得地址后从堆中取得实体。

JavaScript 中的数据是如何存储在内存中的？

在 JavaScript 中，原始类型的赋值会残缺复制变量值，而援用类型的赋值是复制援用地址。

在 JavaScript 的执行过程中，次要有三种类型内存空间，别离是 代码空间 、 栈空间 、 堆空间 。其中的代码空间次要是存储可执行代码的，原始类型(Number、String、Null、Undefined、Boolean、Symbol、BigInt) 的数据值都是间接保留在“栈”中的，援用类型 (Object) 的值是寄存在“堆”中的。因而在栈空间中(执行上下文)，原始类型存储的是变量的值，而援用类型存储的是其在 ” 堆空间 ” 中的地址，当 JavaScript 须要拜访该数据的时候，是通过栈中的援用地址来拜访的，相当于多了一道转手流程。

在编译过程中，如果 JavaScript 引擎判断到一个闭包，也会在堆空间创立换一个 “closure(fn)” 的对象（这是一个外部对象，JavaScript 是无法访问的），用来保留闭包中的变量。所以闭包中的变量是存储在“堆空间”中的。

JavaScript 引擎须要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都寄存在栈空间外面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。通常状况下，栈空间都不会设置太大，次要用来寄存一些原始类型的小数据。而援用类型的数据占用的空间都比拟大，所以这一类数据会被寄存到堆中，堆空间很大，能寄存很多大的数据，不过毛病是分配内存和回收内存都会占用肯定的工夫。因而须要“栈”和“堆”两种空间。

题目一：老成持重

let a = {
  name: 'lee',
  age: 18
}
let b = a;
console.log(a.name);  // 第一个 console
b.name = 'son';
console.log(a.name);  // 第二个 console
console.log(b.name);  // 第三个 console

这道题比较简单，咱们能够看到第一个 console 打进去 name 是 ‘lee’，这应该没什么疑难；然而在执行了 b.name=’son’ 之后，后果你会发现 a 和 b 的属性 name 都是 ‘son’，第二个和第三个打印后果是一样的，这里就体现了援用类型的“共享”的个性，即这两个值都存在同一块内存中共享，一个产生了扭转，另外一个也随之跟着变动。

你能够间接在 Chrome 控制台敲一遍，深刻了解一下这部分概念。上面咱们再看一段代码，它是比题目一稍简单一些的对象属性变动问题。

题目二：渐入佳境

let a = {
  name: 'Julia',
  age: 20
}
function change(o) {
  o.age = 24;
  o = {
    name: 'Kath',
    age: 30
  }
  return o;
}
let b = change(a);     // 留神这里没有 new，前面 new 相干会有专门文章解说
console.log(b.age);    // 第一个 console
console.log(a.age);    // 第二个 console

这道题波及了 function，你通过上述代码能够看到第一个 console 的后果是 30，b 最初打印后果是 {name: "Kath", age: 30}；第二个 console 的返回后果是 24，而 a 最初的打印后果是 {name: "Julia", age: 24}。

是不是和你料想的有些区别？你要留神的是，这里的 function 和 return 带来了不一样的货色。

起因在于：函数传参进来的 o，传递的是对象在堆中的内存地址值，通过调用 o.age = 24（第 7 行代码）的确扭转了 a 对象的 age 属性；然而第 12 行代码的 return 却又把 o 变成了另一个内存地址，将 {name: "Kath", age: 30} 存入其中，最初返回 b 的值就变成了 {name: "Kath", age: 30}。而如果把第 12 行去掉，那么 b 就会返回 undefined

2. 数据类型检测

（1）typeof

typeof 对于原始类型来说，除了 null 都能够显示正确的类型

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object     []数组的数据类型在 typeof 中被解释为 object
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object     null 的数据类型被 typeof 解释为 object

typeof 对于对象来说，除了函数都会显示 object，所以说 typeof 并不能精确判断变量到底是什么类型, 所以想判断一个对象的正确类型，这时候能够思考应用 instanceof

（2）instanceof

instanceof 能够正确的判断对象的类型，因为外部机制是通过判断对象的原型链中是不是能找到类型的 prototype

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true    
// console.log(undefined instanceof Undefined);
// console.log(null instanceof Null);

instanceof 能够精确地判断简单援用数据类型，然而不能正确判断根底数据类型；
而 typeof 也存在弊病，它尽管能够判断根底数据类型（null 除外），然而援用数据类型中，除了 function 类型以外，其余的也无奈判断

// 咱们也能够试着实现一下 instanceof
function _instanceof(left, right) {
    // 因为 instance 要检测的是某对象，须要有一个前置判断条件
    // 根本数据类型间接返回 false
    if(typeof left !== 'object' || left === null) return false;

    // 取得类型的原型
    let prototype = right.prototype
    // 取得对象的原型
    left = left.__proto__
    // 判断对象的类型是否等于类型的原型
    while (true) {if (left === null)
            return false
        if (prototype === left)
            return true
        left = left.__proto__
    }
}

console.log('test', _instanceof(null, Array)) // false
console.log('test', _instanceof([], Array)) // true
console.log('test', _instanceof('', Array)) // false
console.log('test', _instanceof({}, Object)) // true

（3）constructor

console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

这里有一个坑，如果我创立一个对象，更改它的原型，constructor就会变得不牢靠了

function Fn(){};

Fn.prototype=new Array();

var f=new Fn();

console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true

（4）Object.prototype.toString.call()

toString() 是 Object 的原型办法，调用该办法，能够对立返回格局为 “[object Xxx]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，间接调用 toString() 就能返回 [object Object]；而对于其余对象，则须要通过 call 来调用，能力返回正确的类型信息。咱们来看一下代码。

Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上后果，加上 call 也 ok
Object.prototype.toString.call(1)    // "[object Number]"
Object.prototype.toString.call('1')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)   //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([])       //"[object Array]"
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
Object.prototype.toString.call(window)   //"[object Window]"

// 从下面这段代码能够看出，Object.prototype.toString.call() 能够很好地判断援用类型，甚至能够把 document 和 window 都辨别开来。

实现一个全局通用的数据类型判断办法，来加深你的了解，代码如下

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行 typeof 判断，如果是根底数据类型，间接返回
    return type;
  }
  // 对于 typeof 返回后果是 object 的，再进行如下的判断，正则返回后果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');  // 留神正则两头有个空格
}
/* 代码验证，须要留神大小写，哪些是 typeof 判断，哪些是 toString 判断？思考下 */
getType([])     // "Array" typeof []是 object，因而 toString 返回
getType('123')  // "string" typeof 间接返回
getType(window) // "Window" toString 返回
getType(null)   // "Null" 首字母大写，typeof null 是 object，需 toString 来判断
getType(undefined)   // "undefined" typeof 间接返回
getType()            // "undefined" typeof 间接返回
getType(function(){}) // "function" typeof 能判断，因而首字母小写
getType(/123/g)      //"RegExp" toString 返回

小结

typeof
- 间接在计算机底层基于数据类型的值（二进制）进行检测
- typeof null为 object 起因是对象存在在计算机中，都是以000 开始的二进制存储，所以检测进去的后果是对象
- typeof 一般对象 / 数组对象 / 正则对象 / 日期对象都是object
- typeof NaN === 'number'
instanceof
- 检测以后实例是否属于这个类的
- 底层机制：只有以后类呈现在实例的原型上，后果都是 true
- 不能检测根本数据类型
constructor
- 反对根本类型
- constructor 能够轻易改，也不准
Object.prototype.toString.call([val])
- 返回以后实例所属类信息

判断 Target 的类型，单单用 typeof 并无奈齐全满足，这其实并不是 bug，实质起因是 JS 的万物皆对象的实践。因而要真正完满判断时，咱们须要辨别看待:

根本类型(null): 应用 String(null)
根本类型 (string / number / boolean / undefined) + function: – 间接应用 typeof 即可
其余援用类型 (Array / Date / RegExp Error): 调用toString 后依据 [object XXX] 进行判断

3. 数据类型转换

咱们先看一段代码，理解下大抵的状况。

'123' == 123   // false or true?
''== null    // false or true?'' == 0        // false or true?
[] == 0        // false or true?
[] == ''       // false or true?
[] == ![]      // false or true?
null == undefined //  false or true?
Number(null)     // 返回什么？Number('')      // 返回什么？parseInt('');    // 返回什么？{}+10           // 返回什么？let obj = {[Symbol.toPrimitive]() {return 200;},
    valueOf() {return 300;},
    toString() {return 'Hello';}
}
console.log(obj + 200); // 这里打印进去是多少？

首先咱们要晓得，在 JS 中类型转换只有三种状况，别离是：

转换为布尔值
转换为数字
转换为字符串

转 Boolean

在条件判断时，除了 undefined，null，false，NaN，''，0，-0，其余所有值都转为 true，包含所有对象

Boolean(0)          //false
Boolean(null)       //false
Boolean(undefined)  //false
Boolean(NaN)        //false
Boolean(1)          //true
Boolean(13)         //true
Boolean('12')       //true

对象转原始类型

对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 函数，对于该函数来说，算法逻辑一般来说如下

如果曾经是原始类型了，那就不须要转换了
调用 x.valueOf()，如果转换为根底类型，就返回转换的值
调用 x.toString()，如果转换为根底类型，就返回转换的值
如果都没有返回原始类型，就会报错

当然你也能够重写 Symbol.toPrimitive，该办法在转原始类型时调用优先级最高。

let a = {valueOf() {return 0},
  toString() {return '1'},
  [Symbol.toPrimitive]() {return 2}
}
1 + a // => 3

四则运算符

它有以下几个特点：

运算中其中一方为字符串，那么就会把另一方也转换为字符串
如果一方不是字符串或者数字，那么会将它转换为数字或者字符串

1 + '1' // '11'
true + true // 2
4 + [1,2,3] // "41,2,3"

对于第一行代码来说，触发特点一，所以将数字 1 转换为字符串，失去后果 '11'
对于第二行代码来说，触发特点二，所以将 true 转为数字 1
对于第三行代码来说，触发特点二，所以将数组通过 toString转为字符串 1,2,3，失去后果 41,2,3

另外对于加法还须要留神这个表达式 'a' + + 'b'

'a' + + 'b' // -> "aNaN"

因为 + 'b' 等于 NaN，所以后果为 "aNaN"，你可能也会在一些代码中看到过 + '1'的模式来疾速获取 number 类型。
那么对于除了加法的运算符来说，只有其中一方是数字，那么另一方就会被转为数字

4 * '3' // 12
4 * [] // 0
4 * [1, 2] // NaN

比拟运算符

如果是对象，就通过 toPrimitive 转换对象
如果是字符串，就通过 unicode 字符索引来比拟

let a = {valueOf() {return 0},
  toString() {return '1'}
}
a > -1 // true

在以上代码中，因为 a 是对象，所以会通过 valueOf 转换为原始类型再比拟值。

强制类型转换

强制类型转换形式包含 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()，这几种办法都比拟相似

Number() 办法的强制转换规则
如果是布尔值，true 和 false 别离被转换为 1 和 0；
如果是数字，返回本身；
如果是 null，返回 0；
如果是 undefined，返回 NaN；
如果是字符串，遵循以下规定：如果字符串中只蕴含数字（或者是 0X / 0x 结尾的十六进制数字字符串，容许蕴含正负号），则将其转换为十进制；如果字符串中蕴含无效的浮点格局，将其转换为浮点数值；如果是空字符串，将其转换为 0；如果不是以上格局的字符串，均返回 NaN；
如果是 Symbol，抛出谬误；
如果是对象，并且部署了 [Symbol.toPrimitive]，那么调用此办法，否则调用对象的 valueOf() 办法，而后根据后面的规定转换返回的值；如果转换的后果是 NaN，则调用对象的 toString() 办法，再次按照后面的程序转换返回对应的值。

Number(true);        // 1
Number(false);       // 0
Number('0111');      //111
Number(null);        //0
Number('');          //0
Number('1a');        //NaN
Number(-0X11);       //-17
Number('0X11')       //17

Object 的转换规则

对象转换的规定，会先调用内置的 [ToPrimitive] 函数，其规定逻辑如下：

如果部署了 Symbol.toPrimitive 办法，优先调用再返回；
调用 valueOf()，如果转换为根底类型，则返回；
调用 toString()，如果转换为根底类型，则返回；
如果都没有返回根底类型，会报错。

var obj = {
  value: 1,
  valueOf() {return 2;},
  toString() {return '3'},
  [Symbol.toPrimitive]() {return 4}
}
console.log(obj + 1); // 输入 5
// 因为有 Symbol.toPrimitive，就优先执行这个；如果 Symbol.toPrimitive 这段代码删掉，则执行 valueOf 打印后果为 3；如果 valueOf 也去掉，则调用 toString 返回 '31'(字符串拼接)
// 再看两个非凡的 case：10 + {}
// "10[object Object]"，留神：{}会默认调用 valueOf 是{}，不是根底类型持续转换，调用 toString，返回后果 "[object Object]"，于是和 10 进行 '+' 运算，依照字符串拼接规定来，参考 '+' 的规定 C
[1,2,undefined,4,5] + 10
// "1,2,,4,510"，留神 [1,2,undefined,4,5] 会默认先调用 valueOf 后果还是这个数组，不是根底数据类型持续转换，也还是调用 toString，返回 "1,2,,4,5"，而后再和 10 进行运算，还是依照字符串拼接规定，参考 '+' 的第 3 条规定

‘==’ 的隐式类型转换规定

如果类型雷同，毋庸进行类型转换；
如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
如果其中一个是 Symbol 类型，那么返回 false；
两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
如果一个操作值是 boolean，那么转换成 number；
如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 办法进行转换）。

null == undefined       // true  规定 2
null == 0               // false 规定 2
''== null              // false 规定 2'' == 0                 // true  规定 4 字符串转隐式转换成 Number 之后再比照
'123' == 123            // true  规定 4 字符串转隐式转换成 Number 之后再比照
0 == false              // true  e 规定 布尔型隐式转换成 Number 之后再比照
1 == true               // true  e 规定 布尔型隐式转换成 Number 之后再比照
var a = {
  value: 0,
  valueOf: function() {
    this.value++;
    return this.value;
  }
};
// 留神这里 a 又能够等于 1、2、3
console.log(a == 1 && a == 2 && a ==3);  //true f 规定 Object 隐式转换
// 注：然而执行过 3 遍之后，再从新执行 a == 3 或之前的数字就是 false，因为 value 曾经加上去了，这里须要留神一下

‘+’ 的隐式类型转换规定

‘+’ 号操作符，不仅能够用作数字相加，还能够用作字符串拼接。仅当 ‘+’ 号两边都是数字时，进行的是加法运算；如果两边都是字符串，则间接拼接，毋庸进行隐式类型转换。

如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 办法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级，而后再进行拼接。
如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的状况还是参考上一条规定。
如果其中一个是字符串、一个是数字，则依照字符串规定进行拼接

1 + 2        // 3  惯例状况
'1' + '2'    // '12' 惯例状况
// 上面看一下非凡状况
'1' + undefined   // "1undefined" 规定 1，undefined 转换字符串
'1' + null        // "1null" 规定 1，null 转换字符串
'1' + true        // "1true" 规定 1，true 转换字符串
'1' + 1n          // '11' 比拟非凡字符串和 BigInt 相加，BigInt 转换为字符串
1 + undefined     // NaN  规定 2，undefined 转换数字相加 NaN
1 + null          // 1    规定 2，null 转换为 0
1 + true          // 2    规定 2，true 转换为 1，二者相加为 2
1 + 1n            // 谬误  不能把 BigInt 和 Number 类型间接混合相加
'1' + 3           // '13' 规定 3，字符串拼接

整体来看，如果数据中有字符串，JavaScript 类型转换还是更偏向于转换成字符串，因为第三条规定中能够看到，在字符串和数字相加的过程中最初返回的还是字符串，这里须要关注一下

null 和 undefined 的区别？

首先 Undefined 和 Null 都是根本数据类型，这两个根本数据类型别离都只有一个值，就是 undefined 和 null。
undefined 代表的含意是未定义，null 代表的含意是空对象（其实不是真的对象，请看上面的留神！）。个别变量申明了但还没有定义的时候会返回 undefined，null 次要用于赋值给一些可能会返回对象的变量，作为初始化。

其实 null 不是对象，尽管 typeof null 会输入 object，然而这只是 JS 存在的一个悠久 Bug。在 JS 的最后版本中应用的是 32 位零碎，为了性能思考应用低位存储变量的类型信息，000 结尾代表是对象，然而 null 示意为全零，所以将它谬误的判断为 object。尽管当初的外部类型判断代码曾经扭转了，然而对于这个 Bug 却是始终流传下来。

undefined 在 js 中不是一个保留字，这意味着咱们能够应用 undefined 来作为一个变量名，这样的做法是十分危险的，它会影响咱们对 undefined 值的判断。然而咱们能够通过一些办法取得平安的 undefined 值，比如说 void 0。
当咱们对两种类型应用 typeof 进行判断的时候，Null 类型化会返回“object”，这是一个历史遗留的问题。当咱们应用双等号对两种类型的值进行比拟时会返回 true，应用三个等号时会返回 false。

组件之间的传值有几种形式

对 this 对象的了解

说一下 HTTP 3.0

判断数组的形式有哪些

template 预编译是什么

闭包

数字证书是什么？

DNS 同时应用 TCP 和 UDP 协定？

即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？

原型 / 原型链

左右两边定宽，两头自适应

Proxy 代理

TCP 和 UDP 的概念及特点

OSI 七层模型

（1）应用层

（2）表示层

（3）会话层

（4）传输层

（5）网络层

（6）数据链路层

（7）物理层

节流与防抖

TCP 的三次握手和四次挥手

（1）三次握手

（2）四次挥手

ES6模块与 CommonJS 模块有什么异同？

深浅拷贝

深刻数组

类型及检测形式

站内搜索