ES6常见的新特性(超详细)、let/const、模板字符串、ES6函数增强、Symbol数据类型、set/map数据结构详细介绍

文章目录

1. 新的ECMA代码执行描述

1.1 新术语描述介绍

在学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语：

执行上下文栈：Execution Context Stack，用于执行上下文的栈结构；
执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文；
变量对象：Variable Object，上下文关联的VO对象，用于记录函数和变量声明；
全局对象：Global Object，全局执行上下文关联的VO对象；
激活对象：Activation Object，函数执行上下文关联的VO对象；
作用域链：scope chain，作用域链，用于关联指向上下文的变量查找；

但是这些术语是ES5之前的术语, 在新的ECMA代码执行描述中(ES5以上），对于代码的执行流程描述改成了另外的一些词汇

基本思路是相同的，只是对于一些词汇的描述发生了改变；
执行上下文栈和执行上下文也是相同的；

1.2 词法环境

词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；

一个词法环境是由环境记录（Environment Record）和一个外部词法环境（oute;r Lexical Environment）组成；
一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来；

个人理解:

也就是以前每创建一个执行上下文都需要关联VO, 而新的ECMA代码执行描述中, 现在每创建一个执行上下文都需要关联一个词法环境
而词法环境是由环境记录和一个外部的词法环境组成的(全局的外部词法环境是null)

也就是在ES5之后，执行一个代码，通常会关联对应的词法环境；

那么执行上下文会关联哪些词法环境呢？
一般会关联两个词法环境,
1. 一个是词法环境组件(LexicalEnvironment), 用于处理let、const声明的标识符
2. 另一个变量环境组件VariableEnvironment用于处理var和function声明的标识符

1.3 环境记录

在这个规范中有两种主要的环境记录值声明式环境记录和对象环境记录。

声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑ECMAScript语言值关联起来的Catch子句。
对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性关联来。

1.4 新ECMA描述内存图

我们来看看新ECMA描述在内存中的表现

2.let/const

2.1 let/const基本使用

在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；
但是let、const确确实实给JavaScript带来一些不一样的东西；

let关键字：

从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量；

const关键字：

const关键字是constant的单词的缩写，表示常量、衡量的意思；
它表示保存的数据一旦被赋值，就不能被修改；
但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；

注意: let、const在同一个作用域里面, 不允许重复声明变量；

2.2 let/const作用域提升

let、const和var的另一个重要区别是作用域提升：

我们知道var声明的变量是会进行作用域提升的, 在声明之前可以访问, 只不过值是undefined；
```
console.log(foo); // undefined
var foo = "foo";
```

但是如果我们使用let、const声明的变量，在声明之前访问会报错;

console.log(foo); // 报错 Uncaught ReferenceError: Cannot access 'foo' before initialization
let foo = "foo";

那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？

事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；
这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；

大概意思就是说, let、const定义的变量, 定义的变量并不是当代码执行到那一行才创建出来的, 在执行到代码之前就已经提前被创建出来, 只是不能访问

2.3 let/const有没有作用域提升

从上面我们刚刚讲过，在执行上下文的词法环境创建出来的时候变量事实上已经被创建了，只是这个变量是不能被访问的。

那么思考一下 , 变量已经有了，但是不能被访问，这是不是一种作用域的提升呢？

事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；

作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；
在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；

所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来。

2.4 let/const暂时性死区

我们知道，在let、const定义的标识符在真正执行到声明的代码之前，是不能被访问的

从块作用域的顶部一直到变量声明完成之前，这个变量处在的区域就是暂时性死区（TDZ，temporal dead zone）

暂时性死区和定义的位置没有关系, 它是和代码的执行顺序有关

function foo() {
  console.log(address);
}

let address = "成都市";
foo();

暂时性死区形成后, 在该区域内这个标识符不能访问, 这句话是什么意思呢?

例如下面代码中, 在foo作用域下,会优先访问自己作用域下的address, 而foo作用域中, 执行到第7行代码之前, 已经形成暂时性死区, 所以不能访问, 就会报错

let address = "成都市";

function foo() {
  
  console.log(address);

  let address = "四川省";
}

foo();

2.5 let/const不添加到window

我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：

// var声明的变量会在window上添加一个属性
var message = "hello word"
var address = "成都市"

console.log(window.message) // hello word
console.log(window.address) // 成都市

但是let、const是不会给window上添加任何属性的。

let message = "hello word"
const address = "成都市"

console.log(window.message) // undefined
console.log(window.address) // undefined

2.6 let/const的块级作用域

在我们前面的学习中(ES6之前)， JavaScript只会形成两个作用域: 全局作用域和函数作用域。

放到一个代码中定义的变量，外面是可以访问的

// var没有块级作用域
{
  var message = "Hello Word";
}

// 可以访问
console.log(message); // Hello Word

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：

// let会形成块级作用域
{
  let message = "Hello Word";
}

// 无法访问
console.log(message); // ReferenceError: message is not defined

// const会形成块级作用域
{
  const message = "Hello Word";
}

// 无法访问
console.log(message); // ReferenceError: message is not defined

// class会形成块级作用域
{
  class Person {}
}

// 无法访问
const p = new Person(); // ReferenceError: Person is not defined

但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：

这是因为JS引擎会对函数的声明进行特殊的处理，允许像var那样进行提升；

{
  function foo() {
    console.log("foo调用~");
  }
}

foo(); // foo调用~

2.7 let/const/var的选择

那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？

对于var的使用：

我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
其实是JavaScript在设计之初的一种语言缺陷；
当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；
但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；

对于let、const：

对于let和const来说，是目前开发中推荐使用的；
我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

3.模板字符串

3.1 模板字符串的基本使用

之前我们有简单使用过模板字符串, 模板字符串是ES6新增的, 现在我们来详细学习一下

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

首先，我们会使用 “ 符号来编写字符串，称之为模板字符串；
其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

使用方法:

动态嵌入内容

const name = "kaisa";
const age = 18;

console.log(`my name is ${name}, my age is ${age}`); // my name is kaisa, my age is 18

拼接表达式

const age = 18;

console.log(`我是成年人吗? ${age >= 18 ? '是' : '不是'}`) // 我是成年人吗? 是

接收函数的返回值

function foo() {
  return "foo";
}

console.log(`my function is ${foo()}`); // my function is foo()

3.2 模板字符串的高阶使用

模板字符串还有另外一种用法：标签模板字符串（Tagged Templat Literals）。

我们一起来看一个普通的JavaScript的函数：

function foo(...args) {
  console.log("参数", args)
}

foo("kaisa", 18, 1.88) // 参数 ['kaisa', 18, 1.88]

如果我们使用标签模板字符串调用函数，并且在调用的时候插入其他的变量：

模板字符串被拆分了；
第一个元素是数组，是被模块字符串拆分的字符串组合；
后面的元素是一个个模块字符串传入的内容变量；

const name = "kaisa"
const age = 18
const height = 1.88

function foo(...args) {
  console.log("参数", args)
}

foo`my name is ${name}, age is ${age}, height is ${height}` // 参数 [Array(4), 'kaisa', 18, 1.88]
// 数组中存放的是 0: "my name is " 1: ", age is " 2: ", height is " 3: ""

4.ES6函数的增强

4.1 函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

传入了参数，那么使用传入的参数；
没有传入参数，那么使用一个默认值；

而在ES6中，我们允许给函数的参数一个默认值：

// x的默认值为20 y的默认值为30
function foo(x = 20, y = 30) {
  console.log(x, y);
}

foo(); // 20 30
foo(10, 50); // 10 50

默认参数的补充:

有默认值的参数, 我们通常会将其放到参数最后（在很多语言中，如果不放到最后其实会报错的）：
- 但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；
- 如果参数中还有剩余参数, 那么默认参数放在剩余参数的前面;

另外默认值会改变函数的length的个数，有默认值的参数, 以及后面的参数都不计算在length之内了。

function foo(x, y) {
  console.log(x, y);
}

console.log(foo.length); // 2

function foo(x = 20, y) {
  console.log(x, y);
}

console.log(foo.length); // 0

默认值也可以和解构一起来使用：

写法一:

function foo({ name, age } = { name: "kaisa", age: 18 }) {
  console.log(name, age);
}
foo(); // kaisa 18

写法二:

function foo({ name = "kaisa", age = 18 } = {}) {
  console.log(name, age);
}
foo(); // kaisa 18

4.2 函数的剩余参数(回顾)

前面已经讲过了函数的剩余参数, 这里简单回顾一下

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

function foo(x, y, ...args) {
  console.log(x, y); // 10 20
  console.log(args); // [30, 40, 50, 60]
}
foo(10, 20, 30, 40, 50, 60);

剩余参数和arguments有什么区别呢？

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；

注意：剩余参数必须放到最后一个位置，否则会报错。

4.3 箭头函数的补充

在前面我们已经学习了箭头函数的用法:

前面我们有讲过, 箭头函数不绑定this、arguments、super参数；

这里我们对箭头函数进行一些补充：

箭头函数是没有显式原型prototype的，所以不能作为构造函数，使用new来创建对象；

const foo = () => {};

// 箭头函数隐式原型指向Function的显式原型
console.log(foo.__proto__ === Function.prototype); // true
// 箭头函数没有显式原型
console.log(foo.prototype); // undefined

4.4 展开语法

展开语法的基本使用：

在函数调用时使用；

const names = ["aaa", "bbb", "ccc", "ddd", "eee"];

function foo(arg, ...args) {
  console.log(arg, args);
}

foo(...names); // aaa (4) ['bbb', 'ccc', 'ddd', 'eee']

// 展开语法也可以展开字符串
const str = "Hello"

function foo(arg, ...args) {
  console.log(arg, args);
}

foo(...str); // H (4) ['e', 'l', 'l', 'o']

在数组构造时使用；

const names = ["aaa", "bbb", "ccc"];
const newNames = [...names, "ddd", "eee"]
console.log(newNames) // ['aaa', 'bbb', 'ccc', 'ddd', 'eee']

在构建对象字面量时，也可以使用展开运算符，这个是在ES2018==（ES9）==中添加的新特性

const obj = {
  name: "kaisa",
  age: 18
}

const info = {
  ...obj,
  height: 1.88,
  address: "成都市"
}

console.log(info) // {name: 'kaisa', age: 18, height: 1.88, address: '成都市'}

注意：展开运算符其实是一种浅拷贝；

5.数值的表示

在ES6中规范了二进制、八进制和十六进制的写法:

// 十进制
const num1 = 100
// 二进制
const num2 = 0b100
// 八进制
const num3 = 0o100
// 十六进制
const num4 = 0x100

另外在ES2021新增特性：数字过长时，可以使用_作为连接符

const num5 = 100_000_000

6.Symbol数据类型

6.1 Symbol的基本使用

Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。

那么为什么需要Symbol呢？

在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；
比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？
比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；

Symbol就是为了解决上面的问题，用来生成一个独一无二的值。

Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；

也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；

const s1 = Symbol();

const obj = {
  [s1]: "aaa",
};
console.log(obj); // {Symbol(): 'aaa'}

Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；
```
const s1 = Symbol();
const s2 = Symbol()

console.log(s1 === s2); // false
```

6.2 Symbol作为属性名

我们通常会使用Symbol在对象中表示唯一的属性名, 将Symbol值作为属性名, 我们有以下几种写法:

写法一: 属性名赋值

const s1 = Symbol();
const s2 = Symbol();
const obj = {};

obj[s1] = "aaa";
obj[s2] = "bbb";

写法二: 定义字面量直接使用

const s1 = Symbol();
const s2 = Symbol();
const obj = {
  [s1]: "aaa",
  [s2]: "bbb"
};

写法三: Object.defineProperty

const s1 = Symbol();
const s2 = Symbol();
const obj = {};

Object.defineProperty(obj, s1, {
  value: "aaa",
});

Object.defineProperty(obj, s2, {
  value: "bbb",
});

获取Symbol对应的key

我们获取对象的key的方法, 无法获取Symbol的key

const s1 = Symbol();
const s2 = Symbol();
const obj = {
  name: "kaisa",
  age: 18,
  [s1]: "aaa",
  [s2]: "bbb",
};
console.log(Object.keys(obj)); // ['name', 'age']

如果想要获取Symbol对应的key, 可以通过Object.getOwnPropertySymbols()方法

const s1 = Symbol();
const s2 = Symbol();
const obj = {
  name: "kaisa",
  age: 18,
  [s1]: "aaa",
  [s2]: "bbb",
};
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(), Symbol()]

6.3 相同值的Symbol

前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？

我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；
```
const s1 = Symbol("这是描述");
console.log(s1.description);
```

我们可以使用**Symbol.for(key)**方法来做到创建相同的Symbol；

// 如果传入相同的key, 通过Symbol.for可以生成相同的Symbol值
const s1 = Symbol.for("abc");
const s2 = Symbol.for("abc");

console.log(s1 === s2); // true

并且我们可以通过Symbol.keyFor方法来获取对应的key；

const s1 = Symbol.for("abc");
const s2 = Symbol.for("abc");

console.log(Symbol.keyFor(s1)); // abc

7.Set/Map数据结构

7.1 Set基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象。

在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
```
const set = new Set();
console.log(set); // Set(0) {size: 0}
```

我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

const set = new Set();
//添加元素
set.add(10);
set.add(10);
set.add(20);
console.log(set); // Set(2) {10, 20}

应用: 数组去重

const arr = [10, 20, 20, 30, 30, 40];
const set = new Set(arr);
console.log(set); // Set(4) {10, 20, 30, 40}
// 再将set转为数组
console.log(Array.from(set)); // (4) [10, 20, 30, 40]

7.2 Set常见方法

Set常见的属性：

size：返回Set中元素的个数；

const arr = [10, 20, 20, 30, 30, 40];
const set = new Set(arr);
console.log(set.size); // 4

Set常用的方法：

add(value)：添加某个元素，返回Set对象本身；

const set = new Set();
set.add(10);
set.add(20);
console.log(set); // Set(2) {10, 20}

delete(value)：从set中删除和这个值相等的元素，返回boolean类型；

const set = new Set();
set.add(10);
set.add(20);
set.delete(10);
console.log(set); // Set(1) {20}

has(value)：判断set中是否存在某个元素，返回boolean类型；

const set = new Set();
set.add(10);
set.add(20);
console.log(set.has(10)); // true

clear()：清空set中所有的元素，没有返回值；

const set = new Set();
set.add(10);
set.add(20);
set.clear()
console.log(set); // Set(0) {size: 0}

forEach(callback, [, thisArg])：通过forEach遍历set；

const set = new Set();
set.add(10);
set.add(20);
set.forEach( item => console.log(item)); // 10 20

set也支持for…of

const set = new Set();
set.add(10);
set.add(20);
for (item of set) {
  console.log(item); // 10 20
}

7.3 WeakSet使用(了解)

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。

那么和Set有什么区别呢？

区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

WeakSet常见的方法：

add(value)：添加某个元素，返回WeakSet对象本身；
delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

7.4 WeakSet应用(了解)

注意：WeakSet不能遍历

因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能在遍历的时候, 元素已经被销毁掉了。
所以存储到WeakSet中的对象是没办法获取的；

那么这个东西有什么用呢？

7.5 Map基本使用

另外一个新增的数据结构是Map，用于存储映射关系。

**但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？其实对象存储映射有以下局限性: **

事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；

某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候在对象中, 会自动将对象转成字符串来作为key；

const info1 = { name: "why" };
const info2 = { age: 18 };

const obj = {
  [info1]: "aaaa",
  [info2]: "bbbb",
};

console.log(obj); // {[object Object]: 'bbbb'}

那么我们就可以使用Map：

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");

// 使用对象作为key
console.log(map); // Map(2) {{…} => 'aaaa', {…} => 'bbbb'}

7.6 Map常用方法

Map常见的属性:

size: 返回Map中元素的个数

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
console.log(map.size);

Map常见的方法：

set(key, value)：在Map中添加或者设置key、value，并且返回整个Map对象；

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");

console.log(map); // Map(2) {{…} => 'aaaa', {…} => 'bbbb'}

get(key)：根据key获取Map中的value；

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");

console.log(map.get(info1)); // aaaa

has(key)：判断是否包括某一个key，返回Boolean类型；

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");

console.log(map.has(info1)); // true

delete(key)：根据key删除一个键值对，返回Boolean类型；

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");
map.delete(info2);

console.log(map); // Map(1) {{…} => 'aaaa'}

clear()：清空所有的元素；

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");
map.clear();

console.log(map); // Map(0) {size: 0}

forEach(callback, [, thisArg])：通过forEach遍历Map, 获取的是对应的value；

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");

map.forEach(item => console.log(item)); // aaaa bbbb

Map也可以通过for…of进行遍历, for…of遍历, 直接拿到的是将key和value组成的数组

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");

for (item of map) {
  console.log(item); // [{…}, 'aaaa'] [{…}, 'bbbb']
}

如果想通过for…of拿到分开的key和value, key配合解构

const info1 = { name: "why" };
const info2 = { age: 18 };

const map = new Map();
map.set(info1, "aaaa");
map.set(info2, "bbbb");

for (item of map) {
  const [key, value] = item;
  console.log(key, value); // {name: 'why'} 'aaaa' {age: 18} 'bbbb'
}

7.6 WeakMap使用

和Map类型类似的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。

那么和Map有什么区别呢？

区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；

区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

const weakMap = new WeakMap();
// Invalid value used as weak map key
weakMap.set(1, "abc");
// Invalid value used as weak map key
weakMap.set("aaa", "abc");

WeakMap常见的方法有四个：

set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；

WeakMap的应用:

注意：WeakMap也是不能遍历的
没有forEach方法，也不支持通过for…of的方式进行遍历；

那么我们的WeakMap有什么作用呢？（后续专门讲解）

后面vue响应式原理中会涉及到, 后续详细讲解

8.ES6其他知识点说明

事实上ES6（ES2015）是一次非常大的版本更新，所以里面重要的特性非常多：

除了前面讲到的特性外还有很多其他特性；

Proxy、Reflect，我们会在后续专门进行学习。

并且会利用Proxy、Reflect来讲解Vue3的响应式原理

Promise，用于处理异步的解决方案

后续会详细学习；
并且会学习如何手写Promise；

ES Module模块化开发：

从ES6开发，JavaScript可以进行原生的模块化开发；
这部分内容会在工程化部分学习；
包括其他模块化方案：CommonJS、AMD、CMD等方案；
什么区别呢？
区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；

区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

const weakMap = new WeakMap();
// Invalid value used as weak map key
weakMap.set(1, "abc");
// Invalid value used as weak map key
weakMap.set("aaa", "abc");