很多人使用 JavaScript 數組時,最多就是 for
循環、map()
或者 filter()
等常見方法,但其實數組還有不少“隱藏招數”。這篇文章介紹的 7 個方法,也許會讓你眼前一亮。
1. copyWithin()
想象一下:取走一片披薩,然后又把它塞回披薩盒的另一個角落,這就是 copyWithin()
的感覺。它會將數組中指定范圍的元素復制到同一個數組的其他位置,數組長度并不會改變。
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]
在這里,從索引 3 開始的內容 (即 [4, 5]
) 被復制到索引 0 的位置,替換了原來的 [1, 2]
。也可以再加一個結束索引來限定要復制的范圍。
何時使用
- 可以寫一些奇妙的“滑動窗口”或排序前的臨時處理邏輯。
2. at()
與 with()
這是近幾年新增的方法。at()
先出現,可以用負數輕松獲取數組末尾元素;然后在 2023 年新增的 with()
則能對數組的某個位置做“不可變替換”——返回一個全新的數組而不改變原數組。
const colors = ['red', 'blue', 'green', 'yellow'];
console.log(colors.at(-1)); // 'yellow'
console.log(colors.with(1, 'purple'));
// ['red', 'purple', 'green', 'yellow']
at(-1)
就是取最后一個元素。with()
可以在索引 1 上替換為 'purple'
,并返回新數組,非常適合需要保持原數組不變的場景,比如在 Redux 這類數據管理中。
3. reduceRight()
大部分人熟悉 reduce()
,它被稱為數組方法里的“瑞士軍刀”,可以實現各種聚合操作。不過,想反向迭代數組怎么辦?那就是 reduceRight()
。
const arr = ['a', 'b', 'c', 'd'];
const result = arr.reduceRight((acc, curr) => acc + curr);
console.log(result); // 'dcba'
和 reduce()
不同之處在于,它從數組末尾往前處理元素。這對于需要反向拼接字符串或逆序計算的場景特別有用。
4. findLast()
findLast()
是 ES13(2022)中的新成員,和 find()
類似,但搜索方向相反,它會從數組的末尾開始查找。
const nums = [1, 2, 3, 4, 5, 6, 7];
console.log(nums.findLast(n => n % 2 === 0)); // 6
當你知道需要查找的元素更可能出現在數組后半部分時,findLast()
就很便捷,避免做無意義的前段搜索。
5. toSorted()
, toReversed()
, toSpliced()
這是 ES2023 里為數組新增的“不變(immutable)”版本,功能對應老牌的 sort()
, reverse()
, splice()
,但它們不會修改原數組,會返回一個新數組。
const arr = [3, 1, 4, 1, 5];
// 不影響原數組的排序
console.log(arr.toSorted()); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5]
// 不影響原數組的反轉
console.log(arr.toReversed()); // [5, 1, 4, 1, 3]
console.log(arr); // [3, 1, 4, 1, 5]
對于喜歡函數式編程、或在項目中需要維持狀態不可變的場景,這些方法能避免“寫著寫著,原數組就被改掉了”的坑,提高可維護性。
6. lastIndexOf()
比 indexOf()
更少被提及的是 lastIndexOf()
,它能找到指定元素最后一次出現的位置,還可以指定搜索的起始點。
const arr = ['apple', 'banana', 'cherry', 'apple'];
console.log(arr.lastIndexOf('apple')); // 3
console.log(arr.lastIndexOf('apple', 2)); // 0
當數組里有重復元素、你又需要從后往前找的時候,lastIndexOf()
就格外順手。
7. flatMap()
這是將 map()
和 flat()
合二為一的方法。它會對每個元素執行映射,然后把結果拍平一層。
const arr = [1, 2, [3], 4];
console.log(arr.flatMap(x => [x * 2])); // [2, 4, 6, 8]
這樣就不用先 map()
再 flat()
,一次搞定,代碼更簡潔。
一點額外想法
這些數組方法知名度不如 push()
、filter()
那么高,但都很有用。合理運用它們可以讓代碼更加優雅,也能降低一些常見的 Bug 風險。
在團隊合作中,適度使用這些相對“小眾”的方法還能讓同事們眼前一亮,當然別忘了寫好注釋,讓大家都能讀懂你的代碼。
小技巧
- 在需要“從末尾取元素”或“只更新數組某個位置但保持不可變”時,直接用
at()
/ with()
就能省不少功夫。 - 在操作復雜數據時,嘗試使用
toSorted()
、toReversed()
等不可變方法,可以避免狀態被意外改寫。 - 如果想讓代碼邏輯更直觀,可以把
reduceRight()
和 flatMap()
同時用起來,一邊翻轉一邊拍平,能得到很多創造性玩法。
記住這句話:對數組的掌控,不止于 for
和 map()
,這些鮮為人知的方法同樣值得嘗試。祝編碼愉快!
該文章在 2025/1/16 12:22:49 編輯過