如果你曾經(jīng)想過：“我不需要除了for循環(huán)和map()之外的任何東西”，聽著，因為我要告訴你你錯得有多離譜。

以下是 7 個被低估的數(shù)組方法，可能會讓你大吃一驚——是的，它們用起來出奇地有趣。

1. copyWithin()

想象一下復制一片披薩，但不是得到一片新的，而是笨拙地把它塞回同一個盒子里。

copyWithin()的作用有點像這樣——它從數(shù)組中取出一部分并將其復制到同一個數(shù)組中的另一個位置。它不會增加長度，所以不會有額外的“卡路里”（或元素）。

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]

在這里，從索引 3（4, 5）的元素被復制到索引 0 開始，替換了1和2。你還可以指定一個可選的結(jié)束索引來限制被復制的部分。

2. at()和with()

這兩個是新出現(xiàn)的很酷的方法。at()首先出現(xiàn)，為我們提供了一種簡潔的訪問元素的方式，特別是使用負索引。然后with()在 2023 年加入，自豪地為修改數(shù)組元素提供了不可變的替代方法。

const colors = ['red', 'blue', 'green', 'yellow'];

console.log(colors.at(-1)); // 'yellow'
console.log(colors.with(1, 'purple')); // ['red', 'purple', 'green', 'yellow']

at()在你需要處理數(shù)組末尾時很有用，而with()確保在你進行更新時原始數(shù)組保持不變。

3. reduceRight()

每個人都知道reduce()——它就像數(shù)組方法中的瑞士軍刀。但是你有沒有希望過可以反過來呢？那就來看看reduceRight()，它從右到左處理數(shù)組。

const arr = ['a', 'b', 'c', 'd'];
const result = arr.reduceRight((acc, curr) => acc + curr); 
console.log(result); // 'dcba'

在這個例子中，reduceRight()從末尾開始組合元素，得到一個反轉(zhuǎn)的連接結(jié)果。

4. findLast()

向 ES13 中保守得最好的秘密之一問好。findLast()的工作方式就像find()，但它從數(shù)組的末尾開始搜索。

這在你知道要搜索的項目更接近尾部時特別有用。

const nums = [1, 2, 3, 4, 5, 6, 7];
console.log(nums.findLast(n => n % 2 === 0)); // 6

與從開頭搜索的find()不同，findLast()從末尾開始，使其在特定場景中非常理想，例如查找特定類型值的最后一次出現(xiàn)。

5. toSorted(), toReversed(), toSpliced()

來認識一下sort(), reverse()和splice()的不可變“表親”。這些 ES2023 新增的方法讓你在不改變原始數(shù)據(jù)的情況下操作數(shù)組。

為什么你應該關心？因為當你的變量不會在你背后神秘地改變時，調(diào)試會容易一百萬倍。

const arr = [3, 1, 4, 1, 5];

// 不可變排序
console.log(arr.toSorted()); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]

// 不可變反轉(zhuǎn)
console.log(arr.toReversed()); // [5, 1, 4, 1, 3]
console.log(arr); // [3, 1, 4, 1, 5]

這些方法讓你在保持原始數(shù)組不變的情況下進行更改，確保代碼更具可預測性和可調(diào)試性。

6. lastIndexOf()

indexOf()被低估的“兄弟姐妹”，lastIndexOf()正如你所想——它在數(shù)組中查找元素的最后一次出現(xiàn)。你甚至可以指定在哪里停止搜索。

const arr = ['apple', 'banana', 'cherry', 'apple'];

// 查找'apple'的最后一次出現(xiàn)
console.log(arr.lastIndexOf('apple')); // 3

// 限制搜索到前 3 個元素
console.log(arr.lastIndexOf('apple', 2)); // 0

當你處理可能包含重復元素的數(shù)組，并且你特別需要最后一個實例時，這個方法很有幫助。

7. flatMap()

當你可以在一個流暢的操作中把它們結(jié)合起來時，為什么要滿足于map()和flat()呢？flatMap()轉(zhuǎn)換你的數(shù)組并將結(jié)果展平一層。

const arr = [1, 2, [3], 4];

// 在一步中進行映射和展平
console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]

就像一次提交解決兩個問題——更干凈、更快，也更令人滿意。

最終思考

這些數(shù)組方法可能不像filter()或push()那么流行，但它們非常強大。試試看，誰知道呢？你可能會給你的同事留下深刻印象——或者至少在代碼審查時讓他們感到困惑。

記住，你知道得越多，循環(huán)就越少！

快樂編碼！

原文地址：https://medium.com/@arnoldgunter/7-amazing-javascript-array-methods-that-only-2-of-developers-know-simple-and-surprising-64f8f21231e4
作者：Arnold Gunter