深入解析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数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript 可以拖动的DIV（二）
关于这个实现div拖动的js函数，实际上也是某位前辈公布于网上，这儿只是摘抄注解一下。
2009-06-06
JavaScript 就地编辑HTML节点实现代码
JavaScript 就地编辑HTML节点实现代码
2009-07-07
js实现iframe动态调整高度的代码
iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大家一种iframe动态调整高度的方法，主要是以下JS函数：
2008-01-01
JavaScript实现简易tab栏切换内容栏
这篇文章主要为大家详细介绍了JavaScript实现简易tab栏切换内容栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
javascript用rem来做响应式开发
这篇文章主要介绍了javascript用rem来做响应式开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
使用JavaScript库还是自己写代码？
有时候在写JavaScript添加到你的网页中的时候，你将需要决定是使用已有的可用的JavaScript库还是自己写所有代码。其中每个各有优缺点，因此没有任何一种方式对每个人来说都是绝对正确的选择。
2010-01-01
Three.js中如何使用CSS3DRenderer和CSS3DSprite实现模型标签文字
在Three.js中,使用CSS3DRenderer和CSS3DSprite可以轻松地实现模型标签文字的效果,为场景中的模型提供更直观的信息展示,本文将介绍如何使用这两个工具来实现模型标签文字,并提供相应的代码示例,感兴趣的朋友跟随小编一起看看吧
2024-05-05
ES6 数组some()和every()的使用及说明
这篇文章主要介绍了ES6 数组some()和every()的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
微信小程序显示倒计时功能示例【测试可用】
这篇文章主要介绍了微信小程序显示倒计时功能,结合实例形式分析了微信小程序针对给定时间的倒计时功能相关界面显示与逻辑运算操作技巧,需要的朋友可以参考下
2018-12-12
JSON字符串和对象相互转换实例分析
这篇文章主要介绍了JSON字符串和对象相互转换的方法,结合实例形式分析了json格式数据的转换方法,涉及javascript正则与字符串操作的相关技巧,需要的朋友可以参考下
2016-06-06