ECMAScript 2023（ES14）中的所有新功能

​JavaScript在持续发展，近期ECMAScript 14中发布添加了一批新功能，让我们一起来探索一下今年对JavaScript开发人员的新功能。时间的车轮又过去了一年，随之而来的是JavaScript的新官方版本：ECMAScript 2023，也被称为ECMAScript 14。今年的改进包括对数组的添加和对ECMAScript文件中shebang的支持，以及对弱集合的符号键的扩展。这些变化主要是对语言的细化改进，而不是什么重大的变革。然而，这些改变的综合效果是继续推进语言的发展。下面是JavaScript在2023年的新功能概览演示。

理解规范

ECMAScript规范是一份令人印象深刻的文档，既是开发人员和教育者的基本参考，也是JavaScript引擎实现者的官方技术规范。这是一个相当平衡的过程，规范处理得很好。由于包含了大量的信息，它作为语言的用户指南可能有些繁琐。

关于规范的另一个要了解的事情是，它实际上是一个活动的文档，在语言在实际应用中使用时会不断发展。通常情况下，新功能在被用户社区非正式接受后才会被添加到官方规范中。例如，今年的shebang语法就是一个例子。一旦一个功能被规范所编码和标准化，规范就成为进一步创新该功能的新稳定基础。 

有时，ECMAScript规范引入了开创性的想法。一个例子是采用了受C#影响的/语法。async/await 作为一种语言，JavaScript已经从复制粘贴的鼠标悬停效果的时代飞跃而来。ECMAScript规范过程在这一演变中起到了巨大的作用。

现在，让我们来看看在2023年引入的JavaScript的新功能。

数组原型对象的toSorted方法

让我们从新的数组方法toSorted()开始。toSorted()具有与sort()相同的签名，但它创建一个新的数组，而不是在原数组上进行操作。下面是列表1中的新数组方法Array.prototype.sort()与toSorted()的对比。 

列表1. sort()与toSorted()的对比

let arr = [5,4,2,3,1]
arr === arr.sort(); // true - [1, 2, 3, 4, 5]
​
arr === arr.toSorted(); // false - [1, 2, 3, 4, 5]

toSorted()和sort()一样，也接受一个可选的参数，即比较函数。例如，我们可以使用toSorted()创建一个按降序排列的新数组，如列表2所示。

列表2. 使用比较函数

const numbers = [10, 5, 2, 7, 3, 9, 1, 6, 4]; 
const sortedNumbers = numbers.toSorted((a, b) => { 
  return b - a; 
}); 
console.log(sortedNumbers); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

还需要注意的是，toSorted()也可以应用于对象数组。在这种情况下，您必须提供一个使用对象上的数据的比较函数，因为对象没有自然的排序方式。您可以在列表3中看到一个示例。

列表3. 使用对象的toSorted()

// Comparing objects
const objects = [{ name: "John", age: 30 }, { name: "Jane", age: 25 }, { name: "Bill", age: 40 }, { name: "Mary", age: 20 }];
const sortedObjects = objects.toSorted((a, b) => {
  return a.name.localeCompare(b.name); 
});
console.log(sortedObjects);
//[{"name":"Bill","age":40},{"name":"Jane","age":25},{"name":"John","age":30},{"name":"Mary","age":20}]

与toSorted()和sort()类似，toReversed()是reverse()的复制版本。列表4中有一些使用toReversed()的快速示例，包括将其应用于带有比较函数的对象。 

列表4. 使用toReversed()

["a","b","c","d","e"].toReversed(); // ['e', 'd', 'c', 'b', 'a']

Array.prototype.with新的with()方法允许您根据索引修改单个元素，并返回一个新的数组。因此，如果您知道索引和新值，这个方法非常方便。请注意，with()是set()的复制伴侣。列表5给出了一个简单的示例。

列表5. 使用with()和set()方法的示例

const arr4 = ["I", "am", "the", "Walrus"];
​
// Replace the string "Walrus" with "Octopus".
const newArr4 = arr4.with(3, "Ape Man");
​
console.log(newArr4);

Array.prototype.findLast方法允许您从数组中获取最后一个匹配元素的实例。如果没有找到匹配的元素，则返回undefined。在列表6中给出了一个简单的示例，我们从数组中获取最后一个偶数。

列表6. 使用findLast()方法的示例

onst arr = [54, 34, 55, 75, 98, 77];
​
const lastEvenIndex = arr.findLast((element) => {
  return element % 2 === 0;
});
​
console.log(lastEvenIndex); // 98

findLast()还支持传入一个” “来设置上下文。也就是说，第二个参数将告诉第一个参数函数关键字将指向什么。您可以在列表7中看到这一点，在列表7中，我们使用一个自定义对象来查找第一个可以被5.thisArgthis整除的元素。

列表7.使用thisArg

const arr6 = [54, 34, 55, 75, 98, 77];
const myObject = {testCase: 5};
const lastEvenIndex = arr5.findLast((element) => {
  return element % myObject.testCase === 0;
}, myObject);
​
console.log(lastEvenIndex); // 75

findLastIndex()的工作方式与之完全相同，只不过它提供的是元素匹配的索引，而不是元素本身。例如，列表8显示了如何查找可被6整除的最后一个元素的索引。

列表8.使用findLastIndex()查找元素的索引

const arr = [54, 34, 55, 75, 98, 77];
arr.findLastIndex(x => x % 6 === 0); // 0

Array.prototype.toSpliced到目前为止，我们描述的所有方法也适用于。最后一个新的数组方法toSpliced()只存在于。该方法是JavaScript数组操作的复制版本——这是一种熟悉的瑞士军刀。拼接TypedArrayArraytoSpliced () ()假设我们有一个颜色数组，我们需要在中间插入两个新颜色(粉色和青色)。可以在清单9中看到这一点。记住，这会创建一个新数组，而不是修改原来的数组。

列表9.操作中的toSpliced()

const arr = ["red", "orange", "yellow", "green", "blue", "purple"]; const newArr = arr.toSpliced(2, 1, "pink", "cyan"); console.log(newArr); 
// ["red", "orange", "pink", "cyan", "green", "blue", "purple"]
console.log(newArr[3]);
// 'cyan'
console.log(arr[3]);
// ‘green’

shebang是一种老式的Unix说法，表示一个标签后面跟着一个感叹号(其中“bang”是“!”的俚语)。自古以来，在文件开头的注释就会告诉shell这里是一个可执行脚本，以及使用什么引擎来运行它。

列表10.一个典型的bash脚本

#!/bin/bash
​
echo "Hello, world!"

你可以像列表10中的示例那样直接运行一个文件，使用../hello.sh命令。在JavaScript中，你也可以做类似的操作，如列表11所示。 

列表11. JavaScript中的Shebang: hello.js

#!/usr/bin/env node
​
console.log("Hello, world!");

列表11中的代码告诉操作系统使用node程序来运行这个脚本。现在，你可以直接输入命令来运行它。如果没有Shebang注释，../hello.js这样是行不通的。Shebang支持是规范中的一个功能更新，已经在多个上下文中非官方地采用和实现。ECMAScript 14中的最后一个新功能是扩展了可以用作弱引用集合键的内容。与日常JavaScript用法相比，弱引用集合有点晦涩。在编程中，弱引用是指如果它本来应该被垃圾回收，那么它将被丢弃。换句话说，单独的弱引用不足以阻止垃圾回收算法将引用目标丢弃（这就是为什么它是弱引用）。你可以在这里了解更多关于弱引用以及它们何时有用的信息。这里也有一个很好的讨论。 ES14允许在集合中使用大多数符号作为键，而以前只能使用对象。如果你想知道什么是符号，你并不孤单。你可以在这里了解更多关于符号的信息。这个新功能本质上使得在集合中使用弱引用更加容易，通过放宽可以用作键的限制。列表12中展示了一个简单的示例。

列表12. 在WeakMap中使用符号作为键

var map = new WeakMap(); // create a weak map
function useSymbol(symbol){
    doSomethingWith(symbol);
    var called = map.get(symbol) || 0;
    called++; // called one more time
    if(called > 2) console.log(“Called more than twice”);
    map.set(symbol, called);
}
​
let mySymbol = Symbol(“FooBar”);
useSymbol(mySymbol);
useSymbol(mySymbol);
useSymbol(mySymbol);
​
delete mySymbol; // No live references are left to mySymbol, so we can count on the garbage collector eliminating the entry in the weakMap when it runs (eventually)

列表12是根据上面链接的StackOverflow答案进行修改的。在这个示例中，目的是允许从外部调用者调用计数器，并在没有引用时销毁映射条目。代码本身无法知道何时不再需要引用，如果使用普通的Map，将会导致内存泄漏。这是因为即使在调用它的客户端不再需要它之后，代码仍然会保持对引用的持有。在这种情况下，我们使用WeakMap，可以依靠垃圾回收在没有对键符号的引用时删除映射条目。

结论

尽管2023年对于JavaScript来说相对较平静，但ECMAScript 14添加了一些有用的功能，并使官方规范与现实世界保持同步。在下一个版本中，我们将会看到一系列的变化，包括一个全新的Temporal API用于处理日期和时间。

作者：Matthew Tyson

更多技术干货请关注公众号“云原生数据库”

squids.cn，目前可体验全网zui低价RDS，免费的迁移工具DBMotion、SQL开发工具等。