JavaScript map()方法功能全解析
更新時間：2025年09月22日 17:10:37 作者：歪歪100
文章介紹了JavaScript中map()方法的基本語法、核心特點及與forEach()的區(qū)別,強調(diào)map返回新數(shù)組用于數(shù)據(jù)轉(zhuǎn)換,而forEach無返回值適合副作用操作,同時說明可通過循環(huán)實現(xiàn)類似功能,感興趣的朋友跟隨小編一起看看吧
map()
map() 的基本語法：
array.map(function(currentValue, index, array) {
// 返回新值
}, thisValue);
一 、主要特點：
- 不會改變原數(shù)組，而是返回一個新數(shù)組
- 新數(shù)組的長度與原數(shù)組相同
- 對數(shù)組中的每個元素都執(zhí)行一次回調(diào)函數(shù)
二、示例：
- 基本用法 - 將數(shù)字?jǐn)?shù)組翻倍
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8, 10] console.log(numbers); // [1, 2, 3, 4, 5] (原數(shù)組不變)
- 處理對象數(shù)組
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
// 提取所有用戶名
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]
// 計算每個人5年后的年齡
const agesInFiveYears = users.map(user => ({
...user,
age: user.age + 5
}));- 轉(zhuǎn)換數(shù)據(jù)格式
const numbers = [1, 2, 3];
const numberStrings = numbers.map(num => `Number: ${num}`);
console.log(numberStrings); // ["Number: 1", "Number: 2", "Number: 3"]
- 使用索引參數(shù)
const fruits = ['apple', 'banana', 'cherry'];
const indexedFruits = fruits.map((fruit, index) => `${index + 1}. ${fruit}`);
console.log(indexedFruits); // ["1. apple", "2. banana", "3. cherry"]
map() 是函數(shù)式編程中常用的方法，經(jīng)常與 filter()、reduce() 等數(shù)組方法配合使用，處理和轉(zhuǎn)換數(shù)據(jù)。注意不要在 map() 中進行沒有返回值的操作（如僅打?。@時候應(yīng)該使用 forEach() 更合適。
三、map() 方法和 forEach() 方法有什么區(qū)別？
在 JavaScript 中，map() 和 forEach() 都是用于遍歷數(shù)組的方法，但它們的設(shè)計目的和使用場景有顯著區(qū)別：
1. 返回值不同
map()：返回一個新數(shù)組，新數(shù)組的元素是原數(shù)組每個元素經(jīng)過回調(diào)函數(shù)處理后的結(jié)果。
const numbers = [1, 2, 3]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6]（新數(shù)組）
forEach()：沒有返回值（返回 undefined），僅用于執(zhí)行遍歷操作。
const numbers = [1, 2, 3]; const result = numbers.forEach(num => num * 2); console.log(result); // undefined
2. 用途不同
map()：適合數(shù)據(jù)轉(zhuǎn)換場景，需要根據(jù)原數(shù)組生成新數(shù)組時使用（如格式轉(zhuǎn)換、值計算等）。
// 將對象數(shù)組轉(zhuǎn)換為只包含名稱的數(shù)組
const users = [{name: 'Alice'}, {name: 'Bob'}];
const names = users.map(user => user.name); // ['Alice', 'Bob']
forEach()：適合執(zhí)行副作用操作（如打印、修改外部變量、DOM操作等），不關(guān)心返回值時使用。
// 打印數(shù)組元素（副作用） const fruits = ['apple', 'banana']; fruits.forEach(fruit => console.log(fruit));
3. 鏈?zhǔn)秸{(diào)用支持
map()：由于返回新數(shù)組，可以直接鏈?zhǔn)秸{(diào)用其他數(shù)組方法（如 filter()、reduce() 等）。
const numbers = [1, 2, 3, 4]; const sumOfDoubledEvens = numbers .filter(num => num % 2 === 0) // 篩選偶數(shù) [2, 4] .map(num => num * 2) // 翻倍 [4, 8] .reduce((sum, num) => sum + num, 0); // 求和 12
forEach()：由于返回 undefined，無法進行鏈?zhǔn)秸{(diào)用。
// 無效的鏈?zhǔn)秸{(diào)用（會報錯）
numbers.forEach(...)
.filter(...) // 錯誤：Cannot read property 'filter' of undefined
4. 中斷遍歷
兩者都無法通過 break 或 continue 中斷遍歷（這一點與 for 循環(huán)不同）。
如果需要中斷遍歷，應(yīng)使用 for 循環(huán)或 some()/every()（通過返回 true 提前退出）。
5. 總結(jié)
| 特性 | map() | forEach() |
|---|---|---|
| 返回值 | 新數(shù)組（轉(zhuǎn)換后的結(jié)果） | 無（undefined） |
| 用途 | 數(shù)據(jù)轉(zhuǎn)換生成新數(shù)組 | 執(zhí)行副作用操作 |
| 鏈?zhǔn)秸{(diào)用 | 支持 | 不支持 |
| 典型場景 | 格式轉(zhuǎn)換、值計算 | 打印、DOM操作、修改外部變量 |
最佳實踐：
- 當(dāng)需要基于原數(shù)組生成新數(shù)組時，用
map()； - 當(dāng)僅需要遍歷執(zhí)行操作，不需要返回新數(shù)組時，用
forEach()。
四、不使用map()方法的情況下實現(xiàn)類似的功能
如果不使用 map() 方法，我們可以通過其他方式實現(xiàn)類似的功能——即遍歷數(shù)組并對每個元素進行處理，最終返回一個新的轉(zhuǎn)換后數(shù)組。最常見的方式是使用 for 循環(huán)、for...of 循環(huán)或 forEach() 方法。
以下是幾種實現(xiàn)方式：
1. 使用for循環(huán)（最基礎(chǔ)的方式）
function customMap(array, callback) {
// 創(chuàng)建一個新數(shù)組用于存儲結(jié)果
const result = [];
// 遍歷原數(shù)組
for (let i = 0; i < array.length; i++) {
// 對每個元素執(zhí)行回調(diào)函數(shù)，并將結(jié)果存入新數(shù)組
result.push(callback(array[i], i, array));
}
// 返回轉(zhuǎn)換后的新數(shù)組
return result;
}
// 使用示例
const numbers = [1, 2, 3, 4];
const doubled = customMap(numbers, (num) => num * 2);
console.log(doubled); // [2, 4, 6, 8]
const names = [
{ first: 'John', last: 'Doe' },
{ first: 'Jane', last: 'Smith' }
];
const fullNames = customMap(names, (person) => `${person.first} ${person.last}`);
console.log(fullNames); // ["John Doe", "Jane Smith"]2. 使用for...of循環(huán)（更簡潔的遍歷方式）
function customMap(array, callback) {
const result = [];
let index = 0;
// for...of 遍歷元素，同時記錄索引
for (const item of array) {
result.push(callback(item, index, array));
index++;
}
return result;
}
// 使用示例
const fruits = ['apple', 'banana', 'cherry'];
const uppercaseFruits = customMap(fruits, (fruit) => fruit.toUpperCase());
console.log(uppercaseFruits); // ["APPLE", "BANANA", "CHERRY"]3. 使用forEach()方法
雖然 forEach() 本身沒有返回值，但可以利用它遍歷數(shù)組并收集結(jié)果：
function customMap(array, callback) {
const result = [];
array.forEach((item, index, arr) => {
result.push(callback(item, index, arr));
});
return result;
}
// 使用示例
const numbers = [10, 20, 30];
const withSuffix = customMap(numbers, (num) => `${num}px`);
console.log(withSuffix); // ["10px", "20px", "30px"]4. 這些實現(xiàn)的核心思路：
- 創(chuàng)建一個空數(shù)組用于存儲轉(zhuǎn)換后的結(jié)果
- 遍歷原數(shù)組的每個元素
- 對每個元素執(zhí)行回調(diào)函數(shù)（接收當(dāng)前元素、索引、原數(shù)組三個參數(shù)）
- 將回調(diào)函數(shù)的返回值存入結(jié)果數(shù)組
- 遍歷結(jié)束后返回結(jié)果數(shù)組
這種自定義實現(xiàn)和原生 map() 方法的核心邏輯完全一致，只是原生方法經(jīng)過了引擎優(yōu)化，性能更好。通過這種方式，我們可以更深入理解 map() 的工作原理——它本質(zhì)上就是一個"遍歷-轉(zhuǎn)換-收集"的過程。
到此這篇關(guān)于JavaScript map()方法功能全解析的文章就介紹到這了,更多相關(guān)js map()方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript?進階問題列表(各種js代碼段1-65)
從基礎(chǔ)到進階,測試你有多了解?JavaScript,刷新你的知識,或者幫助你的?coding?面試！?:muscle:?:rocket:?我每周都會在這個倉庫下更新新的問題2024-11-11
這篇文章主要介紹了JavaScript編寫檢測用戶所使用的瀏覽器的代碼示例,這樣就可以根據(jù)用戶的瀏覽狀態(tài)來調(diào)整桌面版移動版或者兼容性的頁面,需要的朋友可以參考下2016-05-05
一起來學(xué)習(xí)JavaScript的BOM操作
這篇文章主要為大家詳細介紹了JavaScript BOM操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
關(guān)于JavaScript中的Delete一直沒有弄的很清楚，最近看到兩篇這方面的文章，現(xiàn)對兩文中部分內(nèi)容進行翻譯(內(nèi)容有修改和添加，順序不完全一致，有興趣推薦看原文)，希望能對大家有所幫助2012-09-09
這篇文章主要介紹了JS執(zhí)行刪除前如何實現(xiàn)判斷,需要的朋友可以參考下2014-02-02
JavaScript模擬實現(xiàn)"雙11"限時秒殺效果
每年的“雙11”啊，都是大家的剁手節(jié)。大家都在晚上12點，捧著手機看著倒計時，在他倒數(shù)到0的時候瘋狂點擊下單?？墒悄阌袥]想過限時秒殺是怎么實現(xiàn)的呢？本文將為你揭秘如何用JavaScript實現(xiàn)限時秒殺，快來了解一下吧2022-03-03
這篇文章主要為大家整理了12個JavaScript中常用的簡寫語法技巧，文中的示例代碼講解詳細，具有一定的參考價值，需要的小伙伴可以收藏一下2023-04-04
這篇文章主要介紹了VsCode插件整理（小結(jié)），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了openlayers實現(xiàn)地圖彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
在JavaScript中,Number類型是基于IEEE754雙精度浮點數(shù)標(biāo)準(zhǔn)表示的,雖然在常見場景下非常高效,但在處理大數(shù)據(jù)時,Number類型存在顯著的精度限制,在這些場景中,如何精確處理大數(shù)據(jù)和超大數(shù)字成為了一個重要的問題,所以本文給大家介紹了JavaScript超過Number最大值的解決方案2025-01-01