你的?.map()?其實并不快——看看如何讓它真正提速
在 JavaScript 里，.map() 就像那個你熟悉的老朋友——雖然總是按時出現，但每次都慢吞吞地準備。
它確實簡潔、可讀性好，大多數時候也能勝任工作——但你有沒有想過，它其實正在悄悄拖慢你的程序性能？
今天我們就來聊聊：為什么 .map() 沒你想的那么快，它背后到底做了什么，以及你該如何在不犧牲代碼可讀性的前提下，把性能拉滿。
.map() 真的總是“朋友”嗎？
我們從一個最基本的例子開始：
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]看起來非常優雅對吧？但 .map() 有一個隱藏的代價：每次都會創建一個全新的數組。雖然這對數據的不可變性很友好，但在處理大數據集或連續多次轉換時，這種操作會大大影響性能。
我們來看看它內部到底做了什么：
- 遍歷數組的每個元素；
- 執行回調函數；
- 把結果“推入”新數組。
問題就在第三步——不斷 push 新數組會逐漸拖慢執行速度。數據越大，內存消耗越高。
性能實測：.map() VS for 循環
我們來實際跑個測試，看看誰更快：
const bigArray = Array.from({ length: 1_000_000 }, (_, i) => i);
// 方法一：.map()
console.time(\"map\");
const mapResult = bigArray.map(num => num * 2);
console.timeEnd(\"map\");
// 方法二：for 循環
console.time(\"for-loop\");
const forLoopResult = [];
for (let i = 0; i < bigArray.length; i++) {
forLoopResult.push(bigArray[i] * 2);
}
console.timeEnd(\"for-loop\");我的測試結果如下：
.map()：120msfor循環：45ms
for 循環完勝，而且優勢明顯！
為啥？因為 .map() 背后隱藏了數組創建和數據復制的開銷，而 for 循環則是直接處理數據，省掉了中間環節。
比 .map() 更快的替代方案有哪些？
好吧，我們承認 .map() 不夠快——但可讀性也很重要，對吧？那就看看有哪些實用又高效的替代方式：
for...of：比傳統 for 更簡潔
const result = [];
for (const num of bigArray) {
result.push(num * 2);
}語法清晰、性能比 .map() 更好，推薦使用。
reduce()：可變換但請慎用
const reduced = bigArray.reduce((acc, num) => {
acc.push(num * 2);
return acc;
}, []);雖然 reduce() 主要用于求和，但也能做數據轉換。性能不一定更優，但在需要更多靈活性的場景中，它是個好幫手。
類型數組（Typed Arrays）：性能終極選項
如果你真的追求極致性能（比如數值計算、游戲循環或處理龐大數據量），那就考慮類型數組吧：
const typed = new Int32Array(bigArray.length);
for (let i = 0; i < bigArray.length; i++) {
typed[i] = bigArray[i] * 2;
}Typed Arrays 在內存處理數字時更高效，在大型數據集中能帶來顯著性能優勢。
那還用不用 .map() 了？
我可沒說 .map() 完全沒用了。它依舊是清晰、可維護的好選擇，尤其適用于小規模轉換或對性能要求不高的場景。
推薦使用 .map() 的場景：
- 處理小數組；
- 更重視代碼可讀性與不可變性；
- 想鏈式調用
.map().filter().reduce()保持代碼整潔；
盡量避免 .map() 的場景：
- 操作超大數據集；
- 性能成為瓶頸（例如UI渲染、API返回處理）；
- 需要精細化內存控制或結構處理；
.map() 雖好，但它并不是性能最強的那把“工具刀”。當性能是關鍵指標時，請大膽拿出 for 循環、Typed Arrays，甚至 reduce() 來應戰。
