如果你曾經(jīng)想過，“除了 for 循環(huán)和 map() 之外，我不需要任何東西”，聽好了，因?yàn)槲覍⑾蚰惴窒砟鞘嵌嗝吹腻e(cuò)誤。

以下這 7 種被低估的數(shù)組方法，它們可能會(huì)讓你大吃一驚——是的，它們使用起來非常有趣。

1. copyWithin()

想象一下復(fù)制一片披薩，但你得到的不是新的一片，而是笨拙地將其塞回同一個(gè)盒子里。

這就是 copyWithin() 的作用——它獲取數(shù)組的一部分并將其復(fù)制到同一數(shù)組內(nèi)的另一個(gè)位置。它不會(huì)增加長度，因此，不會(huì)產(chǎn)生額外的卡路里（或元素）。

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()

這兩個(gè)是很酷的新手。at() 首先出現(xiàn)，為我們提供了一種訪問元素的簡潔方法，尤其是使用負(fù)索引時(shí)。然后 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ù)組方法中的瑞士軍刀。但您是否曾希望反過來操作？輸入 reduceRight()，它從右到左處理數(shù)組。

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

在此示例中，reduceRight() 從末尾開始組合元素，從而產(chǎn)生反向連接。

4. findLast()

向 ES13 中保密最嚴(yán)的秘密之一問好。findLast() 的工作原理與 find() 相同，但它從數(shù)組末尾開始搜索。

當(dāng)您知道要搜索的項(xiàng)目更接近尾部時(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ù)組而不改變?cè)紨?shù)據(jù)。

你為什么要關(guān)心？因?yàn)楫?dāng)你的變量不會(huì)在你背后神秘地改變時(shí)，調(diào)試會(huì)容易一百萬倍。

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


// Immutable sorting
console.log(arr.toSorted()); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]


// Immutable reversing
console.log(arr.toReversed()); // [5, 1, 4, 1, 3]
console.log(arr); // [3, 1, 4, 1, 5]

這些方法可讓您在保持原始數(shù)組完整的同時(shí)進(jìn)行更改，從而確保代碼更可預(yù)測(cè)且更易于調(diào)試。

6. lastIndexOf()

lastIndexOf() 是 indexOf() 的被低估的兄弟，其功能正如您所想的那樣 — 它可查找數(shù)組中元素的最后一次出現(xiàn)。您甚至可以指定停止搜索的位置。

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


// Find the last occurrence of 'apple'
console.log(arr.lastIndexOf('apple')); // 3


// Limit the search to the first 3 elements
console.log(arr.lastIndexOf('apple', 2)); // 0

當(dāng)您處理可能包含重復(fù)元素的數(shù)組，并且您特別需要最后一個(gè)實(shí)例時(shí)，此方法非常有用。

7. flatMap()

為什么要滿足于 map() 和 flat()，而您可以將它們組合成一個(gè)流暢的操作？flatMap() 會(huì)轉(zhuǎn)換您的數(shù)組并將結(jié)果展平一級(jí)。

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


// Mapping and flattening in one step
console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]

這就像通過一次提交殺死兩個(gè)錯(cuò)誤 — — 更干凈、更快、更令人滿意。

最后的想法

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