ES2021是JavaScript在2021年的最新版本，它引入了许多新功能和改进，这些新功能可以让JavaScript在编写时更加容易和灵活，同时提高代码的可读性和可维护性。在本文中，我们将介绍5个ES2021新功能，并为每个功能提供示例代码，希望对JavaScript的学习和应用有所帮助。
1. String.prototype.replaceAll()
在ES2021中，我们可以使用String.prototype.replaceAll()函数来替换字符串中所有匹配的子字符串。这种替换效果与String.prototype.replace()类似，但不同之处在于使用replaceAll()时，我们可以一次替换所有匹配的子字符串，而不是一次只替换一个。
下面是一段示例代码：
const originalString = 'JavaScript is awesome with JavaScript.';
const replacedString = originalString.replaceAll('JavaScript', 'TypeScript');
console.log(replacedString);
// Output: TypeScript is awesome with TypeScript.在这个例子中，我们将字符串originalString中所有的“JavaScript”替换为“TypeScript”，并赋值给replacedString。最后，我们在控制台输出了替换后的字符串。
2. Promise.any()
Promise.any()是另一个ES2021中的新功能，它执行一组Promise并返回其中任何一个已解析的值。如果所有的Promise都被拒绝，则Promise.any()会返回一个AggregateError对象，该对象包含所有的拒绝原因。
下面是一段示例代码：
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'First Promise')); const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second Promise')); const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 1500, 'Third Promise')); Promise.any([promise1, promise2, promise3]) .then(result => console.log(result)); // Output: First Promise
在这个例子中，我们创建了三个Promise对象，并使用Promise.any()来执行这三个Promise。由于promise1最先得到解析，因此Promise.any()返回promise1的值，并在控制台输出“First Promise”。
3. WeakRefs
WeakRefs是ES2021中一个新的API，它提供了一种机制来减少JavaScript中的内存泄漏。
在JavaScript中，如果某个对象被引用，那么该对象将一直存在于内存中，并占用内存空间，即使它在程序中已经没有使用场景了。在某些情况下，这可能导致内存泄漏。
WeakRefs提供了一种机制来解决这个问题。我们可以使用WeakRef()函数来创建一个WeakRef对象，这个对象不会增加目标对象的引用计数，也不会阻止目标对象的垃圾回收。
下面是一段示例代码：
let targetObject = { name: 'targetObject' };
const weakRef = new WeakRef(targetObject);
targetObject = null;
console.log(weakRef.deref());
// Output: undefined在这个例子中，我们创建了一个targetObject对象，并使用WeakRef()函数创建了一个名为weakRef的WeakRef对象。接下来，我们将targetObject设置为null，使其变为垃圾回收对象。最后，我们调用了weakRef.deref()函数，以检查目标对象是否已被成功回收。
4. Logical Assignment Operators
在ES2021中，我们可以使用逻辑赋值运算符来简化一些常见的变量赋值操作。这些逻辑运算符包括 &&=， ||= 和 ??=。使用这些运算符，我们可以更简洁地编写代码，并提高代码的可读性。
&&=表示当左侧值为truthy时，才会将右侧的值赋给变量。例如，x &&= y会将y赋给变量x，当x为truthy时。
||=表示当左侧值为falsy时，才会将右侧的值赋给变量。例如，x ||= y会将y赋给变量x，当x为falsy时。
??=表示当左侧值为null或undefined时，才会将右侧的值赋给变量。例如，x ??= y会将y赋给变量x，当x为null或undefined时。
下面是一些示例代码：
-- -------------------- ---- ------- --- - - ----- --- - - ---- - --- -- --------------- -- ------- --- --- - - --- --- - - ---- - --- -- --------------- -- ------- -- --- - - ------ --- - - ---- - --- -- --------------- -- ------- ---
在这些代码中，我们演示了逻辑赋值运算符的基本用法。
5. Numeric Separators
在ES2021中，我们可以使用下划线作为数字的分隔符，以提高数字的可读性。
这个新特性可以在数字的代码中插入下划线，以分隔数字的不同部分，使得数字更加易于理解。
下面是一些示例代码：
const billion = 1_000_000_000; console.log(billion); // Output: 1000000000 const floatNumber = 1234.567_890; console.log(floatNumber); // Output: 1234.56789
在这些代码中，我们使用了下划线作为数字的分隔符，以便更好地阅读数字。
结论
在本文中，我们介绍了ES2021中的5个新功能，每个功能都提供了相应的示例代码供参考。这些新功能可以帮助我们更容易地编写JavaScript代码，并提高代码的可读性和可维护性。如果您是一名前端开发人员，我希望这些新功能能够对您的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f39917f40ec5a964e35173