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