ES6~ES12

解构Destructuring

ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。我们可以划分为：数组的解构和对象的解构。

数组的解构：

基本解构过程
顺序解构
解构出数组
默认值

对象的解构：

基本解构过程
任意顺序
重命名
默认值

解构的应用场景 解构目前在开发中使用是非常多的： 1.比如在开发中拿到一个变量时，自动对其进行解构使用； 2.比如对函数的参数进行解构；

let/const基本使用

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

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

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

const关键字：

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

==注意：另外let、const不允许重复声明变量==

let/const作用域提升 let、const和var的另一个重要区别是作用域提升： 1.我们知道var声明的变量是会进行作用域提升的； 2.但是如果我们使用let声明的变量，在声明之前访问会报错；

那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？ 1.事实上并不是这样的，我们可以看一下ECMA262对let和const的描述； 2.这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；

let/const有没有作用域提升呢？ 从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？

事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解； 1.作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升； 2.在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；

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

Window对象添加属性 我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：但是let、const是不会给window上添加任何属性的。

那么我们可能会想这个变量是保存在哪里呢？我们先回顾一下最新的ECMA标准中对执行上下文的描述

变量被保存到VariableMap中 也就是说我们声明的变量和环境记录是被添加到变量环境中的： 1.但是标准有没有规定这个对象是window对象或者其他对象呢？ 2.其实并没有，那么JS引擎在解析的时候，其实会有自己的实现； 3.比如v8中其实是通过VariableMap的一个hashmap来实现它们的存储的。 4.那么window对象呢？而window对象是早期的GO对象，在最新的实现中其实是浏览器添加的全局对象，并且一直保持了window和var之间值的相等性；

var的块级作用域 在我们前面的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。

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

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

但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：这是因为引擎会对函数的声明进行特殊的处理，允许像var那样进行提升；

块级作用域的应用 来看一个实际的案例：获取多个按钮监听点击使用let或者const来实现：

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

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

字符串模板基本使用

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

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

标签模板字符串使用 模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。我们一起来看一个普通的JavaScript的函数：

如果我们使用标签模板字符串，并且在调用的时候插入其他的变量： 1.模板字符串被拆分了； 2.第一个元素是数组，是被模块字符串拆分的字符串组合； 3.后面的元素是一个个模块字符串传入的内容

函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求： 1.传入了参数，那么使用传入的参数； 2.没有传入参数，那么使用一个默认值；

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

函数默认值的补充 默认值也可以和解构一起来使用：

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

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

函数的剩余参数 ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

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

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

展开语法 展开语法(Spread syntax)： 1.可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开； 2.还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；

展开语法的场景： 1.在函数调用时使用； 2.在数组构造时使用； 3.在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性； ==注意：展开运算符其实是一种浅拷贝；==

数值的表示 在ES6中规范了二进制和八进制的写法：

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

Symbol的基本使用

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

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

Symbol就是为了解决上面的问题，用来生成一个独一无二的值。 1.Symbol值是通过Symbol函数来生成的，生成后可以作为属性名； 2.也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；

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

我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；

Symbol作为属性名 我们通常会使用Symbol在对象中表示唯一的属性名：

相同值的Symbol 前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？ 1.我们可以使用Symbol.for方法来做到这一点； 2.并且我们可以通过Symbol.keyFor方法来获取对应的key；

Set的基本使用

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

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

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

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

Set的常见方法 Set常见的属性： size：返回Set中元素的个数；

Set常用的方法： add(value)：添加某个元素，返回Set对象本身； pdelete(value)：从set中删除和这个值相等的元素，返回boolean类型； phas(value)：判断set中是否存在某个元素，返回boolean类型； pclear()：清空set中所有的元素，没有返回值； pforEach(callback, [, thisArg])：通过forEach遍历set； ==另外Set是支持for of的遍历的。==

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

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

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

WeakSet的应用 ==注意：WeakSet不能遍历== 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。所以存储到WeakSet中的对象是没办法获取的；

那么这个东西有什么用呢？事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；

Map的基本使用

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

但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？ 1.事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）； 2.某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；

那么我们就可以使用Map：

Map的常用方法 Map常见的属性： size：返回Map中元素的个数

Map常见的方法： 1.set(key, value)：在Map中添加key、value，并且返回整个Map对象； 2.get(key)：根据key获取Map中的value； 3.has(key)：判断是否包括某一个key，返回Boolean类型； 4.delete(key)：根据key删除一个键值对，返回Boolean类型； 5.clear()：清空所有的元素； 6.forEach(callback, [, thisArg])：通过forEach遍历Map；

Map也可以通过for of进行遍历。

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

那么和Map有什么区别呢？区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

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有什么作用呢？

ES7

Array Includes 在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。

在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。

–指数(乘方) exponentiation运算符 在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。在ES7中，增加了 ** 运算符，可以对数字来计算乘方

ES8

Object values 之前我们可以通过 Object.keys 获取一个对象所有的key，在ES8中提供了 Object.values 来获取所有的value值：

Object entries 通过Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。

String Padding 某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。我们简单具一个应用场景：比如需要对身份证、银行卡的前面位数进行隐藏：

Trailing Commas 在ES8中，我们允许在函数定义和调用时多加一个逗号：

Object Descriptors ES8中增加了另一个对对象的操作是 Object.getOwnPropertyDescriptors ，这个在之前已经讲过了，这里不再重复

ES9

Async iterators：后续迭代器讲解 Object spread operators：前面讲过了 Promise finally：后续讲Promise讲解

ES10

flat flatMap flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。注意一：flatMap是先进行map操作，再做flat的操作；注意二：flatMap中的flat相当于深度为1；

Object fromEntries 在前面，我们可以通过 Object.entries 将一个对象转换成 entries，那么如果我们有一个entries了，如何将其转换成对象呢？ES10提供了 Object.formEntries来完成转换：

那么这个方法有什么应用场景呢？

trimStart trimEnd 去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？ ES10中给我们提供了trimStart和trimEnd；

ES11

在早期的JavaScript中，我们不能正确的表示过大的数字：大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。

那么ES11中，引入了新的数据类型BigInt，用于表示大的整数： BitInt的表示方法是在数值的后面加上n

Nullish Coalescing Operator ES11，Nullish Coalescing Operator增加了空值合并操作符：

Optional Chaining 可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁：

Global This 在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的：比如在浏览器中可以通过this、window来获取； p比如在Node中我们需要通过global来获取

那么在ES11中对获取全局对象进行了统一的规范：globalThis

for..in标准化 在ES11之前，虽然很多浏览器支持for...in来遍历对象类型，但是并没有被ECMA标准化。在ES11中，对其进行了标准化，for...in是用于遍历对象的key的：

ES12

FinalizationRegistry FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。 FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 finalizer ）; 你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;

WeakRefs 如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：如果我们希望是一个弱引用的话，可以使用WeakRef；

logical assignment operators

es6-es12