前端进阶必备：一张图回顾JS十年新语法

本教程旨在帮你快速梳理从 ES6 (ES2015) 到 ES2024 的 JavaScript 主要新特性。阅读完毕，你将获得一张清晰的 JS 语法进化时间图，能够轻松识别不同代码的“年份”，并在面试或项目开发中更有底气。本指南尤其适用于需要快速更新知识体系的前端开发者和准备技术面试的同学。

所需工具：

2015年的 ES6 (也称 ES2015) 是JavaScript历史上最重要的一次更新，奠定了现代JS写法的基石。如果你发现代码中大量出现以下特性，那它很可能就是基于ES6标准编写的。

提示： ES6是目前所有前端框架（React, Vue, Angular）的基础，也是Node.js开发的事实标准。掌握ES6是成为一名合格前端工程师的最低要求。

在ES6之后，JS采取了更快的年度发布节奏，每年发布一些小而实用的更新。

2016 (ES2016):
- 指数运算符 ** (例如 2 ** 3 结果为8)，比 Math.pow(2, 3) 更直观。
- Array.prototype.includes() 用于判断数组是否包含某个元素，返回布尔值，比 indexOf 更语义化。
2017 (ES2017):
- async/await：这是继 Promise 之后异步编程的又一里程碑。它让我们能用像写同步代码一样的方式去写异步逻辑，极大提升了代码的可读性。
- Object.values() 和 Object.entries()：方便地获取对象的值集合或键值对集合。
- String.prototype.padStart/padEnd：用于字符串补全，常用于格式化日期、数字等。
2018 (ES2018):
- 对象展开符 (...)：允许将一个对象的自有可枚举属性“展开”到另一个对象中，是 Object.assign() 的语法糖，常用于对象合并和浅拷贝。
- 异步迭代 (for-await-of)：使得我们可以遍历异步数据流（如分页接口返回的数据）。
- Promise.prototype.finally()：无论Promise是成功(fulfilled)还是失败(rejected)，finally中的代码总会执行，非常适合放置清理资源类的逻辑。

这个时期的特性主要聚焦于减少冗余代码，让代码更健壮、更易读。

2019 (ES2019):
- Array.prototype.flat/flatMap：用于数组“降维”（扁平化），flatMap则是在map后执行flat操作。
- Object.fromEntries()：Object.entries() 的逆操作，将键值对数组转换回对象。
- 可选的 catch 绑定：如果 catch 块不需要使用错误对象，可以省略 (err)。
2020 (ES2020):
- 可选链操作符 ?.：访问深层嵌套对象属性时，不再需要一路检查&&，如果路径中有null或undefined，表达式会短路并返回undefined。极大提升了代码健壮性。
- 空值合并操作符 ??：a ?? b 的意思是，只有当 a 是 null 或 undefined 时，才返回值 b，否则返回 a。它比 || 更严谨，因为 || 会将 0, false, '' 等假值也覆盖掉。
- BigInt：一种新的数字类型，用于安全地表示和操作大整数。
- 动态 import()：允许按需、动态地加载模块，返回一个Promise，是代码分割和懒加载的关键。
2021 (ES2021):
- Promise.any()：接收一个Promise数组，只要其中一个成功，就返回那个成功的结果。
- 逻辑赋值运算符 (&&=, ||=, ??=)：将逻辑操作和赋值结合，例如 x ||= y 等同于 x = x || y。
- 数字分隔符 _：可以在数字字面量中用下划线作为分隔符（如 1_000_000），提高可读性，JS引擎会自动忽略它。

近年的更新继续在类、模块化和数据处理等方面深耕，引入了一些颠覆性的写法。

2022 (ES2022):
- 类字段声明：可以直接在类（class）的顶层声明属性，包括私有字段（以 # 开头）。
- 顶层 await：现在可以在模块的顶层直接使用 await，无需包裹在 async 函数中。这极大地简化了依赖异步资源的模块初始化代码。
- .at() 方法：允许在数组和字符串上使用负数索引来从末尾取值，例如 arr.at(-1) 获取最后一个元素。
- Error Cause：创建错误时可以附带一个 cause 属性，方便追踪错误链。
2023 (ES2023):
- 不可变数组方法：新增toSorted(), toReversed(), toSpliced() 等方法。它们与sort(), reverse(), splice()功能类似，但区别在于它们会返回一个新数组，而不是修改原数组，这在函数式编程和React等状态管理中非常有用。
- Hashbang 语法 (#!)：允许JS脚本文件直接指定解释器，类似Shell脚本。
2024 (ES2024):
- Promise.withResolvers()：一种创建和控制Promise的新模式，简化了需要从外部解决或拒绝Promise的场景。
- ArrayBuffer.transfer()：高效地转移ArrayBuffer对象的所有权，无需拷贝数据。
- 正则表达式 v 标志：增强了对Unicode字符集操作的支持。

注意： 对于最新的语法（如ES2022+），在生产环境使用前，务必通过 Can I Use 等网站检查目标浏览器的兼容性，或配置Babel等转译工具将其转换为兼容性更好的旧版语法。

恭喜你，现在你已经快速“穿越”了JavaScript近十年的发展历程！

成功标准：

当你看到 async/await，能立刻反应出这是 ES2017 的特性。
当你看到 user?.address?.street，能明白这是 ES2020 的可选链，并且知道它为什么比 user && user.address && user.address.street 更好。
当你需要对数组排序但又不想改变原数组时，能想到使用 ES2023 的 toSorted()。

进阶学习：