一、理解ES6
ES6是ECMAScript 6.0的简称，也被称为ES2015。它是ECMAScript的第六个版本，是JavaScript标准的下一个重大更新。ES6于2015年6月发布，新增了许多新的语言特性和API，包括箭头函数、let和const关键字、模板字符串、解构赋值、展开运算符、类、模块化等等。ES6的新增特性让JavaScript语言更加强大和灵活，同时也让开发者编写代码更加的简便和高效。因此，学习和掌握ES6对于提高JavaScript编程能力和开发效率是非常重要的。
二、理解ECMAScript
JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。这也有利于这门语言的开放和中立。
三、浏览器可以直接使用ES6语法吗？
大部分现代浏览器已经支持ES6语法，但是一些旧版本的浏览器可能不支持或只支持部分ES6语法特性。为了确保兼容性，您可以使用Babel等工具将ES6代码转换为ES5代码，以便在旧版本的浏览器上运行。
四、ES6环境搭建，步骤
1、安装 Node.js：ES6 是在 Node.js 环境下运行的，因此需要先安装 Node.js。可以从官网下载对应平台的 Node.js 安装包进行安装。
2、安装 Babel：Babel 可以将 ES6 的代码转换成浏览器或者 Node.js 理解的代码，因此需要安装 Babel。可以使用以下命令进行安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
3、 创建 Babel 配置文件：在项目的根目录下创建一个名为 .babelrc 的文件，并添加以下内容：
{
"presets": ["@babel/preset-env"]
}
4、创建项目目录结构：创建一个名为 src 的文件夹，在其中添加一个名为 index.js 的文件，用于存放 ES6 代码。
5、编写 ES6 代码：在 index.js 文件中编写 ES6 代码。
6、使用 Babel 转换代码：在命令行中使用以下命令将 ES6 代码转换为浏览器或者 Node.js 可以理解的代码：
npx babel src --out-dir dist
其中，src 表示源代码目录，dist 表示编译后的代码目录。
在浏览器或者 Node.js 中运行编译后的代码：将编译后的代码复制到浏览器或者 Node.js 中运行即可。
webpack打包转换es6_Webpack 杂篇_Airbnb爱彼迎的博客-CSDN博客
五、声明与表达式
|----|-------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 序号 | 声明表达式 |||
| 1 | let 与 const | let命令 | 基本用法 |
| 2 | let 与 const | let命令 | 代码块内有效 |
| 3 | let 与 const | let命令 | 不能重复声明 |
| 4 | let 与 const | let命令 | 迭代计数使用 |
| 5 | let 与 const | let命令 | 无变量提升 |
| 6 | let 与 const | const命令 | 基本用法 |
| 7 | let 与 const | const命令 | 暂时性死区 |
| 8 | let 与 const | const命令 | 注意要点 |
| 9 | 解构赋值 | 概述 | ES6 的解构赋值是一种快速方便地从数组或对象中提取数据并赋值给变量的语法。它可以让我们将复杂数据结构拆解成简单的变量。 |
| 10 | 解构赋值 | 数组模型的结构 | let [a, b, c] = [1, 2, 3]; let [a, b, c = 4] = [1, 2]; |
| 11 | 解构赋值 | 对象模型的结构 | let {name, age} = {name: 'Tom', age: 20}; let {name = 'Tom', age = 20} = {name: 'Jack'}; let {name, age, scores: [math, english]} = {name: 'Tom', age: 20, scores: [80, 90]}; |
| 12 | 解构赋值 | 注意要点 | |
| 13 | 解构赋值 | 常见用法 | |
| 14 | Symbol | 概述 | ES6 中新增了一种基本数据类型：Symbol。它是一种原始数据类型，用于表示独一无二的值，可以用来作为对象的属性名。 |
| 15 | Symbol | 基本用法 | // 定义一个Symbol值 let s = Symbol(); console.log(s); // 输出：Symbol() // 同一个文本描述的Symbol值是不同的 let s1 = Symbol('foo'); let s2 = Symbol('foo'); console.log(s1 === s2); // 输出：false Symbol内置的 Symbol 值在一些新的语言特性（如 for...of 循环、async/await）中有广泛应用。 |
| 16 | Symbol | 使用场景 | 作为属性名 // Symbol 值可以作为对象属性名使用 let obj = {}; let s = Symbol(); obj[s] = 'value'; console.log(obj[s]); // 输出：valu |
| 17 | Symbol | 使用场景 | 定义常量 |
| 18 | Symbol | Symbol.for() | Symbol.for()是一个静态方法，可以创建并访问全局共享的symbol。当调用Symbol.for()时，会检查全局symbol注册表中是否已经存在具有给定键（字符串）的symbol。如果存在，则直接返回该symbol。如果不存在，则创建一个具有给定键并添加到全局注册表中的新symbol，然后返回该symbol。 const key1 = Symbol.for('myKey'); const key2 = Symbol.for('myKey'); console.log(key1 === key2); // true 在这个例子中，我们使用相同的键（'myKey'）两次调用Symbol.for()。第一次调用创建了一个新的具有该键的symbol，并将其添加到全局注册表中，而第二次调用则直接返回之前创建的同一个symbol。因此，key1和key2相等，console.log语句的输出为true。 当需要创建全局共享的symbol或在代码的不同部分访问已经创建的symbol时，Symbol.for()会非常有用。 |
| 19 | Symbol | Symbol.keyFor() | ES6 的 Symbol.keyFor() 方法返回一个已注册的 Symbol 类型值的字符串键。它接受一个Symbol类型值作为参数，并在全局 Symbol 注册表中搜索该值，如果找到则返回该 Symbol 对应的键值（即字符串），否则返回 undefined。这个方法与 Symbol.for() 相反，该方法是通过已知符号返回符号的键，而 Symbol.for() 则是通过键返回符号。使用 Symbol.keyFor() 方法可以方便的找到一个 Symbol 对应的键，这在代码维护和调试时非常有用。 |
| 20 | Symbol | Symbol.iterator() | 用来表示一个对象是否可迭代 |
| 21 | Symbol | Symbol.asyncIterator() | 用来表示一个对象是否可异步迭代 |
六、内置对象
|----|----|---------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 序号 | 内置对象 ||||
| 1 | 新增 | Map与Set | Map对象 | Map中的Key |
| 2 | 新增 | Map与Set | Map对象 | Map迭代 |
| 3 | 新增 | Map与Set | Map对象 | Map对象的操作 |
| 4 | 新增 | Map与Set | Set对象 | 类型转换 |
| 5 | 新增 | Map与Set | Set对象 | Set对象的作用 |
| 6 | 新增 | Map与Set | Map与Set对象属性与方法 ||
| 7 | 新增 | Proxy与Reflect | 概述 | |
| 8 | 新增 | Proxy与Reflect | 基本用法 | Proxy |
| 9 | 新增 | Proxy与Reflect | 基本用法 | Reflect |
| 10 | 新增 | Proxy与Reflect | 基本用法 | 组合使用 |
| 11 | 新增 | Proxy与Reflect | 使用场景拓展 | |
| 12 | 拓展 | 字符串 | 拓展的方法 | 子串的识别 |
| 13 | 拓展 | 字符串 | 拓展的方法 | 字符串重复 |
| 14 | 拓展 | 字符串 | 拓展的方法 | 字符串补全 |
| 15 | 拓展 | 字符串 | 模板字符串 | 基本用法 |
| 16 | 拓展 | 字符串 | 模板字符串 | 注意要点 |
| 17 | 拓展 | 字符串 | 模板字符串 | 标签模板 |
| 18 | 拓展 | 数值 | 数值的表示 | |
| 19 | 拓展 | 数值 | 常量 | |
| 20 | 拓展 | 数值 | 方法 | |
| 21 | 拓展 | 数值 | Math对象的拓展 | |
| 22 | 拓展 | 对象 | 对象字面量 | |
| 23 | 拓展 | 对象 | 对象的拓展运算符 | |
| 24 | 拓展 | 对象 | 对象的新方法 | assign |
| 25 | 拓展 | 对象 | 对象的新方法 | is |
| 26 | 拓展 | 数组 | 数组的创建 | 1、Array.of() // 将参数中所有值作为元素形成数组 2、Array.from() // 将类数组对象或可迭代对象转化为数组 3、转换map 4、转化set 5、转换字符串 |
| 27 | 拓展 | 数组 | 拓展的方法 | 1、find() // 查找数组中符合条件的元素，返回第一个 2、findIndex() // 查找数组中符合条件的第一个元素的索引 3、fill() // 填充，将一定范围索引的数组元素内容填充为单个指定的值 3、copyWithin // 将一定范围索引的数组元素修改为此数组另一指定范围索引的元素 4、entries // 遍历键值对 5、keys // 遍历键名 6、values // 遍历键值 7、includes // 数组是否包含指定值 8、flat // 嵌套数组转唯一数组 9、flatMap // 先对数组中每个元素进行了的处理，再对数组执行 flat() 方法 |
| 28 | 拓展 | 数组 | 数组缓冲区 | 1、数组缓冲区是内存中的一段地址 2、定型数组的基础 3、实际字节数在创建时确定，之后只可修改其中的数据，不可修改大小 4、可以通过构造函数创建数组缓冲区 |
| 29 | 拓展 | 数组 | 定型数组 | 1、数组缓冲区的特定类型的视图 2、可以强制使用特定的数据类型，而不是使用通用的 DataView 对象来操作数组缓冲区 |
| 30 | 拓展 | 数组 | 拓展运算符 | let arr = [1, 2] arr1 = [...arr] console.log(arr1) // [1, 2] |
七、运算符与语句
|----|--------|-----------------|----------------------------|
| 序号 | 运算符与语句 |||
| 1 | 函数 | 函数参数的拓展 | 默认参数 |
| 2 | 函数 | 函数参数的拓展 | 不定参数 |
| 3 | 函数 | 箭头函数 | 基本用法 |
| 4 | 函数 | 箭头函数 | 注意要点 |
| 5 | 函数 | 箭头函数 | 适合使用的场景 |
| 6 | 函数 | 箭头函数 | 不适合使用的场景 |
| 7 | 迭代器 | iterator | 迭代过程 |
| 8 | 迭代器 | iterator | 可迭代的数据结构 |
| 9 | 迭代器 | iterator | 普通对象不可迭代 |
| 10 | 迭代器 | for ... of 循环 | 迭代常规数据类型 |
| 11 | 迭代器 | for ... of 循环 | 可迭代的数据结构 |
| 12 | 迭代器 | for ... of 循环 | let、const、和var用于for ... of |
| 13 | class类 | 概述 | |
| 14 | class类 | 基本用法 | 类定义 |
| 15 | class类 | 基本用法 | 类的主体 |
| 16 | class类 | 基本用法 | 类的实例化 |
| 17 | class类 | decorator | 类装饰 |
| 18 | class类 | decorator | 方法修饰 |
| 19 | class类 | 封装与继承 | get/setter |
| 20 | class类 | 封装与继承 | extends |
| 21 | class类 | 封装与继承 | super |
| 22 | class类 | 封装与继承 | 注意要点 |
| 23 | 模块 | 概述 | |
| 24 | 模块 | 特点 | |
| 25 | 模块 | export 与 import | 基本用法 |
| 26 | 模块 | export 与 import | as的用法 |
| 27 | 模块 | export 与 import | import 命令的特点 |
| 28 | 模块 | export 与 import | export default命令 |
| 29 | 模块 | 复合使用 | |
八、异步编程
|----|----------------------------------------------------------------------------------------------------------------------------------------------|-----------|----------|
| 异步编程 ||||
| 1 | Promise ES6：promise简单学习_snow@li的博客-CSDN博客 | 概述 | |
| 2 | Promise ES6：promise简单学习_snow@li的博客-CSDN博客 | Promise状态 | 特点 |
| 3 | Promise ES6：promise简单学习_snow@li的博客-CSDN博客 | Promise状态 | 缺点 |
| 4 | Promise ES6：promise简单学习_snow@li的博客-CSDN博客 | then方法 | 特点 |
| 5 | Promise ES6：promise简单学习_snow@li的博客-CSDN博客 | then方法 | 注意点 |
| 6 | Generator | 基本用法 | 函数组成 |
| 7 | Generator | 基本用法 | 执行机制 |
| 8 | Generator | 基本用法 | 返回的方法 |
| 9 | Generator | 基本用法 | yield表达式 |
| 10 | Generator | 使用场景 | |
| 11 | async | async | 语法 |
| 12 | async | async | 返回值 |
| 13 | async | await | 语法 |
| 14 | async | await | 返回值 |
| 15 | async | 错误处理 | |
| 16 | async | 注意要点 | |
| 17 | async | 实例 | |
九、实践
十、过程记录
十一、欢迎交流指正，关注我，一起学习
十二参考链接
ES6：flat()_es6 flat_snow@li的博客-CSDN博客
ES6：promise简单学习_snow@li的博客-CSDN博客
https://www.cnblogs.com/anding/p/16890716.html
Object.assign详解_guxin_duyin的博客-CSDN博客