1. 引言

最近在后台看到很多留言，大家对前端新特性的态度很矛盾：

“我想学新语法，但是被 ES6、ES7、ES2015、ESNext 这些名词搞晕了，到底哪个是哪个？”
“听说 async/await 很好用，但又怕浏览器不支持，不敢用。”
“网上的文章要么太旧，要么太散，有没有一个系统的路线图？”

如果你也有上述困惑，别担心，你不是一个人。JavaScript 是发展最快编程语言之一，从 2015 年开始，它进入了“黄金十年”，每年都会带来大量的新特性。

为了帮助大家彻底理清这些概念，我打算写一个系列文章，系统介绍 ES2015 到 ESNext 的所有重要特性。

本文作为系列的第一篇（总览篇），不写复杂的代码，而是先帮大家**“搭骨架”**。我们将理清 JS 与 ES 的关系，梳理近 10 年的语法进化史，并给出后续的学习路线。

本文将分为三个部分：

1. 概念扫盲：JavaScript、ECMAScript 和 ESNext 的关系。
2. 版本时间轴：从 ES2015 到 ES2024，每年都更新了什么？
3. 系列规划：我们将按什么节奏来学习这些特性？

---

2. 正文

2.1 概念扫盲：JavaScript、ECMAScript 和 ESNext

很多新手容易混淆 JavaScript 和 ES6，我们先来把这个结解开。

• JavaScript (JS)：这是语言的名字，是我们实际写在 .js 文件里的代码。它是一种实现。
• ECMAScript (ES)：这是 标准。JavaScript 是 ECMAScript 标准的一种实现（除了 JS，还有 ActionScript 等，不过现在基本只剩 JS 了）。
• ES6 / ES2015：ES6 是一个历史名词，指的是 2015 年发布的 ECMAScript 标准第 6 版。这是 JS 历史上最大的一次更新，标志着现代 JS 的开端。为了规范命名，ES6 之后的标准改按年份命名，如 ES2016、ES2017。
• ESNext：这不是一个固定的版本，而是一个动态的概念。它指的是“下一个版本的 ECMAScript”，或者目前还在提案阶段、尚未正式发布的特性。

简单总结：

ECMAScript 是“标准”，JavaScript 是“实现”，ESNext 是正在起草的“草案”。

2.2 版本时间轴：JS 的黄金十年

从 2015 年开始，TC39（负责制定 JS 标准的委员会）决定每年 6 月发布一个新版本。这彻底改变了 JS 的生态。

让我们快速浏览一下这 10 年来的“高光时刻”：

• ES2015 (ES6) - 里程碑
  这是 JS 的“成人礼”。引入了 let/const、箭头函数、Class（类）、Promise、模块化 等重量级特性。如果不学 ES2015，你基本看不懂现代前端项目。
• ES2016 / ES2017 - 完善异步
  ES2016 带来了数组 includes 和指数运算符 **。
  ES2017 则补齐了异步编程的最后一块拼图——async/await，同时也引入了 Object.values 等实用方法。
• ES2018 / ES2019 - 语法糖与便利性
  异步迭代、Promise.finally、对象 Rest/Spread 展开运算符（这对 React/Vue 开发非常重要）、Array.prototype.flat（打平数组）、Object.fromEntries。
• ES2020 - 可选链与空值合并
  这一年带来了两大“防炸神兽”：?.（可选链）和 ??（空值合并）。它们极大地减少了代码中的 if 判断和报错风险。同时 BigInt 也正式登场。
• ES2021 - 逻辑赋值与字符串替换
  &&=、||=、??= 逻辑赋值操作符，以及大家期待已久的 String.replaceAll。
• ES2022 - 类与数组的进化
  类支持了私有字段（#field），数组有了 at() 方法（支持负索引），最重磅的是 top-level await（顶层 await）。
• ES2023 - 数组的非破坏性方法
  toSorted、toReversed、toSpliced 等方法出现，它们对数组操作后不改变原数组，非常符合函数式编程的理念。
• ES2024 - 集合增强
  Object.groupBy 以及 Set、Map 的一些新方法。

看到这里你可能会问：“这么多特性，都要背下来吗？”
当然不用！ 本系列文章就是为了帮你把这些碎片化的特性，串成一张知识网。

2.3 系列文章规划

为了让大家学起来更轻松，我不会按年份枯燥地罗列，而是按主题模块来写。这也是你学习新特性的最佳心智模型。

本系列将包含以下核心篇章（顺序可能微调）：

1. 变量与作用域：告别 var，拥抱 let/const，理解 TDZ 和块级作用域。
2. 函数增强：箭头函数、默认参数、剩余参数，以及 this 指向的变化。
3. 解构与展开：数组、对象的解构赋值，以及 Spread 语法的妙用。
4. 字符串与正则：模板字符串、字符串补全、正则增强。
5. 面向对象：Class 语法糖、继承、私有字段的正确使用姿势。
6. 模块化：理解 import/export，告别全局变量污染。
7. 异步编程：从 Promise 到 async/await，彻底搞懂异步流。
8. 集合与数组：Map/Set/WeakMap 以及数组新方法 flat、flatMap 等。
9. 对象与语法糖进阶：对象属性简写、深拷贝技巧、装饰器预览。
10. ESNext 实战：如何使用 Babel，如何查阅文档，跟上 JS 进化的脚步。

---

3. 常见问题 (FAQ)

在开始深入学习之前，先回答两个大家最关心的问题。

Q1：我的项目需要兼容 IE 浏览器，还能用这些新特性吗？
A： 可以写，但不能直接跑。在生产环境中，我们需要配合 Babel 这样的编译工具，它能把你的 ESNext 代码“翻译”成浏览器能看懂的 ES5 代码。所以，大胆地使用新特性来提升开发效率吧，脏活累活交给构建工具。

Q2：ES6 和 ES2015 到底是不是同一个东西？
A： 是的，但在正式场合建议叫 ES2015。ES6 这个名字太流行了，以至于后来把 ES2016/ES2017 也习惯性地叫成了 ES7、ES8，但这并不规范。记住一点：ES6 = ES2015，它是现代 JS 的分水岭。

---

4. 总结

本文作为系列的开篇，主要理清了 JavaScript 的版本脉络：

1. ES6 (ES2015) 是现代 JavaScript 的起点，引入了大量核心特性。
2. TC39 保持每年 6 月发布一个新版本的节奏，ESNext 指未来的特性。
3. 我们不追求背诵每一个 API，而是要建立模块化的知识体系。

现代 JS 越来越强大，也越来越像一门“严肃”的编程语言。掌握这些新特性，不仅能让你写代码更快，还能让你的代码更健壮、优雅。

下一篇预告：我们将从最基础的“变量与作用域”讲起，看看 let 和 const 到底比 var 好在哪里？那些经典的“循环闭包”坑是如何被填平的？

---

如果觉得本文对你有帮助，请点赞👍、收藏⭐、关注👀，跟随本系列一起搞定现代 JavaScript！

有问题欢迎在评论区留言：你最想学习哪个新特性？