只聊开发中真正用得到、能省代码、少踩坑的 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 做降级,放心冲!