探索 ECMAScript 2023 中的新数组方法

前言

ECMAScript 2023 引入了一些新功能，以改进语言并使其更加强大和无缝。这个新版本带来了令人兴奋的功能和新的 JavaScript 数组方法，使使用 JavaScript 编程更加愉快和轻松。本文将带领读者全面了解 JavaScript 数组原型上的新方法。

什么是ECMAScript?

ECMAScript 是一种标准化的脚本语言，它是 JavaScript 的规范。ECMAScript 2023 是 JavaScript 编程语言的更新，旨在带来改进并使 JavaScript 程序可预测和可维护。

ECMAScript 2023 引入的新方法

toReversed()

toReversed() 与 reverse() 类似。 toReversed() 方法以相反的顺序返回数组的元素，而不更改原始数组。(请注意，ECMAScript 2023 代码片段中的新 JavaScript 方法在现代 Web 浏览器上运行。从 MDN 检查浏览器功能。它适用于浏览器，因为方法仍然很新。此外，Node.js 不支持这些方法。Node.js 版本 20+ 支持它们。这不利于开发人员，因为开发人员使用 Node.js LTS 版本（版本 18）。)

eg：让我们看一下按时间顺序排列的一周中几天的列表。结果将以相反的顺序显示。
使用 reverse() 方法会修改原始数组。

// 这是原始数组
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
 
// 使用reverse()
const reverseDays=days.reverse();
console.log(reverseDays);
// 输出: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday']
 
console.log(days);
// 输出原始数组已被修改: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday'
 

eg: toReversed() 方法在不更改原始数组的情况下反转数组。看看这个例子：

 
// 使用toReversed() 
const reversedDays=days.toReversed();
console.log(reversedDays);
 
// 输出: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday']
 
console.log(days);
// 输出原始数组没有被修改: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
 

toReversed() 功能是开发人员欣赏的一项显着功能。这是因为原始数组是用该 reverse() 方法变异的。感谢 ECMAScript 2023 引入该 toReversed() 方法。使用此方法，您可以更改数组的副本，而不是原始数组。

toSorted()

toSorted() 类似于 JavaScript 的 sort() 方法。但两种方法彼此不同，是的！你猜对了。与 sort() 不同，toSorted() 方法不会更改原始数组。 toReversed() 方法返回一个新数组，使原始数组保持不变。

eg: 考虑这种情况，我们需要按升序对数字进行排序。此示例将说明 和 toSorted() 之间的区别。

// 这是原始数组
const numbers=[9, 4, 8, 1, 6, 3];
 
// 使用sort()
const sortNumbers=numbers.sort();
console.log(sortNumbers);
// 输出:[1, 3, 4, 6, 8, 9]
 
console.log(numbers)//original array
// 输出:[1, 3, 4, 6, 8, 9]
 
// 使用toSorted()
const sortNumbers=numbers.toSorted();
console.log(sortNumbers);
// 输出:[1, 3, 4, 6, 8, 9]
 
console.log(numbers)//original array
// 输出:[9, 4, 8, 1, 6, 3]
// 原始数组未被修改

toSorted() 方法修改上述实例中的复制版本。它返回一个新数组，其中元素按升序排序。但是，原始数组不会更改。另一方面， sort() 方法将原始数组就地改变，如上面的示例所示。

toSpliced()

toSpliced() 数组方法是 ECMAScript 2023 中的一项新功能。类似于 JavaScript 的 splice() 数组方法，但略有不同。两种数组方法的区别在于 toSpliced() 不会修改原来的数组。toSpliced() 创建一个包含已更改元素的新数组，但原始数组保持不变。 toSpliced() 可以在一个数组中执行多项操作。您可以添加、删除和替换数组中的元素。

eg: 让我们考虑一个场景，我们有一个元素列表，并希望在不更改原始数组的情况下删除一些元素。此示例将说明 和 toSpliced 之间的区别 splice() 。

// 原始数组
const fruits=['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples'];
 
// 使用Splice()
const spliceFruits= fruits.splice(2,1);//removing one fruit(Bananas)
console.log(spliceFruits);
// 输出: ['Grapes', 'Oranges', 'Mangoes', 'Pineapples']
 
console.log(fruits);//original array is altered
// 输出: ['Grapes', 'Oranges', 'Mangoes', 'Pineapples']
 
// 使用toSpliced()
const splicedFruits= fruits.toSpliced(4,1);//removing one fruit(Pineapples)
console.log(splicedFruits);
// 输出: ['Grapes', 'Oranges', 'Bananas', 'Mangoes']
 
console.log(fruits);//original array remain unmodified
// 输出: ['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']
 
// 添加一个元素在索引1处
const fruits2 = fruits.toSpliced(1, 0, "Passion");
console.log(fruits2); 
// 输出: ['Grapes', 'Passion', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']
 
// 用两个新元素替换索引1处的一个元素
const fruits3 = fruits2.toSpliced(1, 1, "Guava", "Melon");
console.log(fruits3); 
// 输出: ['Grapes', 'Guava', 'Melon', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']
 
// 原始数组未被修改
console.log(fruits)
// 输出: ['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']
 

toSpliced() 数组方法是 JavaScript 语言的一个重要附加功能。它允许开发人员在不更改原始数组的情况下操作数组。这使开发人员能够轻松管理和维护代码。如上面的示例所示，此方法提供了一种更方便的方法来添加、删除或替换任何数组索引处的元素。

with()

with() 数组方法在引入 ECMAScript 2021 （ES12） 时被添加到 JavaScript 编程语言中。更新数组中的元素在 JavaScript 中很常见。但是，更改数组元素会修改初始数组。with() 数组方法在 ECMAScript 2023 中引入了一项新功能。该 with() 方法提供了一种在不更改原始数组的情况下更新数组中元素的安全方法。

eg: 这是通过返回一个包含更新元素的新数组来实现的。

const flowers=['Lily', 'Daisy', 'Iris', 'Lotus', 'Allium'];
 
// 旧方法更新数组
flowers [4]='Rose';
console.log(flowers);
// 输出: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Rose']
 
// 使用新方法with()更新数组
const updatedFlowers=flowers.with(4, 'Aster');
console.log(updatedFlowers);
// 输出: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Aster']
 
console.log(flowers);//original array
// 输出: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Allium']

更新数组的旧方法使用括号表示法来更改数组中的元素。使用括号表示法更新数组，将修改原始数组。但是，该 with() 方法在更新特定数组索引中的元素后会获得相同的结果，但不会改变原始数组。您可以创建数组的副本，该副本将返回一个具有更新索引的新数组。

总结

ECMAScript 每年推出新版本，不断改进和完善 JavaScript 语言。ECMAScript 2023 引入了一些令人兴奋的功能，提升了语言的功能和开发人员体验。使用上述介绍的新的数组方法，开发人员可以更好地处理数组数据的不可变性，同时保持原始数组的不变。这些方法的使用将增强开发人员在处理数组时的工作效率。保持数据的不变性对于开发人员来说非常重要，而 ECMAScript 2023 中的这些新的数组方法正是为此而设计的。这些方法不仅适用于数组，也适用于其他 JavaScript 对象。

总之，ECMAScript 2023 中的这些新的数组方法为开发人员提供了更多的工具和灵活性，使得 JavaScript 编程更加愉快和高效。