JS 开发者必看!TC39 2025 最新动向,这些新语法要火?
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
TC39 第 108 次会议最近推进了 9 项提案,涵盖 4 个阶段,包括从粗略构思(第 0 阶段)到完全标准化功能(第 4 阶段)的各个阶段。
以下是对每个阶段的简要概述,以及这些阶段对 JavaScript 未来可能产生的影响。
1、stage 4
显式资源管理 (using)
新的 using 声明及其异步变体 await using 添加了确定性的资源清理功能,其灵感源自 C# 和 Python 等语言。对象可以定义 Symbol.dispose(或 Symbol.asyncDispose),其会在 using 块结束时自动调用:
class FileHandle {
constructor(name) {
this.name = name; /* open file... */
}
[Symbol.dispose]() {
console.log(`${this.name} closed`); /* close file */
}
}
function readFile() {
{
using file = new FileHandle("data.txt");
// read from file...
}
// file.[Symbol.dispose]() was called here automatically
}
readFile(); // logs "data.txt closed"
即使块内发生异常,也能确保清理,例如:关闭文件或流,从而使资源管理更轻松、更安全。
此功能已在 Chrome 134、Firefox 134 和 Deno v2.3 中支持。
Array.fromAsync
Array.fromAsync 与 Array.from 类似,但适用于异步可迭代对象,返回一个解析结果数组的 Promise。其也支持映射函数和 thisArg,就像 Array.from 一样。
例如,给定一个异步值生成器,开发者可以这样写:
async function* generate() {
yield await Promise.resolve(1);
yield await Promise.resolve(2);
}
const nums = await Array.fromAsync(generate()); // [1, 2]
Array.fromAsync(generate()) 返回一个 Promise,一旦所有 yield 的值都就绪就会 resolve 为 [1, 2]。
Array.fromAsync 在所有浏览器以及 Deno v1.38 和 Node v22 中均可用。
Error.isError
Error.isError(value) 是一个新增的内置函数,用于可靠地检测 Error 对象。如果 value 是任何类型的错误,包括:跨领域 (cross-realm) 或子类错误则返回 true,否则返回 false。
Error.isError(new TypeError("oops"));
// true
Error.isError({ name: "TypeError", message: "oops" });
// false
虽然该功能不是特别有必要,但如果没有此功能,编写某些 polyfill 可能会比较困难。 Error.isError 在所有浏览器以及 Deno v2.2 中均受支持。
2、Stage 3
Immutable ArrayBuffer
Immutable ArrayBuffer 现已进入第 3 阶段,引入了 transferToImmutable() 和 sliceToImmutable() 方法。在缓冲区上调用 transferToImmutable() 会将其数据移动到一个新的、不可更改的缓冲区中,并分离原始缓冲区。
let buf = new ArrayBuffer(100);
let imm = buf.transferToImmutable();
// buf 现已分离(byteLength 0)
// imm 是一个新的长度为 100 的不可变 ArrayBuffer
console.log(buf.byteLength, imm.byteLength);
// 0, 100
// 尝试修改 imm 将引发 TypeError
imm[0] = 1;
// TypeError:无法修改不可变的 ArrayBuffer
类似地,sliceToImmutable(start, end) 会创建一个子范围的不可变副本。不可变缓冲区无法分离或修改,这使得共享二进制数据(例如:跨线程或 Worker)更加安全高效。
Deno 计划利用此功能来优化各种以字节数组为输入的 API,例如: new Response() 或 Deno.writeFile(),从而避免不必要的副本,并提高处理二进制数据时的性能。
3、Stage 2
Random.Seeded
当前的伪随机数生成器方法,例如: Math.random(),会自动设定种子,因此无法跨运行或跨领域 (realms) 重现。然而,有时开发者又确实需要一组可重现的随机值。
Random.Seeded 提案提出了一个新的 SeededPRNG 类,允许开发者设置种子,从而提供可重现的随机性。此时,可以创建一个 Random.Seeded(seedValue) 对象,并使用其 .random() 方法代替 Math.random()。
const prng = new Random.Seeded(42);
for (let i = 0; i < 3; i++) {
console.log(prng.random());
// 给定种子 42,每次运行时打印相同的序列
该功能在可重复性至关重要的游戏或模拟中非常有用。
Number.prototype.clamp
Number.prototype.clamp(min, max) 函数(原为 Math.clamp)返回一个介于 min 和 max 之间的数字,这对于将值保持在一定范围内非常方便。
(5).clamp(0, 10);
// 输出 5
(-5).clamp(0, 10);
// 输出 0 (floored at 0)
(15).clamp(0, 10);
// 输出 10 (capped at 10)
如果 min > max 则抛出 RangeError,有效避免了像 Math.min(Math.max(x, min), max) 这样的冗长模式,并明确了意图。
4、Stage 1
保留尾随零
Intl.NumberFormat 中新增的格式化选项允许保留或删除数字中的尾随零,从而有助于理解部分十进制值,例如:金额等。
trailingZeroDisplay: "auto" 设置默认会根据指定的精度保留零;当数字为整数时,"stripIfInteger" 会删除零。
// 保留两位小数(自动保留零)
new Intl.NumberFormat("en", {
minimumFractionDigits: 2,
trailingZeroDisplay: "auto",
}).format(1.5); // "1.50"
// 如果不需要,则去掉零:
new Intl.NumberFormat("en", {
minimumFractionDigits: 0,
trailingZeroDisplay: "stripIfInteger",
}).format(2);
// "2" (not "2.0")
随机函数
本提案引入了一个新的 Random 命名空间,其中包含一些便捷的方法,以避免常见的随机性陷阱。Random 命名空间中的方法不仅可以生成随机数值,还可以接受并返回集合。
// -5 到 5 之间的随机整数
Random.int(-5, 5); // -1
// 0 到 10 之间的随机数
Random.number(0, 10); // 8
// 0 至 5 之间的随机数,步长为 0.1
Random.number(0, 5, 0.1); // 1.1
// 从数组中随机选择 n 个元素
const name = Random.take(["Alice", "Bob", "Carol"], 2);
// ['Alice', 'Bob']
// 随机替换数组元素
Random.take(["Alice", "Bob", "Carol"], 2, { replace: true }); // ['Alice', 'Alice']
// 设置权重
Random.take(["Alice", "Bob", "Carol"], 2, { weights: [1, 1, 5] }); // ['Alice', 'Bob']
// 随机选择一个元素
Random.sample(["Alice", "Bob", "Carol"]); // 'Bob'
// 修改并返回一个“已打乱的”数组
Random.shuffle([1, 2, 3, 4]); // [4,2,1,3]
// 返回一个新的打乱数组
const shuffled = Random.toShuffled([1, 2, 3, 4]);
参考资料
https://deno.com/blog/updates-from-tc39
https://medium.com/@asierr/javascript-in-2025-the-newest-features-you-need-to-know-314af3026b5a