深入解析ECMAScript 2023 中的新数组方法

更新时间：2023年12月19日 09:10:13 作者：CodeForBetter

ECMAScript 是一种标准化的脚本语言，它是 JavaScript 的规范。ECMAScript 2023 是 JavaScript 编程语言的更新，旨在带来改进并使 JavaScript 程序可预测和可维护，这篇文章主要介绍了探索 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：让我们看一下按时间顺序排列的一周中几天的列表。结果将以相反的顺序显示。

//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 对象，而不仅仅是数组。

到此这篇关于探索 ECMAScript 2023 中的新数组方法的文章就介绍到这了,更多相关ECMAScript 2023数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Bootstrap导航中表单简单实现代码
这篇文章主要为大家详细介绍了Bootstrap导航中表单简单实现代码，含路径导航的具体实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
JS+CSS实现模仿浏览器网页字符查找功能的方法
这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
前端防止接口重复请求的四种方案
文章介绍了几种常见的防止接口重复请求的方案,并推荐了分层防重复策略,建议根据业务场景选择合适的方案组合,以确保用户体验和系统稳定性,需要的朋友可以参考下
2026-02-02
微信小程序实现基于三元运算验证手机号/姓名功能示例
这篇文章主要介绍了微信小程序实现基于三元运算验证手机号/姓名功能,涉及三元运算符的判定及字符串正则验证相关操作技巧,需要的朋友可以参考下
2019-01-01
Driver.js前端引导页组件的具体使用
Driver.js是一个引导插件，本文主要介绍了Driver.js前端引导页组件的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
一文带你快速学会JavaScript条件判断及高级用法
JavaScript支持其用于执行根据不同的条件不同的操作条件语句,下面这篇文章主要给大家介绍了关于如何在JavaScript中更好的使用条件判断的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
js实现的常用的左侧导航效果
使用js简单实现下常用的左侧导航效果为提高导航性能而生，各位朋友可以参考应用，希望对大家有所帮助
2013-10-10
你需要知道的TypeScript高级类型总结
在开发过程中，为了应对多变的复杂场景，我们需要了解一下 TypeScript 的高级类型。本文就为大家整理了一些需要掌握的TypeScript高级类型，需要的可以参考一下
2022-08-08
JS获取计算机mac地址以及IP的实现方法
本篇文章主要是对利用JS获取计算机mac地址以及IP的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
JS数组索引检测中的数据类型问题详解
这篇文章主要给大家介绍了关于JS数组索引检测中的数据类型问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01