手把手带你学习 JavaScript 的 ES6 ~ ESn
文章目录
一、引言
JavaScript 是一种广泛使用的网络编程语言，它在前端开发中扮演着重要角色。随着时间的推移，JavaScript 的版本不断更新，新的功能和语法不断涌现，使得这门语言更加丰富和强大。ES6~ESn 是指 JavaScript 的版本6到版本n（例如ES7、ES8等），这些新版本为我们带来了许多新的特性和功能。本文将介绍如何学好 JavaScript 的 ES6~ESn，更好地掌握这门语言的最新版本。
二、了解 ES6~ESn 的新特性
学习 JavaScript 的 ES6~ESn，首先需要了解它们的新特性。以下是 ES6~ESn 的一些重要新特性：
- let 和 const 关键字：ES6 引入了块级作用域的变量声明，let 和 const 可以用来声明变量或常量。let 可以重新赋值，而 const 用于声明常量，不可以重新赋值。
- 箭头函数：ES6 引入了箭头函数，它是一个更加简洁的函数语法。箭头函数没有自己的 this 值，它会继承外层作用域的 this 值。
- 模块化：ES6 引入了模块化语法，通过 import 和 export 关键字可以实现模块的导入和导出。
- Promise：ES6 引入了 Promise，它是一个异步编程的方式，可以方便地处理异步操作。
- Generator：ES6 引入了 Generator，它可以将函数内部的执行状态保存下来，以便在后续的调用中恢复执行状态。
- Class：ES6 引入了 Class，它是一种更加直观的面向对象编程的方式。
- Proxy 和 Reflect：ES6 引入了 Proxy 和 Reflect，它们可以用来操作对象和函数的行为。
- 新数据结构：ES6 引入了新的数据结构，如 Map、Set、WeakMap、WeakSet 等。
- Spread Operator：ES7 引入了 Spread Operator（…），它可以将数组或对象展开到函数的参数列表中。
- Async/Await：ES8 引入了 Async/Await，它可以使异步代码看起来像同步代码，提高了代码的可读性和可维护性。
了解 ES6~ESn 的新特性是学习它们的第一步，这有助于理解这些版本与之前版本的差异以及它们能够为我们带来什么。接下来，我们需要掌握这些新特性的用法和实现原理。
三、掌握 ES6~ESn 的用法和实现原理
学习 JavaScript 的 ES6~ESn，需要掌握它们的用法和实现原理。以下是掌握 ES6~ESn 用法和实现原理的一些建议：
- 阅读官方文档：官方文档是学习 JavaScript 的最佳资源之一。通过阅读官方文档，可以了解 ES6~ESn 的语法、用法和实现原理。
- 编写代码实践：学习 ES6~ESn 的最好方法是多写代码实践。尝试使用新的语法和特性编写代码，并理解它们的优点和适用场景。
- 学习 Babel：Babel 是一个 JavaScript 编译器，它可以将 ES6~ESn 的代码转换为 ES5 的代码，以便在老版本的浏览器上运行。学习 Babel 可以更好地理解 ES6~ESn 的实现原理。
- 学习编译器原理：了解 JavaScript 编译器的原理可以更好地理解 ES6~ESn 的语法和实现原理。可以阅读一些关于编译器原理的书籍或在线教程。
- 学习 WebAssembly：WebAssembly 是一种新的代码格式，它可以提高网页的性能和可扩展性。学习 WebAssembly 可以更好地理解 JavaScript 的发展方向和未来趋势。
四、深入挖掘和拓展
通过了解 ES6~ESn 的新特性、掌握它们的用法和实现原理，可以更好地使用 JavaScript 以下是一些深入挖掘和拓展的经验帮助更好地掌握新特性：
- 持续学习和实践：JavaScript 的发展是不断进步的，新的版本和特性不断涌现。保持学习和实践是掌握最新版本的关键。尝试使用新的语法和特性编写代码，并理解它们的优点和适用场景。
- 参与开源项目：通过参与开源项目，可以了解其他开发者是如何使用 ES6~ESn 的特性的，同时也可以通过贡献代码来加深对 ES6~ESn 的理解。
- 阅读源代码：阅读 JavaScript 库或框架的源代码可以更好地理解这些工具是如何使用 ES6~ESn 的特性来实现功能的，同时也可以学习到一些最佳实践。
- 学习其他编程语言：学习其他编程语言可以更好地理解 JavaScript 的语法和特性，同时也可以了解其他编程语言中的优秀特性和实践。
- 参与社区讨论：参与社区讨论可以了解其他开发者对 ES6~ESn 的看法和经验，同时也可以解决遇到的问题。。
《深入理解现代JavaScript》
编辑推荐
JavaScript是一门快速发展的语言，对于有经验的开发人员来说，如要掌握所有新添加的特性，可能会面临挑战。本书不仅会带你探索世界上语言的新特性，而且会向你展示如何跟踪这门语言的后续发展。本书首先介绍将新特性添加到 JavaScript 的流程，包括这个流程是如何管理的，以及由谁来管理；随后深入详细地描述每个新特性或者有调整的旧特性，并阐述示例用法、可能的陷阱；本书还将提供专业意见，教你使用新特性代替旧用法。
内容简介
主要内容涵盖ES2015~ES2020中JavaScript的所有新特性以及下一版的预览。
探索新的语法：空值合并、可选链、let和const、类语法、私有方法、私有字段、new.target、数字分隔符、BigInt、解构、默认参数、箭头函数、异步函数、await、生成器函数、…(rest和spread操作符)、模板字面量、二进制和八进制字面量、**(求幂运算符)、计算属性/方法名、for-of、for-await-of、属性的简写语法等。
详细介绍新特性和模式：模块、Promise、迭代、生成器、Symbol、代理、反射、类型化数组、Atomics、共享内存、WeakMap、WeakSet等。
揭示常见的陷阱并阐述如何避免它们。
展示如何跟进和参与JavaScript的改进流程。
介绍如何在新特性获得广泛支持之前使用它们。
作者简介
T. J. Crowder是一位拥有30年经验的软件工程师。在他的整个职业生涯中，他至少有一半时间是在使用JavaScript从事开发工作。他经营着软件承包和产品公司Farsight Software。他经常在Stack Overflow上为人们提供帮助，他是十大贡献者之一和JavaScript标签的顶级贡献者。当他不工作或写作时，他总是与他美丽的、支持他的妻子和出色的儿子共度美好时光。
精彩书评
纵观ECMAScript的历史，ES6版本的推出无疑是前端历史的转折点。ES6引入类的概念、块级作用域、解构等特性，让JavaScript语言蜕变成为企业级的开发语言。现代浏览器对ES6的支持已经接近98%，因此ES6的新语法可以直接在浏览器中运行，前端同学大可将ES5的兼容支持从编译器中移走。ES2015后续版本的新特性，JavaScript也在逐渐实现。而对于JavaScript早期版本的学习者和使用者，有大量知识点需要汰换更新。这本书正好切中了这点，除了详细介绍ES2015~ES2020的新特性，以及新特性提案产生的原因，还对比了新旧做法。非常及时的一本书，推荐阅读。
——蒲松洋(花名秦粤) 阿里前端标准化负责人，TC39成员，《Serverless入门课》作者
从ES6开始，JavaScript的语言特性面临爆发式增长，其新特性的数量足以新造一门语言。对我们这一代老程序员来说，比起自己研究规范，当然还是希望有本不但系统介绍新特性，还带最佳实践的书了，不过考虑到语言的发展速度，希望每年都出这么一本书。
——程劭非(winter) 开课吧Web教学首席顾问，前阿里巴巴高级技术专家
对于ES新特性，上会有风险，不上也会有后顾之忧。如今，很多ES新特性都已成为事实上的标准，因此，不管大家是否愿意学习和使用，我们都需要直面这个问题。这本书基本覆盖了ES2015~ES2020之间的核心特性，是JavaScript相关开发者必备的书籍。作者是值得信赖的T.J.Crowder，他积极参与了TC39的很多提案。从内容上看，这本书也是非常专业的，它浅显易懂，在必要的点上又能深入浅出，是不可多得的一本好书，推荐。
——桑世龙(花名狼叔) Node.js布道者，《狼书》作者
这是一本全面又深入地介绍 ES2015~ES2020的专业书籍，讲解了新时代的前端应该怎样编写优雅又高效的JavaScript 代码。不少初学者面对这些新特性时不知道如何下手，这本书提供了丰富的例子和文档集合，帮助你提升自己的编码技巧，非常推荐！
——付强(小爝) 新浪移动前端负责人
ECMAScript 自从 ES6 之后，以年为单位的版本发布让新特性的落地明显加快了步伐。这本书从顶向下分解 ECMAScript，从新特性背景出发，详解特性设计，以及在各种具体场景中如何使用新特性获得更易读、更健壮的代码，帮助读者快速起手这些新工具。这本书绝对不容错过。
——吴成忠(花名昭朗) Node.js Core Collaborator，TC39代表
在大数据与可视化领域，Python与JavaScript并称前后端构建的两大利器。Python由于网上资料与API的丰富性、规范性，自学至熟练难度尚可。JavaScript自上世纪末诞生以来，历经多版规范，近年来又随着Web热潮急速进化，新的框架与标准层出不穷，初学者往往止步不前。这本书的原作者为国际顶级软件系统开发者，其译者亦在互联网业界沉淀多年，前端功力深厚、经验丰富。这本书详述了近5年JavaScript语言的新发展、新应用，实为前端爱好者、工程师、大数据交互系统研究者的福音，故隆重推荐。
——时磊 北京航空航天大学计算机学院教授，中国可视化与可视分析大会论文主席
前端开发是需要终生学习的，需要程序员真正做到活到老学到老。JavaScript更是一种极具活力的语言，也是一种常用常新的语言。讲解JavaScript基础的书虽然很多，但是，能够与时俱进地介绍JavaScript新特性的书籍却不多。这本书几乎涵盖了ES2015~ES2020的所有新特性，以及一些目前处在阶段3的新特性，给出了丰富的实例来帮助读者理解。这本书浅显易懂，并经常将新特性与之前的语法特性进行对比。即使是对JavaScript不了解的同学，也可通过本书迅速上手，并对前端开发产生兴趣和成就感。这是你成为JavaScript高手的必备书籍之一。
——马剑竹 北京大学人工智能研究院副教授
目录
第1章 ES2015~ES2020及后续版本的
新特性 1
1.1 名称、定义和术语 2
1.1.1 Ecma？ECMAScript？TC39? 2
1.1.2 ES6？ES7？ES2015？ES2020？ 2
1.1.3 JavaScript“引擎”、浏览器及其他 3
1.2 什么是“新特性” 3
1.3 新特性的推动流程 5
1.3.1 谁负责 5
1.3.2 流程 5
1.3.3 参与 6
1.3.4 跟上新特性的步伐 7
1.4 旧环境中使用新特性 8
1.5 本章小结 12
第2章 块级作用域声明：let和const 13
2.1 let和const的介绍 13
2.2 真正的块级作用域 14
2.3 重复声明将抛出错误 15
2.4 提升和暂时性死区 15
2.5 一种新的全局变量 17
2.6 const：JavaScript的常量 19
2.6.1 const基础 19
2.6.2 常量引用的对象仍然是可变的 20
2.7 循环中的块级作用域 21
2.7.1 “循环中的闭包”问题 21
2.7.2 绑定：变量、常量以及其他
标识符的工作方式 23
2.7.3 while和do-while循环 27
2.7.4 性能影响 28
2.7.5 循环块中的const 29
2.7.6 for-in循环中的const 29
2.8 旧习换新 30
2.8.1 用const或let替代var 30
2.8.2 缩小变量的作用域 30
2.8.3 用块级作用域替代匿名函数 30
第3章 函数的新特性 33
3.1 箭头函数和this、super等词法 34
3.1.1 箭头函数语法 34
3.1.2 箭头函数和this词法 37
3.1.3 箭头函数不能被用作构造函数 38
3.2 默认参数值 38
3.2.1 默认值是表达式 39
3.2.2 默认值在自己的作用域中被计算 40
3.2.3 默认值不会增加函数的arity 42
3.3 “rest”参数 42
3.4 参数列表和函数调用中的
尾后逗号 44
3.5 函数的name属性 45
3.6 在语句块中声明函数 46
3.6.1 在语句块中声明函数：标准语义 48
3.6.2 在语句块中声明函数：
传统Web语义 49
3.7 旧习换新 51
3.7.1 使用箭头函数替代各种访问this
值的变通方式 51
3.7.2 在不使用this或arguments时，
回调函数使用箭头函数 52
3.7.3 考虑在更多地方使用箭头函数 52
3.7.4 当调用者需要控制this的值时，
不要使用箭头函数 53
3.7.5 使用参数默认值，而不是
代码实现 53
3.7.6 使用“rest”参数替代arguments
关键字 53
3.7.7 如有必要，考虑使用尾后逗号 53
第4章 类 55
4.1 类的概念 55
4.2 介绍新的类语法 56
4.2.1 添加构造函数 57
4.2.2 添加实例属性 59
4.2.3 添加原型方法 59
4.2.4 添加静态方法 61
4.3 添加访问器属性 61
4.4 对比新语法和旧语法 64
4.5 创建子类 66
4.6 关键字super 69
4.6.1 编写子类构造函数 69
4.6.2 继承和访问超类原型的属性和
方法 70
4.6.3 继承静态方法 73
4.6.4 静态方法中的super 75
4.6.5 返回新实例的方法 75
4.6.6 内置对象的子类 79
4.6.7 super的使用 81
4.7 移除Object.prototype 83
4.8 new.target 84
4.9 类声明与类表达式 87
4.9.1 类声明 87
4.9.2 类表达式 88
4.10 更多内容 89
4.11 旧习换新 89
第5章 对象的新特性 91
5.1 可计算属性名 91
5.2 属性的简写语法 92
5.3 获取和设置对象原型 93
5.3.1 Object.setPrototypeOf 93
5.3.2 浏览器环境中的__proto__属性 94
5.3.3 浏览器环境中的__proto__字面量
属性名 94
5.4 对象方法的简写语法，以及类
之外的super 95
5.5 Symbol 97
5.5.1 定义Symbol的原因 97
5.5.2 创建和使用Symbol 99
5.5.3 Symbol并不用于私有属性 99
5.5.4 全局Symbol 100
5.5.5 内置的Symbol值 103
5.6 对象的新增方法 104
5.6.1 Object.assign 104
5.6.2 Object.is 105
5.6.3 Object.values 105
5.6.4 Object.entries 106
5.6.5 Object.fromEntries 106
5.6.6 Object.getOwnPropertySymbols 106
5.6.7 Object.getOwnPropertyDescriptors 106
5.7 Symbol.toPrimitive 107
5.8 属性顺序 109
5.9 属性扩展语法 110
5.10 旧习换新 111
5.10.1 创建对象时对动态变量使用可
计算属性名 111
5.10.2 从同名变量初始化对象时，
使用简写语法 111
5.10.3 使用Object.assign替代自定义的
扩展方法或者显式复制所有
属性 112
5.10.4 基于已有对象创建新对象时，
使用属性扩展语法 112
5.10.5 使用Symbol避免属性名冲突 112
5.10.6 使用Object.getPrototypeOf/
setPrototypeOf替代__proto__ 112
5.10.7 使用对象方法的简写语法来
定义对象中的方法 112
第6章 可迭代对象、迭代器、for-of循环、
可迭代对象的展开语法和
生成器 115
第18章 即将推出的类特性 435
18.1 公有和私有的类字段、方法和
访问器 435
18.1.1 公有字段(属性)定义 436
18.1.2 私有字段 440
18.1.3 私有实例方法和访问器 446
18.1.4 公有静态字段、私有静态字段和
私有静态方法 450
18.2 旧习换新 452
18.2.1 使用属性定义，而不是在构造
函数中创建属性(在适当的
情况下) 452
18.2.2 使用私有类字段，而不是前缀
(在适当的情况下) 453
18.2.3 使用私有方法(而不是类外的
函数)进行私有操作 453
第19章 展望未来 457
19.1 顶层await 458
19.1.1 概述和用例 458
19.1.2 示例 459
19.1.3 错误处理 463
19.2 WeakRef和清理回调 464
19.2.1 WeakRef 464
19.2.2 清理回调 466
19.3 正则表达式匹配索引 471
19.4 String.prototype.replaceAll 472
19.5 Atomics的asyncWait方法 472
19.6 其他语法微调 473
19.6.1 数字分隔符 473
19.6.2 支持hashbang 474
19.7 废弃旧的正则表达式特性 474
19.8 感谢阅读 475
附录 出色的特性及对应的章
(向J.K. Rowling致歉) 477
前言/序言
如果你是JavaScript(或TypeScript)开发人员，并且想了解在过去几年中被添加到JavaScript的最新特性，以及如何在语言不断发展的过程中掌握新动态，那么《深入理解现代JavaScript》适用于你。只要你努力寻找，并对你信任的网站持谨慎态度，就几乎可以在网上找到《深入理解现代JavaScript》中的所有内容；《深入理解现代JavaScript》提供了所有的技术细节，同时告诉你如何跟踪不断发生的变化。
《深入理解现代JavaScript》内容
下面是每一章的内容概览。
第1章，ES2015~ES2020及后续版本的新特性——首先介绍JavaScript世界中的各种角色和一些重要的术语；然后描述“新特性”在《深入理解现代JavaScript》中的定义，以及将新特性添加到JavaScript的流程，包括这个流程是如何管理的，由谁管理，以及如何跟踪和参与这一流程；最后介绍一些在旧环境中使用新特性所需的工具(或在当前环境中使用最新特性所需的工具)。
第2章，块级作用域声明：let和const——涵盖新的声明关键字let和const以及它们支持的新作用域，深入介绍循环中的作用域，重点说明for循环中作用域的处理。
第3章，函数的新特性——涵盖与函数有关的各种新特性：箭头函数、默认参数值、“rest”参数、name属性和其他的语法改进。
第4章，类——涵盖新的class特性：基本概念、子类、super、创建内置对象(如Array和Error)的子类，以及new.target特性。私有字段和其他处于提案流程中的特性将在第18章介绍。
第5章，对象的新特性——涵盖可计算属性名、属性的简写语法、获取和设置对象的原型、新的Symbol类型以及它与对象的关系、方法语法、属性顺序、属性的展开语法，以及大量新的对象方法。
第6章，可迭代对象、迭代器、for-of循环、可迭代对象的展开语法和生成器——涵盖迭代(一种强大的用于集合和列表的新工具)，以及生成器(一种强大的与函数交互的新方式)。
第7章，解构——涵盖解构这一重要的新语法，以及如何使用它从对象、数组和其他可迭代对象中提取数据，该章包含默认值、嵌套提取等语法。
第8章，Promise——深入研究这个用于处理异步过程的重要新工具。
第9章，异步函数、迭代器和生成器——详细介绍新的async/await语法(它允许你在异步代码中使用熟悉的逻辑流结构)，以及异步迭代器和生成器的工作方式，还有新的for-await-of循环。
第10章，模板字面量、标签函数和新的字符串特性——描述模板字面量语法、标签函数和许多新的字符串特性，如更好的Unicode支持、常见方法的更新以及很多新方法。
第11章，新数组特性、类型化数组——涵盖很多新的数组方法、各种已有方法的更新、类型化数组(如Int32Array)以及与类型化数组数据交互的高级特性。
第12章，Map和Set——介绍所有新的有键集合Map和Set，以及这些集合的“弱”版本WeakMap和WeakSet。
第13章，模块——深入了解这个令人兴奋且强大的代码组织方式。
第14章，反射和代理——涵盖Reflect和Proxy对象的强大动态元编程特性以及它们之间的关系。
第15章，正则表达式更新——描述过去几年正则表达式出现的所有更新，如新的标志、命名捕获组、反向预查和新的Unicode特性。
第16章，共享内存——涵盖JavaScript程序中有关跨线程共享内存的复杂而棘手的方面，其中包括SharedArrayBuffer和Atomics对象、基本概念和陷阱注释。
第17章，其他特性——涵盖很多不适合放到其他章节的新特性：BigInt、新的整数字面量语法(二进制、新的八进制)、省略catch 绑定的异常、新的 Math 方法、取幂运算符、Math对象的扩展、尾递归优化、空值合并、可选链，以及出于兼容性原因而定义的“规范附录B”(仅浏览器)特性。
第18章，即将推出的类特性——描述在提案流程中处于阶段3的类的增强特性：公有字段声明、私有字段和私有方法。
第19章，展望未来——最后，描述目前正在进行的一些改进：顶层await、WeakRef和清理回调、正则表达式匹配索引、Atomics.asyncWait、一些新的语法特性、旧的正则表达式特性，以及各种即将推出的标准库扩展。
附录，出色的特性及对应的章(向J. K. Rowling致歉)——提供新特性的列表，并指出每个特性所属的章节。这些列表包括：按字母顺序排列的特性，新的基础知识，新的语法、关键字、运算符、循环等，新的字面量形式，标准库的扩展和更新，以及其他特性。
《深入理解现代JavaScript》读者对象
《深入理解现代JavaScript》的读者应该：
● 至少对JavaScript有基本的了解。
● 想了解过去几年中增加的新特性。
这不是一本为专家编写的学术书籍，而是一本面向JavaScript开发人员的实用性书籍。
几乎所有拿起《深入理解现代JavaScript》的人都知道书中的一些内容，但几乎没有人拿起这本书时就已经知道了所有内容。也许你已经清楚let和const的基础知识，但是还没有完全掌握async函数。也许Promise对你来说已经是旧语法了，但你在一些现代代码中看到了一些不认识的语法。你可以在《深入理解现代JavaScript》中找到ES2015~ES2020(及后续版本)的所有新特性。
如何使用《深入理解现代JavaScript》
建议先阅读第1章。第1章定义了《深入理解现代JavaScript》其余部分使用的很多术语。如果跳过第1章，你很可能会在阅读《深入理解现代JavaScript》时遇到困难。
之后，你可以选择按顺序阅读各章，或者跳着阅读。
我以这样的顺序安排各章内容是有原因的，而且每个章节都与前面章节息息相关。例如，第8章介绍的Promise，对于理解第9章中的async函数很重要。当然，建议你按照我安排的顺序阅读《深入理解现代JavaScript》。不过我敢肯定，你是一个有自己想法的聪明人，如果你不按照顺序阅读，也没关系。
建议你阅读(或者至少略读)所有的章节(第16章可能除外，稍后再谈这个问题)。即使你认为自己已了解某个特性，也可能不知道或者只是认为自己知道书中的一些内容。例如，也许你打算跳过第2章，因为你已经知道关于let和const的所有知识。你甚至知道为什么下面的代码创建了10个不同的变量i：
for (let i = 0; i < 10; ++i) { /…/
setTimeout(() => console.log(i));
}
还有，如果像这样使用：
let a = “ay”;
var b = “bee”;
为什么会在全局作用域创建window.b属性，却没有创建window.a属性？即使这些你都清楚，我也建议你略读第2章，以确保你掌握所有内容。
第16章有点特殊：它是关于如何在线程之间共享内存的。大多数JavaScript开发人员都不需要在线程之间共享内存。但有些开发人员需要，这也是第16章存在的原因；而大多数人不需要，如果你属于这一类，则可跳过该章；如果你认为自己在将来某个时候需要共享内存，可再回到第16章中学习它，这没关系。
此外，运行《深入理解现代JavaScript》的示例，用它们进行试验，祝你编程愉快。
《深入理解现代JavaScript》代码下载
你可以通过网址 https://thenewtoys.dev/bookcode 或https://www.wiley.com/go/javascript-newtoys下载各章的示例和代码清单，也可通过扫描封底的二维码下载。