深入解析ECMAScript 2021(ES12)新特性

焦祯喜Kit

于 2025-06-11 09:13:29 发布

阅读量321

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00434/article/details/148577387

深入解析ECMAScript 2021(ES12)新特性

ECMAScript-new-features-list A comprehensive list of new ES features, including ES2015 (ES6), ES2016, ES2017, ES2018, ES2019 项目地址: https://gitcode.com/gh_mirrors/ec/ECMAScript-new-features-list

ECMAScript 2021（也称为ES12）是JavaScript语言的最新标准版本，它引入了一系列令人兴奋的新特性，这些特性将显著提升开发者的编码体验和效率。本文将全面解析这些新特性，帮助开发者更好地理解和应用它们。

逻辑赋值运算符

逻辑赋值运算符是ES2021中最实用的新特性之一，它将逻辑运算符和赋值操作符结合在一起，提供了更简洁的语法。

逻辑或赋值运算符(||=)

这个运算符会在左侧值为假值（falsy）时执行赋值操作。它的行为等价于x || (x = y)。

let title = '';
title ||= '默认标题';  // title现在是'默认标题'

逻辑与赋值运算符(&&=)

与逻辑或赋值相反，这个运算符在左侧值为真值（truthy）时执行赋值。

let user = { name: '张三' };
user.name &&= '李四';  // user.name现在是'李四'

空值合并赋值运算符(??=)

这个运算符专门针对null和undefined，只有当左侧值为null或undefined时才会执行赋值。

let count = null;
count ??= 10;  // count现在是10

字符串的replaceAll方法

String.replaceAll()解决了长期以来只能使用正则表达式全局替换字符串的痛点。

const text = "苹果,苹果,香蕉";
console.log(text.replaceAll("苹果", "橙子"));  // "橙子,橙子,香蕉"

Promise.any和AggregateError

Promise.any()是Promise家族的新成员，它与Promise.all()形成互补：

const promises = [
  Promise.reject('错误1'),
  Promise.resolve('成功1'),
  Promise.resolve('成功2')
];

Promise.any(promises)
  .then(value => console.log(value))  // 输出"成功1"
  .catch(error => console.error(error.errors));

当所有Promise都拒绝时，会抛出包含所有错误的AggregateError。

数字分隔符

为了提高大数字的可读性，ES2021引入了下划线作为数字分隔符：

const billion = 1_000_000_000;  // 比1000000000清晰多了
const pi = 3.141_592_653_589;  // 小数部分也能用

国际化增强

Intl.ListFormat

这个新API提供了语言敏感的列表格式化功能：

const list = ['苹果', '香蕉', '橙子'];
const formatter = new Intl.ListFormat('zh', { 
  style: 'long', 
  type: 'conjunction' 
});

console.log(formatter.format(list));  // "苹果、香蕉和橙子"

DateTimeFormat的dateStyle和timeStyle

简化了日期时间的格式化：

const date = new Date();
const formatter = new Intl.DateTimeFormat('zh', {
  dateStyle: 'full',
  timeStyle: 'long'
});

console.log(formatter.format(date));  // "2023年5月10日星期三 中国标准时间 下午3:45:23"

WeakRef和FinalizationRegistry

这两个高级API为内存管理提供了更精细的控制：

// 创建弱引用
let obj = { data: "重要数据" };
const weakRef = new WeakRef(obj);

// 注册终结器
const registry = new FinalizationRegistry(heldValue => {
  console.log(`${heldValue}被垃圾回收了`);
});

registry.register(obj, "我的对象");

// 当obj不再被强引用时，回调将被执行
obj = null;