前言

ECMAScript 2023 引入了一些新功能，以改進(jìn)語言并使其更加強(qiáng)大和無縫。這個(gè)新版本帶來了令人興奮的功能和新的 JavaScript 數(shù)組方法，使使用 JavaScript 編程更加愉快和輕松。本文將帶領(lǐng)讀者全面了解數(shù)組原型上新 JavaScript 方法。

什么是ECMAScript?

ECMAScript 是一種標(biāo)準(zhǔn)化的腳本語言，它是 JavaScript 的規(guī)范。ECMAScript 2023 是 JavaScript 編程語言的更新，旨在帶來改進(jìn)并使 JavaScript 程序可預(yù)測和可維護(hù)。

ECMAScript 2023 引入的新方法

toReversed()

toReversed() 與 reverse() 類似。 toReversed() 方法以相反的順序返回?cái)?shù)組的元素，而不更改原始數(shù)組。(請注意，ECMAScript 2023 代碼片段中的新 JavaScript 方法在現(xiàn)代 Web瀏覽器上運(yùn)行。從 MDN 檢查瀏覽器功能。它適用于瀏覽器，因?yàn)榉椒ㄈ匀缓苄?。此外，Node.js 不支持這些方法。Node.js 版本 20+ 支持它們。這不利于開發(fā)人員，因?yàn)殚_發(fā)人員使用 Node.js LTS 版本（版本 18）。)

eg：讓我們看一下按時(shí)間順序排列的一周中幾天的列表。結(jié)果將以相反的順序顯示。

//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() 方法修改原始數(shù)組。

eg: toReversed() 方法在不更改原始數(shù)組的情況下反轉(zhuǎn)數(shù)組?？纯催@個(gè)例子：

 
//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() 功能是開發(fā)人員欣賞的一項(xiàng)顯著功能。這是因?yàn)樵紨?shù)組是用該 reverse() 方法變異的。感謝 ECMAScript 2023 引入該 toReversed() 方法。使用此方法，您可以更改數(shù)組的副本，而不是原始數(shù)組。

toSorted()

toSorted() 類似于 JavaScript 的 sort() 方法。但兩種方法彼此不同，是的！你猜對了。與 sort() 不同，toSorted() 方法不會更改原始數(shù)組。 toReversed() 方法返回一個(gè)新數(shù)組，使原始數(shù)組保持不變。

eg: 考慮這種情況，我們需要按升序?qū)?shù)字進(jìn)行排序。此示例將說明 和 toSorted() 之間的區(qū)別。

//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() 方法修改上述實(shí)例中的復(fù)制版本。它返回一個(gè)新數(shù)組，其中元素按升序排序。但是，原始數(shù)組不會更改。另一方面， sort() 方法將原始數(shù)組就地改變，如上面的示例所示。

toSpliced()

toSpliced() 數(shù)組方法是 ECMAScript 2023 中的一項(xiàng)新功能。類似于 JavaScript 的 splice() 數(shù)組方法，但略有不同。兩種數(shù)組方法的區(qū)別在于 toSpliced() 不會修改原來的數(shù)組。toSpliced() 創(chuàng)建一個(gè)包含已更改元素的新數(shù)組，但原始數(shù)組保持不變。 toSpliced() 可以在一個(gè)數(shù)組中執(zhí)行多項(xiàng)操作。您可以添加、刪除和替換數(shù)組中的元素。

eg: 讓我們考慮一個(gè)場景，我們有一個(gè)元素列表，并希望在不更改原始數(shù)組的情況下刪除一些元素。此示例將說明 和 toSpliced 之間的區(qū)別 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() 數(shù)組方法是 JavaScript 語言的一個(gè)重要附加功能。它允許開發(fā)人員在不更改原始數(shù)組的情況下操作數(shù)組。這使開發(fā)人員能夠輕松管理和維護(hù)代碼。如上面的示例所示，此方法提供了一種更方便的方法來添加、刪除或替換任何數(shù)組索引處的元素。

with()

with() 數(shù)組方法在引入 ECMAScript 2021 （ES12） 時(shí)被添加到 JavaScript 編程語言中。更新數(shù)組中的元素在 JavaScript 中很常見。但是，更改數(shù)組元素會修改初始數(shù)組。with()數(shù)組方法在 ECMAScript 2023 中引入了一項(xiàng)新功能。該 with() 方法提供了一種在不更改原始數(shù)組的情況下更新數(shù)組中元素的安全方法。

eg: 這是通過返回一個(gè)包含更新元素的新數(shù)組來實(shí)現(xiàn)的。

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']

更新數(shù)組的舊方法使用括號表示法來更改數(shù)組中的元素。使用括號表示法更新數(shù)組，將修改原始數(shù)組。但是，該 with() 方法在更新特定數(shù)組索引中的元素后會獲得相同的結(jié)果，但不會改變原始數(shù)組。您可以創(chuàng)建數(shù)組的副本，該副本將返回一個(gè)具有更新索引的新數(shù)組。

總結(jié)

ECMAScript 不斷進(jìn)步，因?yàn)樗磕甓紩瞥鲂掳姹?。這是自2015年以來一直存在的趨勢。這種轉(zhuǎn)變每年都在發(fā)生，以改進(jìn) ECMAScript 和 JavaScript。ECMAScript 2023 為 JavaScript 語言帶來了幾個(gè)令人興奮的功能。這些功能改進(jìn)了語言功能和開發(fā)人員體驗(yàn)。

使用這些上述數(shù)組方法，開發(fā)人員可以接受數(shù)組數(shù)據(jù)的不可變性，因?yàn)樗麄兛梢源_保原始數(shù)組保持不變。它們將增強(qiáng)開發(fā)人員在使用數(shù)組時(shí)的工作。保持?jǐn)?shù)據(jù)不變是有利的，正如 ECMAScript 2023 中的這些數(shù)組方法所證明的那樣。這些好處適用于任何 JavaScript 對象，而不僅僅是數(shù)組。

到此這篇關(guān)于探索 ECMAScript 2023 中的新數(shù)組方法的文章就介紹到這了,更多相關(guān)ECMAScript 2023數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論