蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
融合 AI、架构与工程实践,沉淀方法论,构建可持续的技术价值。
  1. 首页
  2. 研发说
  3. 正文

ES2015 → ES2025:JavaScript 十年演进全景回顾与核心 API 总结

2025年12月24日 90点热度 0人点赞 0条评论

从 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(高级)

  • SharedArrayBuffer
  • Atomics

四、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 全版本对照表
  • 语言演进参考手册
  • 高级前端必备知识地图

标签: ECMAScript 全版本 ES2015 ES6 JavaScript 新特性
最后更新:2025年12月24日

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

最新 热点 随机
最新 热点 随机
Island 架构与部分水合:重新思考前端性能与交互的边界 Biome:下一代前端一体化工具链,正在取代 Prettier + ESLint? 生产环境下的 Token 前端存储方案与安全权衡 程序员的 PPT 终极形态:Slidev 演示文稿工具 Bun:下一代 JavaScript 一体化工具链全面解析 架构师应该具备的专业素养:如何成为一名优秀的系统架构设计师
Rsbuild:由 Rspack 驱动的新一代高性能 Web 构建工具i18n 高效实现方案:前端国际化神器安利一波字节跨平台框架 Lynx 开源:为 Web 开发者带来原生级跨端体验的全新选择TresJS:用 Vue 构建现代化交互式 3D 体验npm 安全更新:把握令牌变更与发布体系的迁移参考指南Code Inspector:页面开发提效的神器
StompJs:STOMP的服务器/javascript客户端的解决方案 ngrok:开发者必备的内网穿透神器,让本地服务秒变公网可访问 avalon在chrome新版本双向数据绑定失效问题解决方案 基于 Lit 框架开发 Web Component 组件的完整实践 UniApp 进阶实战篇:Vue3 + Pinia + uViewPlus 构建企业级多端项目 Vue Hooks Plus:Vue3 项目里的「新一代 Hooks 工具箱」
最近评论
渔夫 发布于 2 个月前(11月05日) 学到了,感谢博主分享
沙拉小王子 发布于 8 年前(11月30日) 适合vue入门者学习,赞一个
沙拉小王子 发布于 8 年前(11月30日) 适合vue入门者学习,赞一个
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8
cywcd 发布于 9 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8

COPYRIGHT © 2025 蓝戒博客_智构苍穹-专注于大前端领域技术生态. ALL RIGHTS RESERVED.

京ICP备12026697号-2