从 ECMAScript 2015(ES6) 开始,JavaScript 进入了“每年一个正式版本”的稳定演进周期。十年时间,语言从脚本工具成长为前端、服务端、桌面、跨端与 AI 基础设施的核心语言。
本文将 ES2015 → ES2025(第 6~16 版) 的核心语法、标准 API总结:
👉 这些特性为什么被设计出来?什么时候真的该用?
一、ECMAScript 2015(ES6)
——现代 JavaScript 的奠基版本
版本定位
ES2015 是 JavaScript 历史上影响最大的一次更新,核心目标是:
- 解决 作用域混乱
- 引入 模块化
- 提供 类与更现代的语法
- 为大型应用打基础
1. let / const(块级作用域)
JavaScript
if (true) {
let a = 1;
const b = 2;
}
说明
let / const具有块级作用域- 避免
var的变量提升与重复声明问题 const保证绑定不可变
2. 箭头函数 () => {}
JavaScript
const add = (a, b) => a + b;
JavaScript
setTimeout(() => {
this.handle(); // this 继承自外层
}, 1000);
说明
- 不绑定自己的
this - 非构造函数
- 非常适合回调与函数式写法
3. 默认参数
JavaScript
function request(url, timeout = 3000) {}
说明
- 解决参数兜底问题
- 替代
||的不严谨写法
4. Rest / Spread 运算符
JavaScript
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
JavaScript
const newObj = { ...oldObj, a: 1 };
5. 解构赋值
JavaScript
const { name, age } = user;
const [first, second] = list;
说明
- 极大减少样板代码
- 在 Vue / React 中广泛使用
6. 模板字符串
JavaScript
`用户 ${name} 登录成功`
7. Class 语法
JavaScript
class User {
constructor(name) {
this.name = name;
}
}
JavaScript
class Admin extends User {}
说明
- 语法糖,本质仍是原型
- 提升可读性与一致性
8. 模块系统(ESM)
JavaScript
export const version = '1.0';
import { version } from './config.js';
工程意义
- 静态分析
- Tree Shaking
- 现代构建工具基础
9. Promise
JavaScript
new Promise((resolve, reject) => {
resolve(1);
});
10. 新数据结构
JavaScript
new Map();
new Set();
new WeakMap();
new WeakSet();
11. Symbol
JavaScript
const id = Symbol('id');
12. Generator / Iterator
JavaScript
function* gen() {
yield 1;
yield 2;
}
13. Proxy / Reflect
JavaScript
new Proxy(target, {
get(obj, key) {}
});
二、ECMAScript 2016(ES7)
——小版本,解决真实痛点
版本定位
ES2016 是一个轻量版本,专注补齐常用能力。
1. Array.prototype.includes
JavaScript
[1, 2, 3].includes(2);
说明
- 语义比
indexOf清晰 - 正确处理
NaN
2. 指数运算符 **
JavaScript
2 ** 10; // 1024
三、ECMAScript 2017(ES8)
——异步编程的转折点
版本定位
ES2017 的核心目标只有一个:
👉 让异步代码像同步一样可读
1. async / await
JavaScript
async function fetchData() {
const res = await fetch(url);
return res.json();
}
说明
- Promise 的语法糖
- 消灭回调地狱
2. Object.values / entries
JavaScript
Object.values(obj);
Object.entries(obj);
3. Object.getOwnPropertyDescriptors
JavaScript
Object.getOwnPropertyDescriptors(obj);
4. String.padStart / padEnd
JavaScript
'5'.padStart(2, '0');
5. 并发与 Atomics(高级)
SharedArrayBufferAtomics
四、ECMAScript 2018(ES9)
——对象操作与异步能力增强
版本定位
- 补齐对象操作短板
- 强化 Promise 与异步流处理
1. 对象 Spread / Rest
JavaScript
const clone = { ...obj };
2. Promise.finally
JavaScript
fetch().finally(() => cleanup());
3. for await...of
JavaScript
for await (const chunk of stream) {}
4. RegExp 增强
JavaScript
/(?<year>\d{4})/.exec('2024').groups.year;
五、ECMAScript 2019(ES10)
——数组与对象标准化增强
版本定位
- 数组处理能力系统化
- 保证排序一致性
1. Array.flat / flatMap
JavaScript
[1, [2, [3]]].flat(2);
arr.flatMap(x => [x, x * 2]);
2. Object.fromEntries
JavaScript
Object.fromEntries([['a', 1]]);
3. 稳定排序
JavaScript
arr.sort(); // 规范保证稳定
4. 可选 catch 绑定
JavaScript
try {} catch {}
六、ECMAScript 2020(ES11)
——安全访问与大整数支持
版本定位
- 防御式编程
- 跨环境一致性
1. BigInt
JavaScript
12345678901234567890n;
2. 可选链 ?.
JavaScript
user?.profile?.avatar;
3. 空值合并 ??
JavaScript
page ?? 1;
4. globalThis
JavaScript
globalThis.setTimeout;
5. 动态 import
JavaScript
await import('./module.js');
七、ECMAScript 2021(ES12)
——Promise 与内存管理能力补齐
1. String.replaceAll
JavaScript
str.replaceAll('-', '_');
2. Promise.any / AggregateError
JavaScript
Promise.any([p1, p2]);
3. 逻辑赋值运算符
JavaScript
a ||= b;
a &&= b;
a ??= b;
4. WeakRef / FinalizationRegistry
JavaScript
new WeakRef(obj);
5. 数字分隔符
JavaScript
1_000_000;
八、ECMAScript 2022(ES13)
——类与模块能力的质变
1. 顶层 await
JavaScript
const data = await fetchData();
2. 私有字段 / 方法
JavaScript
class A {
#x = 1;
}
3. 静态块
JavaScript
class A {
static {
init();
}
}
4. Error.cause
JavaScript
throw new Error('fail', { cause: err });
5. at / Object.hasOwn
JavaScript
arr.at(-1);
Object.hasOwn(obj, 'a');
九、ECMAScript 2023(ES14)
——不可变数据时代
1. 非破坏性数组方法
JavaScript
arr.toSorted();
arr.toReversed();
arr.toSpliced(1, 1);
arr.with(0, 'x');
2. findLast / findLastIndex
JavaScript
arr.findLast(x => x > 10);
3. Shebang 支持
JavaScript
#!/usr/bin/env node
十、ECMAScript 2024(ES15)
——集合与 Promise 再进化
1. Object.groupBy / Map.groupBy
JavaScript
Object.groupBy(arr, x => x.type);
2. Promise.withResolvers
JavaScript
const { promise, resolve } = Promise.withResolvers();
3. Set 运算
JavaScript
setA.union(setB);
setA.intersection(setB);
4. RegExp /v
十一、ECMAScript 2025(ES16)
——表达能力与标准库完善
1. Pattern Matching
JavaScript
match (input) {
{ type: 'number', value: x } => x * 2,
_ => null
}
2. Records / Tuples
JavaScript
const r = #{ a: 1 };
const t = #[1, 2];
3. Async Context Propagation
JavaScript
context.run(() => {});
4. JSON Modules
JavaScript
import config from './config.json' assert { type: 'json' };
5. Pipeline Operator
value |> parse |> validate;
6. Iterator 对象
JavaScript
Iterator.from(arr).map(x => x * 2);
7. Promise.try / RegExp.escape / Float16Array
JavaScript
Promise.try(fn);
RegExp.escape(str);
new Float16Array();结语
JavaScript 已经完成从“浏览器脚本”到“通用工程语言”的转变。
真正的竞争力不在于记住 API,而在于理解为什么这个版本要加入它。
这篇文章可以作为:
- ES 全版本对照表
- 语言演进参考手册
- 高级前端必备知识地图
文章评论