如果你曾經想過：“我不需要除了for循環和map()之外的任何東西”，聽著，因為我要告訴你你錯得有多離譜。
以下是 7 個被低估的數組方法，可能會讓你大吃一驚——是的，它們用起來出奇地有趣。
1. copyWithin()
想象一下復制一片披薩，但不是得到一片新的，而是笨拙地把它塞回同一個盒子里。
copyWithin()的作用有點像這樣——它從數組中取出一部分并將其復制到同一個數組中的另一個位置。它不會增加長度，所以不會有額外的“卡路里”（或元素）。
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]
在這里，從索引 3（4, 5）的元素被復制到索引 0 開始，替換了1和2。你還可以指定一個可選的結束索引來限制被復制的部分。
2. at()和with()
這兩個是新出現的很酷的方法。at()首先出現，為我們提供了一種簡潔的訪問元素的方式，特別是使用負索引。然后with()在 2023 年加入，自豪地為修改數組元素提供了不可變的替代方法。
const colors = ['red', 'blue', 'green', 'yellow'];
console.log(colors.at(-1)); // 'yellow'
console.log(colors.with(1, 'purple')); // ['red', 'purple', 'green', 'yellow']
at()在你需要處理數組末尾時很有用，而with()確保在你進行更新時原始數組保持不變。
3. reduceRight()
每個人都知道reduce()——它就像數組方法中的瑞士軍刀。但是你有沒有希望過可以反過來呢？那就來看看reduceRight()，它從右到左處理數組。
const arr = ['a', 'b', 'c', 'd'];
const result = arr.reduceRight((acc, curr) => acc + curr);
console.log(result); // 'dcba'
在這個例子中，reduceRight()從末尾開始組合元素，得到一個反轉的連接結果。
4. findLast()
向 ES13 中保守得最好的秘密之一問好。findLast()的工作方式就像find()，但它從數組的末尾開始搜索。
這在你知道要搜索的項目更接近尾部時特別有用。
const nums = [1, 2, 3, 4, 5, 6, 7];
console.log(nums.findLast(n => n % 2 === 0)); // 6
與從開頭搜索的find()不同，findLast()從末尾開始，使其在特定場景中非常理想，例如查找特定類型值的最后一次出現。
5. toSorted(), toReversed(), toSpliced()
來認識一下sort(), reverse()和splice()的不可變“表親”。這些 ES2023 新增的方法讓你在不改變原始數據的情況下操作數組。
為什么你應該關心？因為當你的變量不會在你背后神秘地改變時，調試會容易一百萬倍。
const arr = [3, 1, 4, 1, 5];
// 不可變排序
console.log(arr.toSorted()); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]
// 不可變反轉
console.log(arr.toReversed()); // [5, 1, 4, 1, 3]
console.log(arr); // [3, 1, 4, 1, 5]
這些方法讓你在保持原始數組不變的情況下進行更改，確保代碼更具可預測性和可調試性。
6. lastIndexOf()
indexOf()被低估的“兄弟姐妹”，lastIndexOf()正如你所想——它在數組中查找元素的最后一次出現。你甚至可以指定在哪里停止搜索。
const arr = ['apple', 'banana', 'cherry', 'apple'];
// 查找'apple'的最后一次出現
console.log(arr.lastIndexOf('apple')); // 3
// 限制搜索到前 3 個元素
console.log(arr.lastIndexOf('apple', 2)); // 0
當你處理可能包含重復元素的數組，并且你特別需要最后一個實例時，這個方法很有幫助。
7. flatMap()
當你可以在一個流暢的操作中把它們結合起來時，為什么要滿足于map()和flat()呢？flatMap()轉換你的數組并將結果展平一層。
const arr = [1, 2, [3], 4];
// 在一步中進行映射和展平
console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]
就像一次提交解決兩個問題——更干凈、更快，也更令人滿意。
最終思考
這些數組方法可能不像filter()或push()那么流行，但它們非常強大。試試看，誰知道呢？你可能會給你的同事留下深刻印象——或者至少在代碼審查時讓他們感到困惑。
記住，你知道得越多，循環就越少！
快樂編碼！
原文地址：https://medium.com/@arnoldgunter/7-amazing-javascript-array-methods-that-only-2-of-developers-know-simple-and-surprising-64f8f21231e4
作者：Arnold Gunter
該文章在 2025/1/21 10:00:00 編輯過
400 186 1886
