ECMASript 6 新特性

第 1 章 ECMASript 相关介绍

1.1.什么是 ECMA

1.2.什么是 ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

1.3.什么是 ECMA-262

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看
http://www.ecma-international.org/publications/standards/Standard.htm

1.4.ECMA-262 历史

ECMA-262（ECMAScript）历史版本查看网址
http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

注：从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1

1.5.谁在维护 ECMA-262

TC39（Technical Committee 39）是推进 ECMAScript 发展的委员会。其会员都是
公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39 定期
召开会议，会议由会员公司的代表与特邀专家出席

1.6.为什么要学习 ES6

⚫ ES6 的版本变动内容最多，具有里程碑意义
⚫ ES6 加入许多新的语法特性，编程实现更简单、高效
⚫ ES6 是前端发展趋势，就业必备技能

1.7.ES6 兼容性

http://kangax.github.io/compat-table/es6/ 可查看兼容性

第 2 章 ECMASript 6 新特性

2.1.let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1. 不允许重复声明
2. 块儿级作用域
3. 不存在变量提升
4. 不影响作用域链
   应用场景：以后声明变量使用 let 就对了

2.2. const 关键字

const 关键字用来声明常量，const 声明有以下特点

1. 声明必须赋初始值
2. 标识符一般为大写
3. 不允许重复声明
4. 值不允许修改
5. 块儿级作用域
   注意: 对象属性修改和数组元素变化不会出发 const 错误
   应用场景：声明对象类型使用 const，非对象类型声明选择 let

2.3.变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称
为解构赋值。

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

2.4.模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

1. 字符串中可以出现换行符
2. 可以使用 ${xxx} 形式输出变量

let str = `<ul>
         <li>沈腾</li>
         <li>玛丽</li>
         <li>魏翔</li>
         <li>艾伦</li>
       </ul>`;
// 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;

注意：当遇到字符串与变量拼接的情况使用模板字符串

2.5.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这
样的书写更加简洁。

注意：对象简写形式简化了代码，所以以后用简写就对了

2.6.箭头函数

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适

2.7. rest 参数

2.8. spread 扩展运算符

扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

2.9.Symbol

2.9.1.Symbol 基本使用

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

1. Symbol 的值是唯一的，用来解决命名冲突的问题
2. Symbol 值不能与其他数据进行运算
3. Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可 以 使 用
   Reflect.ownKeys 来获取对象的所有键名
   

注: 遇到唯一性的场景时要想到 Symbol

2.9.2.Symbol 内置值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

2.10. 迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提
供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

2.11. 生成器

2.12. Promise

2.13. Set

2.14. Map

2.15. class 类

2.16. 数值扩展

2.16.1. 二进制和八进制

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。

2.16.2. Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的
Number.isNaN() 用来检查一个值是否为 NaN

2.16.3. Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。

2.16.4. Math.trunc

用于去除一个数的小数部分，返回整数部分。

2.16.5. Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

2.17. 对象扩展

2.18. 模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

2.18.1. 模块化的好处

2.18.2. 模块化规范产品

2.18.3. ES6 模块化语法

第 3 章 ECMASript 7 新特性

3.1.Array.prototype.includes

Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

3.2.指数操作符

在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同

第 4 章 ECMASript 8 新特性

4.1.async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样

4.1.1.async 函数

1. async 函数的返回值为 promise 对象，
2. promise 对象的结果由 async 函数执行的返回值决定

4.1.2.await 表达式

1. await 必须写在 async 函数中
2. await 右侧的表达式一般为 promise 对象
3. await 返回的是 promise 成功的值
4. await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

4.2.Object.values 和 Object.entries

1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组
2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

4.3.Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

第 5 章 ECMASript 9 新特性

5.1.Rest/Spread 属性

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，
在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

5.2.正则表达式命名捕获组

5.3.正则表达式反向断言

5.4.正则表达式 dotAll 模式

第 6 章 ECMASript 10 新特性

6.1.Object.fromEntries

6.2.trimStart 和 trimEnd

6.3.Array.prototype.flat 与 flatMap

6.4.Symbol.prototype.description

第 7 章 ECMASript 11 新特性

7.1.String.prototype.matchAll

7.2.类的私有属性

7.3.Promise.allSettled

7.4.可选链操作符

7.5.动态 import 导入

7.6.globalThis 对象