ES12（也称作 ES2021）是 ECMAScript 的最新版本，其中包含了一些新的功能和语法，为前端开发带来了更多的便利和效率。本篇文章主要介绍 ES12 中对于 React 开发者最为重要的新功能，包括可选链操作符、Nullish 合并操作符、Promise.allSettled() 方法、WeakRefs 和 Finalizers 等。
可选链操作符
在 React 开发中，我们经常需要访问对象的属性或方法，但是如果对象不存在或者属性不存在，就会出现运行时错误。ES12 中的可选链操作符 ?. 可以解决这个问题，它可以在访问对象属性或方法时自动进行空值检查，如果对象或属性不存在，则返回 undefined，而不是抛出错误。
示例代码：
// www.javascriptcn.com code example
const user = {
name: 'Tom',
age: 18,
address: {
city: 'Shanghai'
}
};
// 传统写法
const city = user && user.address && user.address.city;
// 新写法
const city = user?.address?.city;Nullish 合并操作符
在 React 开发中，我们经常需要设置默认值，以防止出现 undefined 或 null 的情况。ES12 中的 Nullish 合并操作符 ?? 可以帮助我们更方便地设置默认值，它只会在左侧的值为 null 或 undefined 时才返回右侧的值，否则返回左侧的值。
示例代码：
// 传统写法 const name = user.name || 'Unknown'; // 新写法 const name = user.name ?? 'Unknown';
Promise.allSettled() 方法
在 React 开发中，我们经常需要同时发起多个异步请求，并等待它们全部完成后再进行下一步操作。ES12 中的 Promise.allSettled() 方法可以帮助我们实现这个功能，它接收一个 Promise 数组作为参数，返回一个新的 Promise 对象，该 Promise 对象在所有输入的 Promise 对象都已经 settled（即已经 fulfilled 或 rejected）后才会 settle，返回一个由所有 Promise 对象状态组成的数组。
示例代码：
// www.javascriptcn.com code example
const promises = [
fetch('/api/user/1'),
fetch('/api/user/2'),
fetch('/api/user/3')
];
Promise.allSettled(promises)
.then(results => {
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log(result.value);
} else {
console.log(result.reason);
}
});
});WeakRefs 和 Finalizers
在 React 开发中，我们经常需要处理大量的数据，而这些数据可能会占用大量的内存。ES12 中的 WeakRefs 和 Finalizers 可以帮助我们更好地管理内存，减少内存泄漏的问题。
WeakRefs 是一种新的引用类型，它不会阻止垃圾回收器回收对象。我们可以通过 WeakRefs 来跟踪对象的引用情况，并在对象被回收时进行相应的处理。Finalizers 是一种新的函数类型，它可以在对象被垃圾回收器回收之前执行一些清理操作，例如关闭文件、释放资源等。
示例代码：
// www.javascriptcn.com code example
// 创建 WeakRef
const ref = new WeakRef(obj);
// 获取 WeakRef 引用的对象
const obj = ref.deref();
// 创建 Finalizer
const finalizer = new FinalizationRegistry(obj => {
// 在对象被回收之前执行一些清理操作
console.log('Object is about to be garbage collected:', obj);
});
// 注册对象的 Finalizer
finalizer.register(obj, 'some metadata');结语
ES12 中的这些新功能和语法为 React 开发者带来了更多的便利和效率，同时也提高了代码的可读性和可维护性。我们应该及时学习和掌握这些新功能，以便更好地应对实际开发中的各种场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da17cfa941bf71341cf68d