很多人使用 JavaScript 數(shù)組時(shí)，最多就是 for 循環(huán)、map() 或者 filter() 等常見(jiàn)方法，但其實(shí)數(shù)組還有不少“隱藏招數(shù)”。這篇文章介紹的 7 個(gè)方法，也許會(huì)讓你眼前一亮。

1. copyWithin()

想象一下：取走一片披薩，然后又把它塞回披薩盒的另一個(gè)角落，這就是 copyWithin() 的感覺(jué)。它會(huì)將數(shù)組中指定范圍的元素復(fù)制到同一個(gè)數(shù)組的其他位置，數(shù)組長(zhǎng)度并不會(huì)改變。

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

在這里，從索引 3 開(kāi)始的內(nèi)容 (即 [4, 5]) 被復(fù)制到索引 0 的位置，替換了原來(lái)的 [1, 2]。也可以再加一個(gè)結(jié)束索引來(lái)限定要復(fù)制的范圍。

何時(shí)使用

• 快速地在數(shù)組內(nèi)部進(jìn)行重排，而不想新建數(shù)組。
• 可以寫(xiě)一些奇妙的“滑動(dòng)窗口”或排序前的臨時(shí)處理邏輯。

2. at() 與 with()

這是近幾年新增的方法。at() 先出現(xiàn)，可以用負(fù)數(shù)輕松獲取數(shù)組末尾元素；然后在 2023 年新增的 with() 則能對(duì)數(shù)組的某個(gè)位置做“不可變替換”——返回一個(gè)全新的數(shù)組而不改變?cè)瓟?shù)組。

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

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

at(-1) 就是取最后一個(gè)元素。with() 可以在索引 1 上替換為 'purple'，并返回新數(shù)組，非常適合需要保持原數(shù)組不變的場(chǎng)景，比如在 Redux 這類(lèi)數(shù)據(jù)管理中。

3. reduceRight()

大部分人熟悉 reduce()，它被稱(chēng)為數(shù)組方法里的“瑞士軍刀”，可以實(shí)現(xiàn)各種聚合操作。不過(guò)，想反向迭代數(shù)組怎么辦？那就是 reduceRight()。

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

和 reduce() 不同之處在于，它從數(shù)組末尾往前處理元素。這對(duì)于需要反向拼接字符串或逆序計(jì)算的場(chǎng)景特別有用。

4. findLast()

findLast() 是 ES13（2022）中的新成員，和 find() 類(lèi)似，但搜索方向相反，它會(huì)從數(shù)組的末尾開(kāi)始查找。

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

當(dāng)你知道需要查找的元素更可能出現(xiàn)在數(shù)組后半部分時(shí)，findLast() 就很便捷，避免做無(wú)意義的前段搜索。

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

這是 ES2023 里為數(shù)組新增的“不變（immutable）”版本，功能對(duì)應(yīng)老牌的 sort(), reverse(), splice()，但它們不會(huì)修改原數(shù)組，會(huì)返回一個(gè)新數(shù)組。

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

// 不影響原數(shù)組的排序
console.log(arr.toSorted());   // [1, 1, 3, 4, 5]
console.log(arr);              // [3, 1, 4, 1, 5]

// 不影響原數(shù)組的反轉(zhuǎn)
console.log(arr.toReversed()); // [5, 1, 4, 1, 3]
console.log(arr);              // [3, 1, 4, 1, 5]

對(duì)于喜歡函數(shù)式編程、或在項(xiàng)目中需要維持狀態(tài)不可變的場(chǎng)景，這些方法能避免“寫(xiě)著寫(xiě)著，原數(shù)組就被改掉了”的坑，提高可維護(hù)性。

6. lastIndexOf()

比 indexOf() 更少被提及的是 lastIndexOf()，它能找到指定元素最后一次出現(xiàn)的位置，還可以指定搜索的起始點(diǎn)。

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

console.log(arr.lastIndexOf('apple'));      // 3
console.log(arr.lastIndexOf('apple', 2));   // 0

當(dāng)數(shù)組里有重復(fù)元素、你又需要從后往前找的時(shí)候，lastIndexOf() 就格外順手。

7. flatMap()

這是將 map() 和 flat() 合二為一的方法。它會(huì)對(duì)每個(gè)元素執(zhí)行映射，然后把結(jié)果拍平一層。

const arr = [1, 2, [3], 4];
console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]

這樣就不用先 map() 再 flat()，一次搞定，代碼更簡(jiǎn)潔。

一點(diǎn)額外想法

這些數(shù)組方法知名度不如 push()、filter() 那么高，但都很有用。合理運(yùn)用它們可以讓代碼更加優(yōu)雅，也能降低一些常見(jiàn)的 Bug 風(fēng)險(xiǎn)。

在團(tuán)隊(duì)合作中，適度使用這些相對(duì)“小眾”的方法還能讓同事們眼前一亮，當(dāng)然別忘了寫(xiě)好注釋?zhuān)尨蠹叶寄茏x懂你的代碼。

小技巧

• 在需要“從末尾取元素”或“只更新數(shù)組某個(gè)位置但保持不可變”時(shí)，直接用 at() / with() 就能省不少功夫。
• 在操作復(fù)雜數(shù)據(jù)時(shí)，嘗試使用 toSorted()、toReversed() 等不可變方法，可以避免狀態(tài)被意外改寫(xiě)。
• 如果想讓代碼邏輯更直觀(guān)，可以把 reduceRight() 和 flatMap() 同時(shí)用起來(lái)，一邊翻轉(zhuǎn)一邊拍平，能得到很多創(chuàng)造性玩法。

記住這句話(huà)：對(duì)數(shù)組的掌控，不止于 for 和 map()，這些鮮為人知的方法同樣值得嘗試。祝編碼愉快！