如果你曾經(jīng)想過：“我不需要除了for循環(huán)和map()之外的任何東西”，聽著，因?yàn)槲乙嬖V你你錯得有多離譜。
以下是 7 個被低估的數(shù)組方法，可能會讓你大吃一驚——是的，它們用起來出奇地有趣。
1. copyWithin()
想象一下復(fù)制一片披薩，但不是得到一片新的，而是笨拙地把它塞回同一個盒子里。
copyWithin()的作用有點(diǎn)像這樣——它從數(shù)組中取出一部分并將其復(fù)制到同一個數(shù)組中的另一個位置。它不會增加長度，所以不會有額外的“卡路里”（或元素）。
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]
在這里，從索引 3（4, 5）的元素被復(fù)制到索引 0 開始，替換了1和2。你還可以指定一個可選的結(jié)束索引來限制被復(fù)制的部分。
2. at()和with()
這兩個是新出現(xiàn)的很酷的方法。at()首先出現(xiàn)，為我們提供了一種簡潔的訪問元素的方式，特別是使用負(fù)索引。然后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()確保在你進(jìn)行更新時原始數(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ù)組的末尾開始搜索。
這在你知道要搜索的項(xiàng)目更接近尾部時特別有用。
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()
來認(rèn)識一下sort(), reverse()和splice()的不可變“表親”。這些 ES2023 新增的方法讓你在不改變原始數(shù)據(jù)的情況下操作數(shù)組。
為什么你應(yīng)該關(guān)心？因?yàn)楫?dāng)你的變量不會在你背后神秘地改變時，調(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ù)組不變的情況下進(jìn)行更改，確保代碼更具可預(yù)測性和可調(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
當(dāng)你處理可能包含重復(fù)元素的數(shù)組，并且你特別需要最后一個實(shí)例時，這個方法很有幫助。
7. flatMap()
當(dāng)你可以在一個流暢的操作中把它們結(jié)合起來時，為什么要滿足于map()和flat()呢？flatMap()轉(zhuǎn)換你的數(shù)組并將結(jié)果展平一層。
const arr = [1, 2, [3], 4];
// 在一步中進(jìn)行映射和展平
console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]
就像一次提交解決兩個問題——更干凈、更快，也更令人滿意。
最終思考
這些數(shù)組方法可能不像filter()或push()那么流行，但它們非常強(qiáng)大。試試看，誰知道呢？你可能會給你的同事留下深刻印象——或者至少在代碼審查時讓他們感到困惑。
記住，你知道得越多，循環(huán)就越少！
快樂編碼！
原文地址：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
