前端知识总结--ES6新特性

1、let 和 const 命令
使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值
2、变量的解构赋值
数组的解构赋值
对象的解构赋值
字符串的解构赋值
数值和布尔值的解构赋值
函数参数的解构赋值
圆括号问题
3、字符串的扩展
字符的 Unicode 表示法
字符串的遍历器接口
直接输入 U+2028 和 U+2029
JSON.stringify() 的改造
模板字符串
实例：模板编译
标签模板
模板字符串的限制
4、字符串的新增方法
String.fromCodePoint()：从 Unicode 码点返回对应字符
String.raw()：返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。
codePointAt()：能够正确处理 4 个字节储存的字符，返回一个字符的码点。
normalize()：用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化。
includes(), startsWith(), endsWith()：是否包含、在头部、在尾部
repeat()：返回一个新字符串，表示将原字符串重复n次。
padStart()，padEnd()：补全头部、尾部
trimStart()，trimEnd()：消除头部、尾部空格
matchAll()：返回一个正则表达式在当前字符串的所有匹配

5、数值的扩展
二进制和八进制表示法
Number.isFinite(), Number.isNaN()
Number.parseInt(), Number.parseFloat()
Number.isInteger()
Number.EPSILON
安全整数和 Number.isSafeInteger()
Math 对象的扩展
指数运算符
6、函数的扩展
函数参数的默认值
rest 参数
严格模式
name 属性
箭头函数
尾调用优化
函数参数的尾逗号
7、数组的扩展
扩展运算符
Array.from()
Array.of()
copyWithin()
find() 和 findIndex()
fill()
entries()，keys() 和 values()
includes()
flat()，flatMap()
数组的空位
8、对象的扩展
属性的简洁表示法
属性名表达式
方法的 name 属性
属性的可枚举性和遍历
super 关键字
对象的扩展运算符
9、对象的新增方法
Object.is()
Object.assign()
Object.getOwnPropertyDescriptors()
__proto__属性，Object.setPrototypeOf()，Object.getPrototypeOf()
Object.keys()，Object.values()，Object.entries()
Object.fromEntries()

10、Set 和 Map 数据结构
ES6中新的数据结构Set：它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构。

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

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
ES6中Map数据结构：类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。

如果你需要“键值对”的数据结构，Map比Object更合适。

11、Proxy
Proxy 在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。可以拦截目标对象的任意属性

12、Reflect
Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。
将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。
修改某些Object方法的返回结果，让其变得更合理。
让Object操作都变成函数行为。
Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。
15、Promise 对象
Promise 是异步编程的一种解决方案，可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

缺点：

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
13、Iterator 和 for…of 循环
遍历器（Iterator）针对四种数据集合【数组（Array）和对象（Object），ES6 又添加了Map和Set】，提供一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：

一是为各种数据结构，提供一个统一的、简便的访问接口；

二是使得数据结构的成员能够按某种次序排列；

三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费。

14、Generator 函数的语法
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

语法上，Generator 函数是一个状态机，封装了多个内部状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

15、Generator 函数的异步应用
整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。

16、async 函数
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。它就是 Generator 函数的语法糖。

async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

async函数对 Generator 函数的改进，体现在以下四点：

（1）内置执行器。

调用函数就会自动执行，输出最后结果。完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

（2）更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

17、Class 的基本语法
class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

18、Class 的继承
Class 可以通过extends关键字实现继承，子类必须在constructor方法中调用super方法，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，得到this对象

19、Module 的语法
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

19、Module 的加载实现
浏览器加载 ES6 模块，也使用

浏览器对于带有type="module"的