如果你曾經(jīng)想過(guò)：“我不需要除了for循環(huán)和map()之外的任何東西”，聽(tīng)著，因?yàn)槲乙嬖V你你錯(cuò)得有多離譜。
以下是 7 個(gè)被低估的數(shù)組方法，可能會(huì)讓你大吃一驚——是的，它們用起來(lái)出奇地有趣。
1. copyWithin()
想象一下復(fù)制一片披薩，但不是得到一片新的，而是笨拙地把它塞回同一個(gè)盒子里。
copyWithin()的作用有點(diǎn)像這樣——它從數(shù)組中取出一部分并將其復(fù)制到同一個(gè)數(shù)組中的另一個(gè)位置。它不會(huì)增加長(zhǎng)度，所以不會(huì)有額外的“卡路里”（或元素）。
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]
在這里，從索引 3（4, 5）的元素被復(fù)制到索引 0 開(kāi)始，替換了1和2。你還可以指定一個(gè)可選的結(jié)束索引來(lái)限制被復(fù)制的部分。
2. at()和with()
這兩個(gè)是新出現(xiàn)的很酷的方法。at()首先出現(xiàn)，為我們提供了一種簡(jiǎn)潔的訪問(wè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ù)組末尾時(shí)很有用，而with()確保在你進(jìn)行更新時(shí)原始數(shù)組保持不變。
3. reduceRight()
每個(gè)人都知道reduce()——它就像數(shù)組方法中的瑞士軍刀。但是你有沒(méi)有希望過(guò)可以反過(guò)來(lái)呢？那就來(lái)看看reduceRight()，它從右到左處理數(shù)組。
const arr = ['a', 'b', 'c', 'd'];
const result = arr.reduceRight((acc, curr) => acc + curr);
console.log(result); // 'dcba'
在這個(gè)例子中，reduceRight()從末尾開(kāi)始組合元素，得到一個(gè)反轉(zhuǎn)的連接結(jié)果。
4. findLast()
向 ES13 中保守得最好的秘密之一問(wèn)好。findLast()的工作方式就像find()，但它從數(shù)組的末尾開(kāi)始搜索。
這在你知道要搜索的項(xiàng)目更接近尾部時(shí)特別有用。
const nums = [1, 2, 3, 4, 5, 6, 7];
console.log(nums.findLast(n => n % 2 === 0)); // 6
與從開(kāi)頭搜索的find()不同，findLast()從末尾開(kāi)始，使其在特定場(chǎng)景中非常理想，例如查找特定類型值的最后一次出現(xiàn)。
5. toSorted(), toReversed(), toSpliced()
來(lái)認(rèn)識(shí)一下sort(), reverse()和splice()的不可變“表親”。這些 ES2023 新增的方法讓你在不改變?cè)紨?shù)據(jù)的情況下操作數(shù)組。
為什么你應(yīng)該關(guān)心？因?yàn)楫?dāng)你的變量不會(huì)在你背后神秘地改變時(shí)，調(diào)試會(huì)容易一百萬(wàn)倍。
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ù)測(cè)性和可調(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 個(gè)元素
console.log(arr.lastIndexOf('apple', 2)); // 0
當(dāng)你處理可能包含重復(fù)元素的數(shù)組，并且你特別需要最后一個(gè)實(shí)例時(shí)，這個(gè)方法很有幫助。
7. flatMap()
當(dāng)你可以在一個(gè)流暢的操作中把它們結(jié)合起來(lái)時(shí)，為什么要滿足于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]
就像一次提交解決兩個(gè)問(wèn)題——更干凈、更快，也更令人滿意。
最終思考
這些數(shù)組方法可能不像filter()或push()那么流行，但它們非常強(qiáng)大。試試看，誰(shuí)知道呢？你可能會(huì)給你的同事留下深刻印象——或者至少在代碼審查時(shí)讓他們感到困惑。
記住，你知道得越多，循環(huán)就越少！
快樂(lè)編碼！
原文地址：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 編輯過(guò)
400 186 1886
