前言

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 對象，而不僅僅是數組。