526互联

探索 ECMAScript 2023 中的新数组方法

发布时间 2023-12-18 18:39:20作者: CodeForBetter

前言

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：让我们看一下按时间顺序排列的一周中几天的列表。结果将以相反的顺序显示。

//This is the original array
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];

//Using reverse()
const reverseDays=days.reverse();
console.log(reverseDays);
//Output: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday']

console.log(days);
//Output of original array is changed: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday'

使用该 reverse() 方法修改原始数组。

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


//Using toReversed() method
const reversedDays=days.toReversed();
console.log(reversedDays);

//Output: ['Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday']

console.log(days);
//Output of original array is not changed: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']

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

toSorted()

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

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

//This is the original array
const numbers=[9, 4, 8, 1, 6, 3];

//Using sort
const sortNumbers=numbers.sort();
console.log(sortNumbers);
// Output:[1, 3, 4, 6, 8, 9]

console.log(numbers)//original array
//Output:[1, 3, 4, 6, 8, 9]

//Using toSorted
const sortNumbers=numbers.toSorted();
console.log(sortNumbers);
// Output:[1, 3, 4, 6, 8, 9]

console.log(numbers)//original array
//Output:[9, 4, 8, 1, 6, 3]
//Original array is not mutated

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

toSpliced()

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

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

//Original array
const fruits=['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples'];

//Using Splice
const spliceFruits= fruits.splice(2,1);//removing one fruit(Bananas)
console.log(spliceFruits);
//Output: ['Grapes', 'Oranges', 'Mangoes', 'Pineapples']

console.log(fruits);//original array is altered
//Output: ['Grapes', 'Oranges', 'Mangoes', 'Pineapples']

//Using toSpliced
const splicedFruits= fruits.toSpliced(4,1);//removing one fruit(Pineapples)
console.log(splicedFruits);
//Output: ['Grapes', 'Oranges', 'Bananas', 'Mangoes']

console.log(fruits);//original array remain unmodified
//Output: ['Grapes', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']

// Adding an element at index 1
const fruits2 = fruits.toSpliced(1, 0, "Passion");
console.log(fruits2); 
//Output: ['Grapes', 'Passion', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']

// Replacing one element at index 1 with two new elements
const fruits3 = fruits2.toSpliced(1, 1, "Guava", "Melon");
console.log(fruits3); 
//Output: ['Grapes', 'Guava', 'Melon', 'Oranges', 'Bananas', 'Mangoes', 'Pineapples']

//Original array remain unchanged
console.log(fruits)
//Output: ['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'];

//old way of updating an array;
flowers [4]='Rose';
console.log(flowers);
//Output: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Rose']

//New way of updating an array using with()
const updatedFlowers=flowers.with(4, 'Aster');
console.log(updatedFlowers);
//Output: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Aster']

console.log(flowers);//original array
Output: ['Lily', 'Daisy', 'Iris', 'Lotus', 'Allium']

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

总结

ECMAScript 不断进步，因为它每年都会推出新版本。这是自2015年以来一直存在的趋势。这种转变每年都在发生，以改进 ECMAScript 和 JavaScript。ECMAScript 2023 为 JavaScript 语言带来了几个令人兴奋的功能。这些功能改进了语言功能和开发人员体验。

使用这些上述数组方法，开发人员可以接受数组数据的不可变性，因为他们可以确保原始数组保持不变。它们将增强开发人员在使用数组时的工作。保持数据不变是有利的，正如 ECMAScript 2023 中的这些数组方法所证明的那样。这些好处适用于任何 JavaScript 对象，而不仅仅是数组。