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

ECMAScript 6.0（如下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言能够用来编写复杂的大型应用程序，成为企业级开发语言。

整理下ES6的新特性，具体用法不详细描述，只做为总结概括

一、let 和 const 命令

• 使用let声明的变量能够从新赋值,可是不能在同一做用域内从新声明
• 使用const声明的变量必须赋值初始化,可是不能在同一做用域类从新声明也没法从新赋值

二、变量的解构赋值

• 数组的解构赋值
• 对象的解构赋值
• 字符串的解构赋值
• 数值和布尔值的解构赋值
• 函数参数的解构赋值
• 圆括号问题

三、字符串的扩展

• 字符的 Unicode 表示法
• 字符串的遍历器接口
• 直接输入 U+2028 和 U+2029
• JSON.stringify() 的改造
• 模板字符串
• 实例：模板编译
• 标签模板
• 模板字符串的限制

四、字符串的新增方法

• String.fromCodePoint()：从 Unicode 码点返回对应字符
• String.raw()：返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，每每用于模板字符串的处理方法。
• codePointAt()：可以正确处理 4 个字节储存的字符，返回一个字符的码点。
• normalize()：用来将字符的不一样表示方法统一为一样的形式，这称为 Unicode 正规化。
• includes(), startsWith(), endsWith()：是否包含、在头部、在尾部
• repeat()：返回一个新字符串，表示将原字符串重复n次。
• padStart()，padEnd()：补全头部、尾部
• trimStart()，trimEnd()：消除头部、尾部空格
• matchAll()：返回一个正则表达式在当前字符串的全部匹配

五、正则的扩展

• RegExp 构造函数
• 字符串的正则方法
• u 修饰符
• RegExp.prototype.unicode 属性
• y 修饰符
• RegExp.prototype.sticky 属性
• RegExp.prototype.flags 属性
• s 修饰符：dotAll 模式
• 后行断言
• Unicode 属性类
• 具名组匹配
• String.prototype.matchAll

六、数值的扩展

• 二进制和八进制表示法
• Number.isFinite(), Number.isNaN()
• Number.parseInt(), Number.parseFloat()
• Number.isInteger()
• Number.EPSILON
• 安全整数和 Number.isSafeInteger()
• Math 对象的扩展
• 指数运算符

七、函数的扩展

• 函数参数的默认值
• rest 参数
• 严格模式
• name 属性
• 箭头函数
• 尾调用优化
• 函数参数的尾逗号

八、数组的扩展

• 扩展运算符
• Array.from()
• Array.of()
• copyWithin()
• find() 和 findIndex()
• fill()
• entries()，keys() 和 values()
• includes()
• flat()，flatMap()
• 数组的空位

九、对象的扩展

• 属性的简洁表示法
• 属性名表达式
• 方法的 name 属性
• 属性的可枚举性和遍历
• super 关键字
• 对象的扩展运算符

十、对象的新增方法

• Object.is()
• Object.assign()
• Object.getOwnPropertyDescriptors()
• __proto__属性，Object.setPrototypeOf()，Object.getPrototypeOf()
• Object.keys()，Object.values()，Object.entries()
• Object.fromEntries()

十一、Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型

十二、Set 和 Map 数据结构

ES6中新的数据结构Set：它相似于数组，可是成员的值都是惟一的，没有重复的值。

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

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

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

ES6中Map数据结构：相似于对象，也是键值对的集合，可是“键”的范围不限于字符串，各类类型的值（包括对象）均可以看成键。

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

若是你须要“键值对”的数据结构，Map比Object更合适。

1三、Proxy

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

1四、Reflect

• Reflect对象与Proxy对象同样，也是 ES6 为了操做对象而提供的新 API。
• 将Object对象的一些明显属于语言内部的方法（好比Object.defineProperty），放到Reflect对象上。
• 修改某些Object方法的返回结果，让其变得更合理。
• 让Object操做都变成函数行为。
• Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。

1五、Promise 对象

 Promise 是异步编程的一种解决方案，能够将异步操做以同步操做的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操做更加容易。

缺点：

• 没法取消Promise，一旦新建它就会当即执行，没法中途取消。
• 若是不设置回调函数，Promise内部抛出的错误，不会反应到外部。
• 当处于pending状态时，没法得知目前进展到哪个阶段（刚刚开始仍是即将完成）。

1六、Iterator 和 for...of 循环

遍历器（Iterator）针对四种数据集合【数组（Array）和对象（Object），ES6 又添加了Map和Set】，提供一种接口，为各类不一样的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就能够完成遍历操做（即依次处理该数据结构的全部成员）。

Iterator 的做用有三个：

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

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

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

1七、Generator 函数的语法

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数彻底不一样。

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

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

1八、Generator 函数的异步应用

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

 

1九、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方法指定下一步的操做。

20、Class 的基本语法

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

2一、Class 的继承

 Class 能够经过extends关键字实现继承，子类必须在constructor方法中调用super方法，必须先经过父类的构造函数完成塑造，获得与父类一样的实例属性和方法，获得this对象

2二、Module 的语法

ES6 在语言标准的层面上，实现了模块功能，并且实现得至关简单，彻底能够取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

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

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

一个模块就是一个独立的文件。该文件内部的全部变量，外部没法获取。若是你但愿外部可以读取模块内部的某个变量，就必须使用export关键字输出该变量。

2三、Module 的加载实现

浏览器加载 ES6 模块，也使用<script>标签，可是要加入type="module"属性。

浏览器对于带有type="module"的<script>，都是异步加载，不会形成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。