前言
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 物件，而不僅僅是陣列。