ES6知识点整理

什么是 ECMA和ECMAScript

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会, 这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该 组织改名为 Ecma 国际。
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

为什么要重点学习 ES6

• ES6 的版本变动内容最多, 具有里程碑意义
• ES6 加入许多新的语法特性, 编程实现更简单、高效
• ES6 是前端发展趋势, 就业必备技能
• 实际上ES系列的知识点基本上都要掌握,才能写出逼格更高的代码

ECMASript 6 新特性

表达式：声明、解构赋值
内置对象：字符串扩展、数值扩展、对象扩展、数组扩展、函数扩展、正则扩展、Symbol、Set、Map、Proxy、Reflect
语句与运算：Class、Module、Iterator
异步编程：Promise、Generator、Async

ES6 let 与 const

let 是在代码块内有效，var 是在全局范围内有效
let 只能声明一次 var 可以声明多次
for 循环计数器很适合用 let
let 不存在变量提升，var 会变量提升，例子如下：

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

ES6 解构赋值

解构赋值是对赋值运算符的扩展

ES6 Symbol

ES6 数据类型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ，还新增了 Symbol 。


Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。
Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

ES6 Map 与 Set

Map 对象：Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
对 Map 进行遍历，以下两个最高级：①for…of，②forEach()
Map 对象的操作：①Map 与 Array的转换，②Map 的克隆，③Map 的合并

Set 对象：Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
类型转换：Set与 Array的转换
Set 对象作用：数组的①去重，②并集，③交集，④差集

补充：
Set 结构的实例有以下属性。

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。

Set 结构的实例有四个遍历方法，可以用于遍历成员。

Set.prototype.keys()：返回键名的遍历器
Set.prototype.values()：返回键值的遍历器
Set.prototype.entries()：返回键值对的遍历器
Set.prototype.forEach()：使用回调函数遍历每个成员

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

WeakSet 的成员只能是对象
WeakSet 中的对象都是弱引用

const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}

Map 结构的实例有以下属性和操作方法。

size 属性：size属性返回 Map 结构的成员总数。
Map.prototype.set(key, value)：set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
Map.prototype.get(key)：get方法读取key对应的键值，如果找不到key，返回undefined。
Map.prototype.has(key)：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
Map.prototype.delete(key)：delete方法删除某个键，返回true。如果删除失败，返回false。
Map.prototype.clear()：clear方法清除所有成员，没有返回值。

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

Map.prototype.keys()：返回键名的遍历器。
Map.prototype.values()：返回键值的遍历器。
Map.prototype.entries()：返回所有成员的遍历器。
Map.prototype.forEach()：遍历 Map 的所有成员。

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。
WeakMap的键名所指向的对象，不计入垃圾回收机制

WeakRef
WeakRef 实例对象有一个deref()方法，如果原始对象存在，该方法返回原始对象；如果原始对象已经被垃圾回收机制清除，该方法返回undefined。弱引用对象的一大用处，就是作为缓存，未被清除时可以从缓存取值，一旦清除缓存就自动失效。

let target = {};
let wr = new WeakRef(target);

let obj = wr.deref();
if (obj) { // target 未被垃圾回收机制清除
  // ...
}

ES2021 引入了清理器注册表功能 FinalizationRegistry，用来指定目标对象被垃圾回收机制清除以后，所要执行的回调函数。

const registry = new FinalizationRegistry(heldValue => {
  // ....
});

ES6 Reflect 与 Proxy

Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
Proxy：一个 Proxy 对象由两个部分组成： target 、 handler 。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。

Reflect设计的目的是为了优化Object的一些操作方法以及合理的返回Object操作返回的结果，对于一些命令式的Object行为，Reflect对象可以将其变为函数式的行为。
Reflect：ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上（当前某些方法会同时存在于 Object 和 Reflect 对象上），未来的新方法会只部署在 Reflect 对象上。

ES6 字符串

includes()：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
repeat()：返回新的字符串，表示将字符串重复指定次数返回。
padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。
trimStart()：返回新的字符串，消除字符串头部的空格
trimEnd()：返回新的字符串，消除尾部的空格。
matchAll()：返回一个正则表达式在当前字符串的所有匹配。
replaceAll()：返回一个新字符串，可以一次性替换所有匹配。

ES6 数值

ES6提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。
ES6还引入了两个相关的常量值：Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER。前者表示JavaScript中的最大安全整数，即2的53次方 - 1，而后者表示最小安全整数，即 - （2的53次方 - 1）。
Number.isSafeInteger() 测试传递的值是否是一个安全整数
Number.isFinite() 方法检测有限的数值（有穷的数值）
Number.isNaN() 检测一个值是不是NaN
Number.parseInt() 隐式类型的转换
Number.parseFloat() 类型的转换会保留浮点数
Number.isInteger() 检测一个值是否为整数
Number.EPSILON：一个极小的常量，误差如果小于这个值，就可以认为已经没有意义了，即不存在误差了。

Math 对象的扩展
ES6 在 Math 对象上新增了 17 个数学相关的静态方法，这些方法只能在 Math 中调用。
Math.trunc()方法用于去除一个数的小数部分，返回整数部分。
Math.sign()方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。
Math.min()用于确定一组数值中的最小值。Math.max()用于确定一组数值中的最大值。
Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；
Math.random()方法返回介于0到1之间一个随机数，不包括0和1;
Math.abs(num)，返回num的绝对值。

以下是个人感觉比较少用的，有兴趣的可以了解一下：
Math.cbrt()方法用于计算一个数的立方根。
Math.clz32()方法将参数转为 32 位无符号整数的形式，然后返回这个 32 位值里面有多少个前导 0。
Math.imul()方法返回两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。
Math.fround()方法返回一个数的32位单精度浮点数形式。
Math.hypot()方法返回所有参数的平方和的平方根。
Math.expm1(x)返回 ex - 1，即Math.exp(x) - 1。
Math.log1p(x)方法返回1 + x的自然对数，即Math.log(1 + x)。如果x小于-1，返回NaN。
Math.log10(x)返回以 10 为底的x的对数。如果x小于 0，则返回 NaN。
Math.log2(x)返回以 2 为底的x的对数。如果x小于 0，则返回 NaN。

Math.sinh(x) 返回x的双曲正弦（hyperbolic sine）
Math.cosh(x) 返回x的双曲余弦（hyperbolic cosine）
Math.tanh(x) 返回x的双曲正切（hyperbolic tangent）
Math.asinh(x) 返回x的反双曲正弦（inverse hyperbolic sine）
Math.acosh(x) 返回x的反双曲余弦（inverse hyperbolic cosine）
Math.atanh(x) 返回x的反双曲正切（inverse hyperbolic tangent）

BigInt 数据类型：ES2020 引入了一种新的数据类型 BigInt（大整数），来解决不适合进行科学和金融方面的精确计算问题，这是 ECMAScript 的第八种数据类型。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。

ES6 运算符

ES2016 新增了一个指数运算符（**）。

2 ** 2 // 4
2 ** 3 // 8

// 相当于 2 ** (3 ** 2)
2 ** 3 ** 2
// 512
let a = 1.5;
a **= 2;
// 等同于 a = a * a;

let b = 4;
b **= 3;
// 等同于 b = b * b * b;

ES2020 引入了“链判断运算符”（optional chaining operator）?.

a?.b
// 等同于
a == null ? undefined : a.b

a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()

ES2020 引入了一个新的 Null 判断运算符??。默认值只有在左侧属性值为null或undefined时，才会生效。

const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

ES2021 引入了三个新的逻辑赋值运算符（logical assignment operators），这三个运算符||=、&&=、??=相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。
辑运算符与赋值运算符进行结合。

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

ES6 对象

补充：

1. ES6 一共有 5 种方法可以遍历对象的属性。
   （1）for…in
   for…in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
   （2）Object.keys(obj)
   Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
   （3）Object.getOwnPropertyNames(obj)
   Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
   （4）Object.getOwnPropertySymbols(obj)
   Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。
   （5）Reflect.ownKeys(obj)
   Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
   以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

2. ES6 提出“Same-value equality”（同值相等）算法，Object.is()用来解决这个问题。
   +0 === -0 //true
   NaN === NaN // false

   Object.is(+0, -0) // false
   Object.is(NaN, NaN) // true

3. 克隆：Object.assign、…扩展运算符、JSON.parse(JSON.stringify( obj ))、_.cloneDeep( obj )、structuredClone( obj )

4. ES5 的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象（descriptor）。ES2017 引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。因为Object.assign()无法正确拷贝get属性和set属性的问题。所以引入该方法，配合Object.defineProperties()方法，就可以实现正确拷贝。

5. __proto__属性，Object.setPrototypeOf()，Object.getPrototypeOf()。该属性没有写入 ES6 的正文，而是写入了附录，原因是__proto__前后的双下划线，说明它本质上是一个内部属性，而不是一个正式的对外的 API，只是由于浏览器广泛支持，才被加入了 ES6。因此，无论从语义的角度，还是从兼容性的角度，都不要使用这个属性，而是使用下面的Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）、Object.create()（生成操作）代替。

6. Object.keys()，Object.values()，Object.entries()，Object.fromEntries() 。
   Object.keys返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
   Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
   Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
   Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。

ES6 数组

数组创建：

转换可迭代对象：

扩展的方法
扩展运算符：扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。可以替代函数的 apply 方法。
替换copyWithin()：将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
查找find()：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
查找findIndex()：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素位置。
填充fill()：将一定范围索引的数组元素内容填充为单个指定的值。
遍历entries()遍历键值对。keys()遍历键名。values()遍历键值。
包含includes()：数组是否包含指定值。
flat()：用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
flatMap()：方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

ES6 函数

补充：

1. 不定参数，即是rest参数。ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
   下面是一个 rest 参数代替arguments变量的例子：

   // arguments变量的写法
   function sortNumbers() {
   return Array.from(arguments).sort();
   }

   // rest参数的写法
   const sortNumbers = (…numbers) => numbers.sort();

2. 箭头函数有几个使用注意点。
   （1）箭头函数没有自己的this对象（详见下文）。
   （2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
   （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
   （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
   

ES6 迭代器

Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：
迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。
迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。
可迭代的数据结构，以下是可迭代的值:Array，String，Map，Set，Dom元素（正在进行中）。

ES6 Class 类

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function。

ES6 模块

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化分为导出（export） @与导入（import）两个模块。
以下为它的特点：
ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

promise，Generator函数，async函数区别与理解

Promise，就是一个对象，用来传递异步操作的消息，避免了层层嵌套的回调函数。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的API，可供进一步处理。
（1）对象的状态不受外界影响。有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
缺点：
无法取消Promise，一旦新建它就会执行，无法中途取消
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。
Generator 函数组成：①在 function 后面，函数名之前有个 * ；②函数内部有 yield 表达式。
函数返回的遍历器对象的方法：next 方法，return 方法，yield* 表达式

async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。
简单的说async函数就相当于自执行的Generator函数，相当于自带一个状态机，在await的部分等待返回， 返回后自动执行下一步。而且相较于Promise,async的优越性就是把每次异步返回的结果从then中拿到最外层的方法中，不需要链式调用，只要用同步的写法就可以了。更加直观而且，更适合处理并发调用的问题。

此ES6知识点整理中，后面几个知识点讲的比较泛，强烈建议每个知识点单独查资料理解学习，或者去看一下阮一峰的《ECMAScript 6 入门教程》——ES6 入门教程