🔍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 做降级,放心冲!

相关推荐
WeiXiao_Hyy30 分钟前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡1 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone1 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09011 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king2 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
辰风沐阳2 小时前
JavaScript 的宏任务和微任务
javascript
夏幻灵3 小时前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星3 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_3 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js