JavaScript中map和forEach的區(qū)別示例詳解
一、本質(zhì)區(qū)別
1. 返回值不同
map返回回調(diào)函數(shù)對每個元素處理后的新數(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. 是否可??鏈式調(diào)用
- 因
map返回新數(shù)組，可鏈式調(diào)用，可用其他數(shù)組方法（如filter、reduce）。- 因
forEach返回undefined，不可鏈式調(diào)用?????。
const arr = [1, 2, 3]; // 可鏈式調(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. 當原數(shù)組元素是?基本數(shù)據(jù)類型??（如數(shù)字、字符串、布爾值），會生成新數(shù)組，不改變原數(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. 當原數(shù)組元素是引用數(shù)據(jù)類型??（如對象、數(shù)組）時，會生成新數(shù)組，若回調(diào)函數(shù)中直接修改其元素屬性??，可改變原數(shù)組（因其元素是引用的）。
const names= [{ name: 'zhangsan' }, { name: 'lisi' }];
const names_1 = names.map(item=> {
// 直接修改原對象屬性
item.name = 'wangwu';
return item;
});
// [{ name: 'wangwu' }, { name: 'wangwu' }]
console.log(names);
// [{ name: 'wangwu' }, { name: 'wangwu' }]
console.log(names_1); 3. 當原數(shù)組元素是引用數(shù)據(jù)類型??（如對象、數(shù)組）時，會生成新數(shù)組，若回調(diào)函數(shù)中創(chuàng)建新對象/數(shù)組，不改變原數(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本身不改變原數(shù)組??，若回調(diào)函數(shù)中對引用數(shù)據(jù)類型修改，可改變原數(shù)組。
2. forEach
1. 當原數(shù)組元素是??基本數(shù)據(jù)類型??（如數(shù)字、字符串、布爾值），不改變原數(shù)組。
const arr = [1, 2, 3]; arr.forEach(item => item *= 2); // [1, 2, 3] console.log(arr);
2. 當原數(shù)組元素是引用數(shù)據(jù)類型??（如對象、數(shù)組）時，修改其元素屬性??，可改變原數(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. 當原數(shù)組元素是引用數(shù)據(jù)類型??（如對象、數(shù)組）時，??直接替換整個元素對象，不改變原數(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ù)類型元素??，不改變原數(shù)組。修改引用數(shù)據(jù)類型??元素的屬性，??可改變原數(shù)組。
三、使用場景
??map??使用場景??：需生成新數(shù)組（如數(shù)據(jù)轉(zhuǎn)換、提取屬性）或需鏈式調(diào)用其他方法時。
// [2, 4, 6] const arr = [1, 2, 3].map(x => x * 2);
??forEach??使用場景??：無需新數(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
// error2.不支持處理異步函數(shù)
forEach是同步方法，在其中執(zhí)行異步函數(shù)，不會等待異步函數(shù)完成，會立即處理下一個元素，無法保證執(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]);
// 預期
1
2
3
end
// 實際
end
3
2
13.無法捕獲異步函數(shù)中錯誤
即使異步函數(shù)在執(zhí)行過程中拋出錯誤，forEach仍繼續(xù)處理下一個元素，不會處理錯誤。
4. 遍歷過程中更改索引無效
forEach中索引是自動管理的，每次遍歷時自動遞增，可通過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); 總結(jié)
到此這篇關(guān)于JavaScript中map和forEach的區(qū)別詳解的文章就介紹到這了,更多相關(guān)JS中map和forEach區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄宄秊g覽器緩存的幾種方法總結(jié)(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
參考：關(guān)于Javascript中實現(xiàn)暫停的幾篇文章
參考：關(guān)于Javascript中實現(xiàn)暫停的幾篇文章...2007-03-03
下面小編就為大家?guī)硪黄猨s 打開新頁面在屏幕中間的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)左滑刪除效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11![javascript 獲取radio的value的函數(shù) [已測]](http://img.jbzj.com/images/xgimg/bcimg4.png)
javascript 獲取radio的value的函數(shù) [已測]
javascript 獲取radio的value的函數(shù) 如果與asp,php等后臺語言結(jié)合時，一般用不到，但在純js環(huán)境下是必須的。2009-06-06
JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼
這篇文章主要介紹了JS動態(tài)添加的div點擊跳轉(zhuǎn)到另一頁面實現(xiàn)代碼,需要的朋友可以參考下2017-09-09
js插件YprogressBar實現(xiàn)漂亮的進度條效果
ProgressBar.js 是一個借助動態(tài) SVG 路徑的漂亮的，響應(yīng)式的進度條效果。使用 ProgressBar.js 可以很容易地創(chuàng)建任意形狀的進度條。這個 JavaScript 庫提供線條，圓形和方形等幾個內(nèi)置的形狀，但你可使用 Illustrator 或任何其它的矢量圖形編輯器創(chuàng)建自己的進度條效果。2015-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
進度條效果實現(xiàn)代碼,有助于緩解頁面顯示慢的頁面，給用戶一個等待時間的效果2011-05-05
簡單了解微信小程序 e.target與e.currentTarget的不同
這篇文章主要介紹了微信小程序 e.target與e.currentTarget的區(qū)別詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09