快捷導(dǎo)航

JavaScript中map和forEach的區(qū)別示例詳解

更新時(shí)間：2025年06月27日 09:36:16 作者：~嘻嘻哈哈~

在JavaScript中forEach和map是兩種常見的數(shù)組迭代方法,它們?cè)试S開發(fā)者遍歷數(shù)組的每一個(gè)元素,這篇文章主要介紹了JavaScript中map和forEach區(qū)別的相關(guān)資料,需要的朋友可以參考下

一、本質(zhì)區(qū)別

1. 返回值不同

map返回回調(diào)函數(shù)對(duì)每個(gè)元素處理后的新數(shù)組。
forEach返回undefined。

const arr = [1, 2, 3];
 // [3, 6, 9]
const arr_1= arr.map(item => item * 3);
// undefined
const arr_2= arr.forEach(item => item  * 2);

2. 是否可??鏈?zhǔn)秸{(diào)用

因map返回新數(shù)組，可鏈?zhǔn)秸{(diào)用，可用其他數(shù)組方法（如filter、reduce）。
因forEach返回undefined，不可鏈?zhǔn)秸{(diào)用?????。

const arr = [1, 2, 3];
// 可鏈?zhǔn)秸{(diào)用
[6, 9]
arr.map(item  => item * 3).filter(x => x > 3);
// Cannot read property 'filter' of undefined
arr.forEach(item => item * 3).filter(x => x > 3);

二、是否修改原數(shù)組

1. map

1. 當(dāng)原數(shù)組元素是?基本數(shù)據(jù)類型??（如數(shù)字、字符串、布爾值），會(huì)生成新數(shù)組，不改變?cè)瓟?shù)組。

const arr = [1, 2, 3];
const arr_1 = arr .map(item => item * 2);
// [1, 2, 3]
console.log(arr); 
// [2, 4, 6]
console.log(arr_1);

2. 當(dāng)原數(shù)組元素是引用數(shù)據(jù)類型??（如對(duì)象、數(shù)組）時(shí)，會(huì)生成新數(shù)組，若回調(diào)函數(shù)中直接修改其元素屬性??，可改變?cè)瓟?shù)組（因其元素是引用的）。

const names= [{ name: 'zhangsan' }, { name: 'lisi' }];
const names_1 = names.map(item=> {
  // 直接修改原對(duì)象屬性
  item.name = 'wangwu'; 
  return item;
});
// [{ name: 'wangwu' }, { name: 'wangwu' }]
console.log(names);
// [{ name: 'wangwu' }, { name: 'wangwu' }]
console.log(names_1);

3. 當(dāng)原數(shù)組元素是引用數(shù)據(jù)類型??（如對(duì)象、數(shù)組）時(shí)，會(huì)生成新數(shù)組，若回調(diào)函數(shù)中創(chuàng)建新對(duì)象/數(shù)組，不改變?cè)瓟?shù)組。

const names= [{ name: 'zhangsan' }, { name: 'lisi' }];
const names_1 = names.map(item=> ({ ...item, age: 21 }));
// [{ name: 'wangwu' }, { name: 'lisi' }]
console.log(names); 
//[{ name: 'zhangsan', age: 21 }, { name: 'lisi', age: 21 }]
console.log(names_1);

4. 總結(jié)：??map本身不改變?cè)瓟?shù)組??，若回調(diào)函數(shù)中對(duì)引用數(shù)據(jù)類型修改，可改變?cè)瓟?shù)組。

2. forEach

1. 當(dāng)原數(shù)組元素是??基本數(shù)據(jù)類型??（如數(shù)字、字符串、布爾值），不改變?cè)瓟?shù)組。

const arr = [1, 2, 3];
arr.forEach(item => item *= 2);
// [1, 2, 3]
console.log(arr);

2. 當(dāng)原數(shù)組元素是引用數(shù)據(jù)類型??（如對(duì)象、數(shù)組）時(shí)，修改其元素屬性??，可改變?cè)瓟?shù)組（因其元素是引用的）。

let names= [{ name: 'zhangsan' }, { name: 'lisi' }];
names.forEach((item, index, array) => {
  array[index] = 'wangwu'; 
  // 或
  item.name = 'wangwu'
});
// [{ name: 'wangwu' }, { name: 'wangwu' }]
console.log(names);

3. 當(dāng)原數(shù)組元素是引用數(shù)據(jù)類型??（如對(duì)象、數(shù)組）時(shí)，??直接替換整個(gè)元素對(duì)象，不改變?cè)瓟?shù)組（形參是原元素的副本）。

let names= [{ name: 'zhangsan' }, { name: 'lisi' }];
names.forEach(item => item = { name: 'xiaohong' });
// [{ name: 'zhangsan' }, { name: 'lisi' }];
console.log(names);

4. 總結(jié)：??forEach，修改?基本數(shù)據(jù)類型??元素的值，或直接替換引用數(shù)據(jù)類型元素??，不改變?cè)瓟?shù)組。修改引用數(shù)據(jù)類型??元素的屬性，??可改變?cè)瓟?shù)組。

三、使用場(chǎng)景

??map??使用場(chǎng)景??：需生成新數(shù)組（如數(shù)據(jù)轉(zhuǎn)換、提取屬性）或需鏈?zhǔn)秸{(diào)用其他方法時(shí)。

// [2, 4, 6]
const arr = [1, 2, 3].map(x => x * 2);

??forEach??使用場(chǎng)景??：無需新數(shù)組，需如打印、修改外部變量時(shí)。

let sum = 0;
// 6
[1, 2, 3].forEach(item => sum += item);

四、forEach使用限制

1. 無法中斷或跳過循環(huán)

不支持使用break或continue語句來中斷或跳過循環(huán)，可通過for、for...of解決?；?strong>拋出異常解決。

// 拋出異常解決
let arr = [1, 2, 3];
try {
    arr.forEach(item => {
        if (item === 2) {
            throw('error');
        }
        console.log(item);
    });
} catch(e) {
    console.log(e);
}
// 1
// error

2.不支持處理異步函數(shù)

forEach是同步方法，在其中執(zhí)行異步函數(shù)，不會(huì)等待異步函數(shù)完成，會(huì)立即處理下一個(gè)元素，無法保證執(zhí)行順序，可通過for...of解決。

async function handleArr(arr) {
    arr.forEach(async item => {
        const res = await asyncData(item);
        console.log(res);
    });
    console.log('end');
}
 
function asyncData(x) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(x);
        }, 1000 * x);
    });
}
handleArr([1, 2, 3]);
// 預(yù)期
1
2
3
end

// 實(shí)際
end
3
2
1

3.無法捕獲異步函數(shù)中錯(cuò)誤

即使異步函數(shù)在執(zhí)行過程中拋出錯(cuò)誤，forEach仍繼續(xù)處理下一個(gè)元素，不會(huì)處理錯(cuò)誤。

4. 遍歷過程中更改索引無效

forEach中索引是自動(dòng)管理的，每次遍歷時(shí)自動(dòng)遞增，可通過for解決。

// 1. 試圖直接更改索引
let arr = [1, 2, 3, 4];
arr.forEach((item, index) => {
    // 1 2 3 4
    console.log(item); 
    index++;
});

// 2. 試圖刪除元素更改索引
let arr_1 = [1, 2, 3, 4];
arr_1.forEach((item, index) => {
    if (item === 2) {
        // 刪除元素2
        arr.splice(index, 1); 
    }
    // [0, 1] [1, 2] [2, 4]
    console.log([index, item]); 
});
// [1, 3, 4]
console.log(arr_1);

// 3. for解決
let arr_2 = [1, 2, 3, 4];
for (let i = 0; i < arr_2.length; i++) {
    if (arr_2 [i] === 2) {
        // 刪除元素2
        arr_2.splice(i, 1); 
        i--;
    } else {
        // 1 3 4
        console.log(arr_2[i]); 
    }
}
// [1, 3, 4]
console.log(arr_2);