这次我帮大家梳理了最近几年加入 ECMAScript 标准的现代 JavaScript 新特性。这里没有那些遥不可及的理论提案，全是目前已经得到环境支持、可以直接在项目中用起来的硬核语法。你会发现，JavaScript 的进化变得越来越低调，也越来越聪明。

现代 JavaScript 稳健的底层基石

先来看看前两年沉淀下来的几个极其好用的特性，它们已经成为了编写优雅代码的标配。

Error.cause：让错误链条清晰可见以前当一个错误引发了另一个错误时，底层的核心报错信息很容易在层层抛出的过程中丢失。我们不得不手动拼接字符串或者魔改错误对象。现在，你可以在抛出异常时直接关联原始错误：

try {  await fetchUser();
} catch (err) {  throw new Error("用户数据加载失败", { cause: err });
}

这样在排查日志时，整个错误的来龙去脉一目了然。

Object.hasOwn()：更干净的属性检查过去为了安全地检查一个对象是否包含某个属性（而不是来自原型链），我们不得不写出极其冗长的一串代码： Object.prototype.hasOwnProperty.call(obj, "key")。这既不好读也不好记。现在的写法清爽多了：

const user = { name: "老王" };Object.hasOwn(user, "name");     // trueObject.hasOwn(user, "toString"); // false

顶层 await：告别无意义的外层包裹以前在模块的顶层，你不能直接使用 await。哪怕是一个简单的初始化脚本，也必须用一个立即执行的异步函数（IIFE）或者 init() 把代码包起来。现在，繁琐的仪式感没有了，逻辑直截了当：

const config = await fetchConfig();const db = await connectToDatabase(config);console.log("应用启动成功");

这对于编写后端脚本、动态加载大型模块或读取配置文件来说，体验提升了不止一个档次。

类的私有字段：真正的底层隔离以前在 JavaScript 里写私有属性，大家心照不宣地用下划线 _privateField 开头，然后祈祷同事不要在外部乱动它。但这只是君子协定，不是真正的私有。现在有了 # 号，语言底层帮你强制隔离：

class Counter {
  #count = 0;
  #increment() {    this.#count++;
  }  increase() {    this.#increment();
  }
}

如果在外部强行调用 counter.#count，代码会直接报语法错误，内部逻辑真正做到了安全封装。

.at()：优雅的相对索引想要获取数组的最后一个元素，以前的经典写法是 arr[arr.length - 1]。能跑，但不够美观。现在一个简单的负数索引就能搞定：

const arr = ['A', 'B', 'C'];
arr.at(-1); // 'C'

数据处理的安全进化

对原始数据的无意修改，往往是前端 Bug 的重灾区。新特性在这方面做了长足的改进。 橘子影视

toSorted()：不破坏原数组的排序大家都知道 Array.prototype.sort() 会直接修改原数组，导致数据源被污染。为此，我们习惯了在排序前用展开运算符 [...arr].sort() 先克隆一份。现在有了直接返回新数组的纯函数版本：

const numbers = [3, 1, 2];const sorted = numbers.toSorted();console.log(numbers); // [3, 1, 2] 原数组完好无损console.log(sorted);  // [1, 2, 3] 得到了排序后的副本

toReversed() 与 toSpliced()基于同样的“不可变数据”理念，数组反转和截取也拥有了不污染原数组的对应版本。 arr.toReversed() 和 arr.toSpliced(1, 1) 让你在进行数据处理时，再也不用担心下游的代码突然崩溃。

findLast() 与 findLastIndex()如果想从后往前查找符合条件的第一个元素，以前得先克隆数组、反转、再查找，不仅代码嘈杂，对大数组的性能也不好。现在直接一行搞定：

const numbers = [1, 4, 7, 4, 9];
numbers.findLast(n => n > 3);      // 9numbers.findLastIndex(n => n > 3); // 4

更聪明的异步流与数据归类

最近的标准在业务逻辑的连贯性上下足了功夫。 极光影院

Object.groupBy()：千呼万唤始出来的聚合函数以前要把一个数组按照某个属性归类，我们得写一段连自己都要看两眼的 reduce 累加器。现在这个高频操作终于变成了原生支持：

const users = [
  { name: "老王", role: "admin" },
  { name: "小张", role: "user" },
  { name: "老李", role: "admin" }
];const grouped = Object.groupBy(users, u => u.role);

一句话就能拿到按 admin 和 user 分组后的对象，干净利落。

Promise.withResolvers()：让控制权流转更自然在某些事件驱动的场景下，我们需要从 Promise 外部去触发 resolve 或 reject。以前要在外面定义变量把控制权接出来，写起来怪模怪样的。现在官方给了一套解构方案：

const { promise, resolve, reject } = Promise.withResolvers();setTimeout(() => resolve("大功告成！"), 1000);await promise;

可调整大小的 ArrayBuffer对于喜欢折腾二进制、数据流或者 Web Workers 的开发者来说，以前 ArrayBuffer 大小固定是个硬伤。现在你可以在创建时指定最大容量，后续按需扩容或缩容：

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
buffer.resize(12); // 在安全范围内灵活变动

函数式编程逐渐走向主流

最新的规范里包含了许多对函数式编程和数学操作的官方支持，这极大地规范了前端生态。

迭代器辅助函数（Iterator Helpers）在处理大数据集时，连续调用 .map().filter().slice() 会在每一步都生成一个全新的中间数组，极其消耗内存。而全新的迭代器方法支持延迟执行：

const result = iterator
  .map(x => x * 10)
  .filter(x => x > 80)
  .take(5)
  .toArray();

在最终调用 .toArray() 之前，中间没有任何计算和多余的内存分配，属于典型的性能友好型设计。

原生的集合（Set）数学运算求两个集合的交集、并集或差集，以前得把 Set 转回数组、写各种过滤再包回来。现在，原生的数学方法直接落地：

const a = new Set([1, 2, 3]);const b = new Set([2, 3, 4]);
a.intersection(b); // Set {2, 3} (交集)a.union(b);        // Set {1, 2, 3, 4} (并集)a.difference(b);   // Set {1} (差集)

RegExp.escape()：防患于未然的安全转义把用户输入直接拼进正则表达式是件很危险的事，那些类似 *、 .、 ( 的特殊字符不仅会引发报错，严重时还会导致正则注入攻击。现在官方内置了转义工具：

const regex = new RegExp(RegExp.escape(userInput));

省去了每个人在工具类里自己写正则过滤函数的麻烦。

Promise.try()：抹平同步与异步的鸿沟如果一个函数可能是同步的也可能是异步的，传统代码需要小心翼翼地包裹 try...catch，还要配合 catch()。现在用 Promise.try()，不管目标函数是直接抛错还是返回拒绝状态，它都会统一处理并包装成一个 Promise 对象，让错误处理逻辑不再割裂。

Float16Support：为性能妥协的艺术JavaScript 默认的数字都是 64 位浮点数，这在处理机器学习、GPU 渲染或海量音频数据时非常浪费空间。最新的 Float16Array 带来了半精度浮点数支持，内存占用仅为原来的四分之一，让密集数据在硬件层面的传输速度有了质的提升。