🔍ECMAScript 2025 有哪些新特性?

只聊开发中真正用得到、能省代码、少踩坑的 8 个特性,其余一笔带过。


1. JSON 模块原生导入

痛点解决 :再也不需要 fetch().then(res => res.json())fs.readFileSync 去"绕"配置文件。

用法

js 复制代码
// 静态导入(构建时打包)
import cfg from './app.json' with { type: 'json' };

// 运行时按需加载
const langPack = await import(`./i18n/${locale}.json`, { with: { type: 'json' } });

真实场景

  • 前端主题 / 构建变量:改 JSON 即可,无需重启 dev-server
  • 多语言:按用户语言动态 import,减少首屏 30-100 KB 不等

2. Set 集合运算方法

痛点解决:手写并集、交集、差集易出错且代码冗长。

API 速览

js 复制代码
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);

a.union(b)        // Set {1,2,3,4}
a.intersection(b) // Set {2,3}
a.difference(b)   // Set {1}
a.symmetricDifference(b) // Set {1,4}

真实场景

  • 权限系统:把"用户权限"与"角色权限"做 intersection 一键得最终权限
  • 标签过滤:多篇博客标签求 union 后做 difference 快速得出"未使用标签"

3. Iterator Helpers(迭代器辅助)

痛点解决 :大数组链式 filter().map() 会一次性生成中间数组,吃内存。

惰性写法

js 复制代码
const res = arr.values()
               .filter(x => x > 0)
               .take(100)   // 只拿前 100 条
               .map(x => x * 2)
               .toArray();  // 真正执行

真实场景

  • 日志面板:后端一次吐出 10 万条日志,前端 take(200) 做虚拟滚动,不卡页面

4. Promise.try() ------ 同步异步一锅端

痛点解决 :旧写法 Promise.resolve().then(fn) 会把同步报错推迟到微任务,调试断点难打。

一行代码

js 复制代码
Promise.try(() => localStorage.getItem('token')) // 同步错也进 .catch
       .then(validate)
       .catch(showToast);

真实场景

  • 封装 SDK:你不知道调用方传的是同步函数还是 async 函数,统一 Promise.try 再也不用担心"同步抛错没捕获"

5. RegExp.escape(str) ------ 拼接正则安全盾

痛点解决 :用户输入关键词高亮,若含 .*+?^ 等元字符,直接 new RegExp(keyword) 必定翻车。

安全写法

js 复制代码
function highlight(text, kw) {
  const safe = RegExp.escape(kw);
  return text.replace(new RegExp(`(${safe})`, 'gi'), '<mark>$1</mark>');
}

真实场景

  • 搜索高亮、路由通配符、GraphQL 拼接,但凡"用户输入 → 正则"都建议先过一遍 escape

6. 正则内联标志 / 重复命名捕获组

痛点解决 :以前 (?<name>\w+) 只能出现一次,同名就报错;现在可重复,解析日志更直观。

例子

js 复制代码
const re = /(?<level>\w+)\s+\k<level>/; // 匹配连续两档相同 level

真实场景

  • 解析 nginx 日志、SQL 慢查询,多段相同字段只需一个名字,降低正则后期维护成本

7. Float16Array

痛点解决 :WebGL / WebGPU 与 C++ 端交互时,大量 16-bit 浮点数据(深度、法线贴图)以前要手动拆 Uint16Array,现在直接 Float16Array 映射,省 50% 内存带宽。

一行代码

js 复制代码
const f16 = new Float16Array(1024 * 1024); // 2 MB,同精度下 Float32 要 4 MB

真实场景

  • 浏览器端推理框架、游戏引擎顶点数据上传,显存占用直接砍半

8. defer import(延迟模块)

痛点解决 :大工具库被顶层 import 会阻塞首屏,但动态 import() 又丢类型提示。

写法

js 复制代码
import { heavyApi } from './analytics.js' with { defer: true };

// 真正用到时才去加载
button.onclick = () => heavyApi.track('click');

真实场景

  • 埋点、可视化、PDF 生成等"可能永远用不到"的库,首屏减少 100-300 KB,Lighthouse 分数 +5~15

一句话带过区(了解即可)

  • Array.prototype.at / toSorted / toReversed ------ 已有 core-js 补丁,非刚需
  • Object.hasOwn ------ 替代 Object.prototype.hasOwnProperty,只是更短
  • Symbol.prototype.description ------ 调试友好,对业务代码几乎无感
  • 私有字段 #foo ------ ES2022 就已落地,ES2025 仅性能微调

小结

特性 立即可用场景 预计节省
JSON 模块 配置 / 国际化 去掉一次网络请求或 fs 读取
Set 运算 权限 / 标签 10-30 行工具函数删库
Iterator Helpers 大数据列表 内存峰值降 50%+
Promise.try SDK / 工具库 少写 3 行 try-catch,调试省时
RegExp.escape 搜索高亮 杜绝 XSS 级正则 bug
Float16Array WebGPU / AI 显存带宽 ↓50%
defer import 首屏优化 JS 体积 -100 KB~

所有特性均已进入 Chrome 128+、Firefox 129+、Node.js 23(部分需 --harmony)。

生产环境请配合 core-js 3.39@babel/preset-env 7.26 做降级,放心冲!

相关推荐
正义的大古2 小时前
OpenLayers地图交互 -- 章节十七:键盘缩放交互详解
javascript·vue.js·openlayers
Hashan2 小时前
elpis-core:基于 Koa 的轻量级 Web 应用框架
前端·javascript·node.js
前端Hardy2 小时前
轻松搞定JavaScript数组方法,面试被问直接答!
前端·javascript·面试
云枫晖2 小时前
手写Promise-catch和finally
前端·javascript
薄雾晚晴2 小时前
大屏开发实战:封装自动判断、无缝衔接的文字滚动组件,告别文本截断烦恼
前端·javascript·vue.js
Beginner x_u3 小时前
前端八股文 Vue上
前端·javascript·vue.js·八股文
Strawberry_rabbit3 小时前
Docker
前端
江拥羡橙3 小时前
JavaScript异步编程:告别回调地狱,拥抱Promise async/await
开发语言·javascript·ecmascript·promise·async/await
前端康师傅3 小时前
JavaScript数组中的陷阱
前端·javascript