javascript es12更新了哪些最新技术

原创

小焱

发布于 2025-08-18 14:15:51

14900

代码可运行

文章被收录于专栏：前端开发前端开发

运行总次数：0

代码可运行

ES12（ECMAScript 2021）是JavaScript语言的第12个版本，于2021年6月正式发布。它引入了多项实用的新特性，主要聚焦于简化代码编写、增强语言表达能力和解决常见开发痛点。以下是ES12的主要更新：

1. 逻辑赋值运算符（Logical Assignment Operators）

结合逻辑运算符（&&、||、??）与赋值运算符（=），简化条件赋值逻辑。

||=：当左值为假值（falsy）时才赋值

let a = 0;
a ||= 10; // 等价于：a = a || 10 → a变为10

&&=：当左值为真值（truthy）时才赋值

let b = 20;
b &&= 30; // 等价于：b = b && 30 → b变为30

??=：当左值为null或undefined时才赋值（与||=的区别是不判断假值，如0、''）

let c = null;
c ??= 40; // 等价于：c = c ?? 40 → c变为40

let d = 0;
d ??= 50; // d仍为0（因为0不是null/undefined）

2. 数字分隔符（Numeric Separators）

允许在数字字面量中使用下划线（_）作为分隔符，提高大数字的可读性。

const billion = 1_000_000_000; // 10亿
const pi = 3.141_592_653;      // 圆周率
const binary = 0b1010_1100;    // 二进制
const hex = 0x8a_bc_ef;        // 十六进制

注意：分隔符不能放在数字的开头、结尾或小数点旁边。

3. `Promise.any()`

与Promise.all()相反，Promise.any()接收一组Promise，只要有一个Promise成功resolve，就立即返回该结果；如果所有Promise都reject，则返回一个包含所有错误的AggregateError。

const promises = [
  fetch('/api/data1').catch(() => null),
  fetch('/api/data2').catch(() => null),
  fetch('/api/data3').catch(() => null)
];

// 只要有一个请求成功就返回其结果
Promise.any(promises)
  .then(result => console.log('成功结果:', result))
  .catch(err => console.log('所有请求失败:', err.errors)); // 所有失败时触发

4. 弱引用（WeakRef）与终结器（FinalizationRegistry）

WeakRef：允许创建对象的弱引用，不会阻止垃圾回收（GC）对该对象的回收。适用于缓存场景，避免内存泄漏。

const obj = { data: '需要缓存的数据' };
const weakRef = new WeakRef(obj); // 创建弱引用

// 访问弱引用指向的对象（可能已被GC回收，返回undefined）
console.log(weakRef.deref()?.data); // "需要缓存的数据"（若未被回收）

FinalizationRegistry：注册一个回调函数，当弱引用的对象被垃圾回收时触发，用于清理相关资源。

// 创建终结器：对象被回收时执行回调
const registry = new FinalizationRegistry((value) => {
  console.log(`对象被回收了，清理资源: ${value}`);
});

const obj = {};
registry.register(obj, 'obj的资源'); // 关联对象与清理信息

// 当obj被GC回收后，会触发上面的回调

注意：由于GC行为不确定，弱引用和终结器应谨慎使用，避免依赖其执行时机。

5. `String.prototype.replaceAll()`

用于替换字符串中所有匹配的子串（之前需用正则表达式的/g标志）。

const str = 'a-b-c-d';
// 替换所有 '-' 为 '/'
const newStr = str.replaceAll('-', '/'); // "a/b/c/d"

// 等价于旧写法：str.replace(/-/g, '/')

总结

ES12的更新以实用主义为导向，没有引入颠覆性的特性，但每个新功能都能直接解决开发中的实际问题：

逻辑赋值运算符简化了条件赋值代码
数字分隔符提升了大数字的可读性
Promise.any()增强了异步操作的控制能力
弱引用机制为内存敏感场景提供了解决方案
replaceAll()让字符串全替换更直观

这些特性已被现代浏览器（Chrome 90+、Firefox 89+、Safari 14.1+）和Node.js 16+支持，可直接在项目中使用。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

#javascript

登录后参与评论

0 条评论

热度