ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

ES2026 正式发布!这 7 个 JavaScript 新特性正在改变你的代码(附完整示例)

ES2026 正式发布!这 7 个 JavaScript 新特性正在改变你的代码(附完整示例) ES2026 正式发布这 7 个 JavaScript 新特性正在改变你的代码附完整示例![封面](https://picsum.photos/seed/17865153821073/800/400)2026 年 7 月Ecma 国际大会正式批准了 ECMAScript 2026即 ES2026规范第 17 版。作为一年一度的 JavaScript 语言年度快照ES2026 没有大刀阔斧的语法革命却一口气补齐了开发者在数字精度、二进制数据、错误处理、集合操作、异步流等高频场景下的痛点。毫不夸张地说这份规范里的大部分特性都是你早就该有、却一直手写轮子的 API。本文带你逐个过一遍 ES2026 的 7 个新特性每个都附可直接运行的真实代码最后再聊一聊那个虽未进 ES2026、但今天就能用的明星提案——Temporal API。一、Math.sumPrecise浮点求和不再翻车先看一个经典面试题0.1 0.2 等于多少答案是 0.30000000000000004。因为浮点数在二进制下无法精确表示十进制小数累加时误差还会不断累积// 老写法误差累积 const prices [19.99, 5.5, 3.33, 0.1]; const total prices.reduce((sum, n) sum n, 0); console.log(total); // 28.920000000000005 // ES2026精确求和 const total2 Math.sumPrecise(prices); console.log(total2); // 28.92 ✅Math.sumPrecise() 内部采用 Neumaier 补偿求和算法把每次相加产生的舍入误差单独记录下来并回补从而把误差控制在可接受范围内。它接受一个可迭代对象返回精确求和结果。对财务计算、统计聚合、科学计算来说这是根治 运算符误差累积的正解。二、Uint8Array 原生 Base64 / Hex告别 btoa 与手写转换过去做二进制编码转换前端用 btoa/atob还常常被 Unicode 中文坑后端用 Buffer.toString(base64)Node 与浏览器各写一套。ES2026 给 Uint8Array 增加了四个静态/实例方法// 字符串 → Uint8Array → Base64 const bytes Uint8Array.fromBase64(aGVsbG8gd29ybGQ); console.log(new TextDecoder().decode(bytes)); // hello world // Uint8Array → Base64 console.log(bytes.toBase64()); // aGVsbG8gd29ybGQ // 十六进制同样原生支持 const hex Uint8Array.fromHex(48656c6c6f); console.log(new TextDecoder().decode(hex)); // Hello console.log(hex.toHex()); // 48656c6c6f从此加密摘要、图片上传、文件分片等场景无需再引入第三方库也无需在 Node 与浏览器之间写兼容层——一套 API 通吃。三、Error.isError跨 Realm 的错误检测instanceof Error 有个著名的坑跨 iframe、跨 worker、跨 Node 模块上下文realm时不同 realm 的 Error 构造函数不是同一个instanceof 会返回 false导致 try/catch 里的兜底逻辑失灵。Array.isArray 解决过同样的问题ES2026 的 Error.isError 如法炮制function safeParse(json) { try { return JSON.parse(json); } catch (err) { // 老写法err instanceof Error 在跨 realm 时可能为 false // 新写法可靠检测任意 realm 的错误对象 if (Error.isError(err)) { console.error(解析失败, err.message); } else { console.error(抛出了非 Error 对象, err); } return null; } }它还顺带解决了抛字符串/抛数字这类历史遗留问题——Error.isError(oops) 返回 false而 Error.isError(new TypeError(oops)) 返回 true。四、Map.getOrInsert一行代码搞定 Upsert从 Map 里取值没有就放默认值——这是业务代码里出现频率极高的模式。过去你必须这样写// 老写法三行样板代码 let count visits.get(userId); if (count undefined) { visits.set(userId, 1); count 1; } // ES2026一行搞定 const count2 visits.getOrInsert(userId, 1);getOrInsert(key, value)key 存在则返回原值不存在则插入 value 并返回它。还有一个配套方法 getOrInsertComputed(key, () compute())延迟计算默认值适合默认值构造开销大的场景比如要 new 一个对象或请求配置。配合缓存、计数、去重、分组统计等场景代码可读性直接上一个台阶。五、Array.fromAsync异步迭代器一键转数组ES2015 带来了 Array.from()但它只能处理同步可迭代对象。面对异步生成器、异步流式接口过去你得手写 for await 循环// 老写法 const results []; for await (const item of fetchPages()) { results.push(item); } // ES2026一行 const results2 await Array.fromAsync(fetchPages());Array.fromAsync 同样支持映射函数例如 await Array.fromAsync(gen(), (x) x * 2)。分页拉取、流式读取、批量并发处理这些异步 收集的场景从此有了统一的原生表达。六、Iterator.concat迭代器也能拼接ES2025 引入了迭代器助手Iterator HelpersES2026 继续补齐新增静态方法 Iterator.concat()把多个可迭代对象串联成一个惰性迭代器逐个遍历不产生中间数组const list Iterator.concat( [1, 2, 3], // 数组 new Set([4, 5]), // Set (function* () { yield 6; })(), // 生成器 ); console.log([...list]); // [1, 2, 3, 4, 5, 6]因为是惰性求值即使拼接的数据源是无限生成器只要你在中途 break它也不会多消费一个元素。合并日志、拼接分页数据、组合配置项都非常顺手。七、JSON.parse 的 source 文本大整数不再丢精度JSON.parse({id: 9007199254740993}) 得到的数字会变成 9007199254740992——超过 Number.MAX_SAFE_INTEGER 的整数精度丢失这是后端传大 ID 时前端最常见的隐性 bug。ES2026 给 reviver 回调新增了第三个参数 context你可以拿到键对应的原始文本const json {id: 9007199254740993, name: Hermes}; const obj JSON.parse(json, (key, value, context) { if (key id) { // context.source 是未经过数字解析的原始字符串 return BigInt(context.source); // 9007199254740993n精度无损 } return value; }); console.log(obj.id); // 9007199254740993n ✅这样就能精确处理大整数、高精度小数等场景无需再引入 json-bigint 之类的库也不怕 Number 的精度陷阱。专题Temporal API —— 等了 9 年的 Date 替代者严格来说Temporal没有进入 ES2026 快照TC39 于 2026 年 3 月将其推进到 Stage 4预计收录于 ES2027。但它的实现已经遍布主流浏览器Chrome 131、Firefox 134与 Node.js 22今天就能用于生产因此被公认为 2026 年 JavaScript 最值得关注的大事。Date 对象的罪状众所周知可变、时区混乱、只支持毫秒、日期运算全靠手写。Temporal 提供了不可变的、时区感知的现代 API// 当前日期ISO 日历 const today Temporal.Now.plainDateISO(); console.log(today.toString()); // 2026-08-12 // 日期运算加两个月自动处理闰年与月末 const deadline Temporal.PlainDate.from(2026-08-12).add({ months: 2 }); console.log(deadline.toString()); // 2026-10-12 ✅ // 时区感知的精确时刻 const now Temporal.Now.zonedDateTimeISO(Asia/Shanghai); console.log(now.toLocaleString(zh-CN)); // 2026/8/12 14:00:00 GMT08:00 // 计算两个日期相差的天数 const days Temporal.PlainDate.from(2026-08-12) .until(Temporal.PlainDate.from(2026-10-01)).days; console.log(days); // 50Temporal 覆盖了 PlainDate、PlainTime、ZonedDateTime、Duration 等 10 个类型配合 Intl.DurationFormat 还能直接输出2 小时 15 分钟这类本地化文案。对日期敏感的预订系统、排期系统、国际化业务建议尽早用 js-temporal/polyfill 平滑迁移。兼容性与升级建议一句话总结各特性的可用情况• **已广泛可用**Array.fromAsync、Error.isError、Math.sumPrecise、Map.getOrInsertChrome 137 / Firefox / Safari / Node 22 逐步落地• **逐步铺开**Uint8Array Base64/Hex、Iterator.concat、JSON.parse source 文本• **即将到来**TemporalStage 4浏览器已支持正式进规范预计 ES2027、using 显式资源管理、import defer 延迟导入给团队三个可落地的建议1.低风险先上Math.sumPrecise、Map.getOrInsert、Error.isError 属于纯增量 API不破坏任何现有代码直接在 lint 规则里推荐即可。2.重点项目试用新项目把 Array.fromAsync、Uint8Array 编解码写进团队代码规范减少第三方依赖。3.Temporal 提前布局虽然它预计 2027 年才进规范但 API 已冻结、polyfill 生产可用日期处理密集的业务现在就可以开始迁移越晚成本越高。总结ES2026 是典型的补课型版本——没有炫技语法但每一个特性都精准命中开发者日常的痛点精度、编码、检测、集合、异步、解析。它传递的信号很明确JavaScript 正在从够用走向好用。建议收藏本文对照检查你的代码里还有哪些手写轮子可以替换成原生 API。如果你已经在生产环境用上了这些特性欢迎在评论区分享踩坑经验---本文基于 ECMAScript 2026 正式规范2026 年 7 月批准与 TC39 提案进度整理示例代码可在最新版 Chrome / Node.js 中直接运行。
返回列表