了解 JavaScript 陣列的 map() 方法:簡單指南
Dec 09, 2024 pm 06:00 PMmap() 方法透過將提供的函數 (callbackFn) 應用於原始陣列的每個元素來建立一個 新陣列。它非常適合在不修改原始數組的情況下轉換資料。
文法
array.map(callbackFn, thisArg)
登入後複製
-
callbackFn:在每個陣列元素上運行的函數,具有以下參數:
- element: 當前元素。
- 索引:目前索引。
- array: 正在遍歷的陣列。
- thisArg(可選):在回呼函數中用作 this 的值。
主要特點
- 傳回一個新數組:原始數組保持不變。
- 跳過空槽:稀疏數組中未分配的元素不會呼叫回調。
- 通用用法:適用於類似陣列的物件(例如 NodeLists)。
範例
1. 基本範例:轉換數字
const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); console.log(roots); // [1, 2, 3]
登入後複製
2. 重新格式化對象
const kvArray = [ { key: 1, value: 10 }, { key: 2, value: 20 }, ]; const reformatted = kvArray.map(({ key, value }) => ({ [key]: value })); console.log(reformatted); // [{ 1: 10 }, { 2: 20 }]
登入後複製
3.將parseInt與map一起使用
// Common mistake: console.log(["1", "2", "3"].map(parseInt)); // [1, NaN, NaN] // Correct approach: console.log(["1", "2", "3"].map((str) => parseInt(str, 10))); // [1, 2, 3] // Alternative: console.log(["1", "2", "3"].map(Number)); // [1, 2, 3]
登入後複製
4. 避免未定義的結果
從回呼不傳回任何內容會導致新數組中未定義:
const numbers = [1, 2, 3, 4]; const result = numbers.map((num, index) => (index < 3 ? num : undefined)); console.log(result); // [1, 2, 3, undefined]
登入後複製
使用filter()或flatMap()刪除不需要的元素。
5. 副作用(反模式)
避免使用 map() 進行有副作用的操作,例如更新變數:
const cart = [5, 15, 25]; let total = 0; // Avoid this: const withTax = cart.map((cost) => { total += cost; return cost * 1.2; }); // Instead, use separate methods: const total = cart.reduce((sum, cost) => sum + cost, 0); const withTax = cart.map((cost) => cost * 1.2);
登入後複製
6. 存取其他陣列元素
第三個參數(陣列)允許在轉換期間存取鄰居:
const numbers = [3, -1, 1, 4]; const averaged = numbers.map((num, idx, arr) => { const prev = arr[idx - 1] || 0; const next = arr[idx + 1] || 0; return (prev + num + next) / 3; }); console.log(averaged);
登入後複製
常見用例
- 轉換資料:對每個元素套用函數。
- 重新格式化物件:更改資料結構。
- Map NodeLists:將 NodeList 等 DOM 元素轉換為陣列:
const elems = document.querySelectorAll("option:checked"); const values = Array.from(elems).map(({ value }) => value);
登入後複製
何時避免使用map()
- 不需要傳回值:使用 forEach() 或 for...of 來取代。
- 改變資料:建立新物件而不是改變原始物件:
const products = [{ name: "phone" }]; const updated = products.map((p) => ({ ...p, price: 100 }));
登入後複製
最後的提示
- 僅限純函數:確保回呼沒有副作用。
- 理解參數:知道map()將元素、索引和陣列傳遞給回調。
- 避免稀疏數組:空槽將保持為空。
在高效率轉換陣列時使用 map() 來簡化程式碼!
以上是了解 JavaScript 陣列的 map() 方法:簡單指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)