很多写了几年 JS 的朋友在被问到“你现在用的是 ES6 还是 ES2024”时通常会愣一下。这不怪大家因为 ECMAScript 版本迭代的方式从 2015 年开始就彻底变了版本号从 ES6 跳到 ES2015再变成每年一个版本确实容易把人绕晕。今天这篇不打算照搬规范而是想从我自己的实际经历出发聊聊我对 JS 和 ECMAScript 版本这件事的理解包括各版本里真正影响写码方式的特性、日常工程里怎么做版本兼容以及我踩过的一堆和版本有关的坑。如果你刚接触前端这篇文章能帮你把散落的版本知识串起来如果你写过几年 JS 但没系统梳理过版本那这篇文章应该也能帮你补上一些盲区。1. ECMAScript 到底是什么为什么总有人把 JS 和它搞混1.1 一段简史从浏览器混战到 TC39 接管JavaScript 是 Netscape 在 1995 年搞出来的脚本语言火了之后微软也做了个 JScript两边语法不完全一样前端要写两套代码非常痛苦。为了避免继续分裂Netscape 把 JavaScript 交给 ECMA 这个标准组织由 TC39 技术委员会维护标准的正式名字叫 ECMAScript。所以 JavaScript 是 ECMAScript 的其中一种实现JScript、ActionScript 也是。我们平时说的“JS 版本”其实是在说“这份代码用到了哪个版本的 ECMAScript 特性”。这个认识很重要因为很多兼容性问题的根子都在这里语言规范和运行时环境不是一回事。规范规定了语法和内置对象但一个特性最终好不好用还得看你跑的宿主环境——浏览器、Node.js、小程序、WPS 的 JS 宏——是否实现了它。举个例子你在 Chrome 最新版里写Array.prototype.at很顺畅但同样的代码放到一个老版本的 WebView 里可能就直接崩掉。版本不是玄学是实实在在的运行环境差距。1.2 版本编号的套路ES6、ES2015、ES2024到底哪个对ECMAScript 1 在 1997 年发布之后 1998 有 21999 有 3然后跳过 42009 年来了个 ES5。ES5 是当时第一个被浏览器广泛支持、前端敢于放心用的版本。2015 年 6 月ES6 正式发布官方改成了以年份命名叫 ES2015所以 ES6 就是 ES2015是同一个东西的不同叫法。从那以后 TC39 承诺每年发布一个新版本于是就有了 ES2016、ES2017……一直到现在 ES2024。你可能要问那为什么现在还有人张口闭口说 ES6因为 ES6 带来的变化实在太大了可以说是现代 JavaScript 的地基大家习惯用它当分水岭。而真正查文档时还是要以年份版本为准比如“Array.prototype.at是 ES2022 的特性”“Object.groupBy是 ES2024 的特性”。这种命名方式一开始我也不习惯但用多了会发现它其实更直接版本年份和发布时间的对应关系一目了然。2. 各版本核心特性盘点哪些是真的改变了我的代码2.1 ES5var 和 function 打天下的时代JSON 是最大恩人我刚开始写前端时能用的东西不多变量只有var函数只有function循环就是 for、while继承全靠原型链。ES5 加入了一批到现在都很核心的能力严格模式、JSON.parse 和 JSON.stringify、Object.defineProperty还有数组上的 forEach、map、filter、reduce 等。这些特性今天看起来普通但在当年极大解放了生产力。Object.defineProperty后来成了 Vue 2 响应式的根基JSON更是让前后端数据交换变得规范。那个年代最痛苦的是浏览器兼容。比如 IE7 不支持 JSON.parse我当时得引入一个 json2.js 垫片才能用。这也是我第一次意识到“同一个 JS 版本在不同环境里支持度不一样”。如果你现在写代码还要兼容老旧的嵌入式浏览器ES5 的这套标准反而是最稳妥的底线。2.2 ES2015ES6箭头函数、解构、类和模块一次重构我的编码习惯ES2015 是真正的核弹级更新。let/const解决了 var 的变量提升和全局污染问题让块级作用域变得可控。模板字符串告别了字符串拼接地狱。箭头函数不仅缩短了写法还没有自己的 this、arguments让回调里的 this 指向问题大大缓解。解构赋值让交换变量、函数返回多值都变得非常自然。class语法让习惯了面向对象的人更容易上手Promise则让异步代码不再一直往回调里套。还有模块系统的import/export直接取代了以前各种全局命名空间和 script 顺序依赖。这些特性合在一起才让 ES6 之后的前端工程化变成可能。我第一次用import的时候才意识到原来代码之间的关系是可以静态表达出来的。新手如果还停留在 var function script 标签的阶段跨过 ES6 这关会明显感受到现代前端的大门打开了。2.3 ES2016 到 ES2022每年一小步几个新朋友ES6 之后每年的更新规模都不大按官方说法是“增量发布”。但累积起来现代写法已经发生了很大的变化。我按年份整理一下常用的可以当快速索引版本年份代表特性ES20162016**指数运算符Array.prototype.includesES20172017async/awaitObject.values/entriespadStart/padEndES20182018for await...of对象展开...正则命名捕获组Promise.finallyES20192019Array.flat/flatMapObject.fromEntriescatch 参数可省略ES20202020可选链?.空值合并??BigIntPromise.allSettledglobalThisES20212021String.replaceAllPromise.any逻辑赋值操作符、||、??ES20222022class 字段顶层awaitObject.hasOwnArray.atError.cause这里面有不少是对痛点的直接回应。以前访问深层对象属性总得写一串a a.b a.b.cES2020 的可选链直接写成a?.b?.c。以前判断对象属性得用Object.prototype.hasOwnProperty.call字长又容易踩原型链的坑ES2022 的Object.hasOwn就舒服很多。数组的at()允许用负数索引arr.at(-1)取最后一个元素比arr[arr.length - 1]可读性强不少。我不建议死记年份但遇到旧代码出现奇怪写法时能大致猜到它大概是哪个版本引入的排查会快很多。2.4 ES2023 到 ES2024最新的甜点近两年的版本在命名上还是年份特性偏向给数组和异步打补丁。ES2023 主要加了findLast、findLastIndex以及一组不可变数组方法toSorted、toReversed、toSpliced、with。名字很好认原来的sort、reverse、splice会原地改数组加个to前缀就是返回新数组。这个设计在 React、Redux 这类强调不可变数据的场景里很受欢迎。ES2024 值得关注的新特性有Promise.withResolvers和Object.groupBy、Map.groupBy。Promise.withResolvers可以在外层拿到 resolve 和 reject写某些事件驱动的 Promise 时不用再包一层构造函数。Object.groupBy可以把数组按 key 分组比如把一堆订单按状态分组一行搞定。你可能会疑惑怎么以前没听过这些名字因为它们太新了最新浏览器和 Node 版本才支持很多团队还在配置转译阶段。所以“知道”和“能用”之间差的正是下一章要聊的兼容性。3. 版本兼容性怎么做到新语法不拖垮老用户3.1 先搞清楚 JS 是规范还是实现以及为什么兼容性总出问题前面说过ECMAScript 只是规范最终能不能运行取决于宿主。浏览器内核要升级才支持新语法Node 也要等 V8 引擎跟进。我没法期待所有用户都用最新 Chrome有时候 IE11 还占着不小的比例企业内部系统里老 WebView 更是能坑到想骂人。所以工程上必须把“源码里用的新特性”和“运行环境能接受的老特性”这两件事分开处理。语法层面的差异尤其致命。箭头函数、展开运算符、可选链这些属于语法旧引擎遇到会直接解析失败报一个SyntaxError: Unexpected token连运行的机会都没有。API 层面的差异相对温和比如某个数组方法不存在顶多报xxx is not a function。两类问题的处理方式完全不一样如果混着处理排查起来会绕很多弯路。3.2 语法差异用转译解决API 差异用垫片解决对于语法差异主流做法是用 Babel 把高版本语法转译成低版本语法。比如可选链a?.b会被转成a null || a undefined ? undefined : a.b。这个过程发生在构建时不需要在浏览器里额外加载一堆运行时。箭头函数、class、模块等也能转成 ES5 的函数表达和 CommonJS 形式。但转译只能处理语法处理不了新增的内置对象和方法。String.prototype.includes、Array.prototype.flat、Promise、BigInt这些属于内置 API转译器不会凭空造出来只能用垫片去补。最常见的是 core-js它会在全局对象上补出旧环境缺失的方法。这也是为什么很多 Babel 配置里会同时出现babel/preset-env和core-js前者管语法后者管 API。两者配合才是完整的兼容方案。3.3 实操配置 browserslist Babel core-js 的稳妥方案如果你正在搭建项目我建议直接按照浏览器支持范围来配置。先建一个.browserslistrc写上你们实际需要支持的浏览器last 2 versions not dead 0.5%这个文件的意思是覆盖全球使用率超过 0.5% 的最近两个大版本浏览器并且不包含已停止维护的。Browserslist 会计算出一份目标浏览器列表Babel 和 core-js 都知道该为这些环境补什么。接着安装基本依赖npm install -D babel/core babel/cli babel/preset-env core-jsbabel.config.json可以这样写{ presets: [ [ babel/preset-env, { useBuiltIns: usage, corejs: 3 } ] ] }useBuiltIns: usage的意思是按需注入垫片代码里用了 includescore-js 就只补 includes而不是把所有 polyfill 全塞进去。这个东西很多人第一次配的时候会漏掉结果打包出来体积暴增。我见过一个项目只因为没设 usagemain bundle 凭空多了 200 KB。如果你不想让转译在旧浏览器上出问题务必检查这一条。4. 常见误区与高频问题排查版本说变就变但坑是永恒4.1 把语法特性和内置对象混为一谈最常见的误区是认为“用了 Babel 就万事大吉”。其实 Babel 能转语法但没法转掉所有差异。比如箭头函数内部的arguments和动态this在转换后仍和原语义不同class转换出的 ES5 代码也只是模拟很多边界行为不一致。更典型的问题是有些人只配了 Babel 没配 core-js新语法编译通过了但Promise在 IE11 里依然不存在运行的时候就报Promise is not defined。我排查过不少类似 bug编译过程没报错问题一定出在 API 层。另一个误区是把“新特性”等同于“标准全环境可用”。判断一个特性能不能用直接去 MDN 看兼容性表格比听别人说“这个特性很流行”靠谱得多。比如structuredClone频繁被推荐但它根本不是 ECMAScript 标准而是 Web API在某些非浏览器环境里压根没有。4.2 从高频需求看版本差异忽略大小写、字符串包含、函数对象有段时间总看到有人在搜“js忽略大小写”和“js判断字符串是否包含”。这其实是一个经典需求判断字符串里有没有某个子串不考虑大小写。ES2015 提供了String.prototype.includesconst title Hello ECMAScript; title.includes(ecma); // false因为区分大小写 title.toLowerCase().includes(ecma.toLowerCase()); // true如果你只是判断存在性includes比indexOf语义更直白也不需要判断! -1。但要留意includes、startsWith、endsWith都是 ES2015 加的老环境要用垫片。还有一个相关的点includes在区分大小写的问题上并没有原生方法所以忽略大小写得自己先归一化并没有includesIgnoreCase这种东西。至于“js函数是对象吗”答案从 ES1 至今都是函数就是对象函数属于 Function 类型有length、name、prototype等属性。但 ES6 的箭头函数也是对象却不能作为构造函数也没有prototype。这跟原型链的学习是连在一起的class只是构造函数的语法糖底层对象机制没有变过。理解原型链再回头看版本差异会清楚很多因为很多“魔法”其实是继承链上的属性查找。4.3 常用 API 版本速查表遇到问题先查这里下面这个表可以帮你形成快速记忆API版本备注JSON.parseES52009 年就有现在完全没理由不用Object.definePropertyES5Vue 2 的依赖追踪核心PromiseES2015现代异步基础需要 polyfillasync/awaitES2017可以用 Babel 转译Object.fromEntriesES2019把键值对数组变对象Array.atES2022支持负索引Object.hasOwnES2022比 hasOwnProperty 更安全structuredClone非 ECMAScript浏览器 Web APINode 版本也看实现遇到“为什么这个 API 在我公司项目里不能用”的时候先从表里找版本号再去看运行环境版本这个排查路径往往最快。不要上来就怀疑业务代码兼容性列表看一遍基本就有底了。4.4 排查版本问题的三条实用经验第一看报错类型。SyntaxError: Unexpected token ?基本就是用了旧引擎解析不了的语法TypeError: xxx.flat is not a function则大概率是缺 API 垫片。第二用特性探测代替 UA 判断比如脚本开头判断typeof Promise ! undefined比读navigator.userAgent去猜浏览器版本可靠得多。第三遇到“我的代码在本地好好的线上就崩”时先去查目标环境的浏览器和 Node 版本别急着改代码。这三条帮我省下过非常多时间。5. 学习路径建议如何稳步跟上 ECMAScript 的版本节奏5.1 不用背规范但要有一套追踪新特性的方法很多人一听到“每年一个新版本”就焦虑觉得学不完。实话说ECMAScript 每年的新增内容并不多真正影响日常开发的更少。我的方法是长期看 TC39 的 Stage 列表。一个提案从 Stage 3 进入 Stage 4 意味着基本要转正了提前了解名字和用途等它落到正式版本时不陌生。偶尔去扫一眼 MDN 的“JavaScript 参考”页面或者订阅几个前端周刊效果比买一本厚厚的书好得多。5.2 一套我自己的学习路线从 ES5 打地基用 ES6 写业务我建议新手按这个顺序走先吃透 ES5 的核心包括变量、函数、闭包、原型链、严格模式然后学 ES2015 的那批特性重点掌握let/const、模板字符串、解构、箭头函数、class、Promise、模块再往后就看业务需要。比如你经常处理同时多个请求就去学Promise.allSettled处理深度嵌套的对象就去学可选链写不可变数据逻辑就去学 ES2023 的toSorted那一组。按需学习性价比最高。5.3 学习过程中容易走的弯路第一个弯子是盲目追新项目还在兼容 IE11却非要在代码里用Array.at结果线上崩了才回头改。第二个弯子是把 TypeScript 和 ECMAScript 混为一谈TypeScript 是超集很多语法比如 enum、namespace、装饰器并不是 ECMAScript 标准要分清楚哪些是 JS 的、哪些是 TS 的。第三个弯子是只看新特性名字不动手跑一遍。比如Object.groupBy我第一次用时想当然以为是返回对象实际在Map.groupBy里返回 Map不看文档直接写很容易翻车。最后一个我自己很受益的小习惯在团队里维护一份“当前使用的最低 ECMAScript 版本”文档把项目配置里的 browserslist、Babel preset、允许使用的特性列清楚。新同事加入时看一眼能省掉很多关于“这个能不能用”的争论。版本号本身不是目的让代码在目标环境里稳定跑起来才是。