快捷導(dǎo)航

詳解JavaScript中map()和forEach()的異同

更新時(shí)間：2024年02月03日 08:38:04 作者：為什么會(huì)變成這樣呢

在JavaScript中,map()和forEach()是兩個(gè)常用的數(shù)組方法,它們都用于遍歷數(shù)組,但在某些方面有一些關(guān)鍵的區(qū)別,本文將詳細(xì)討論這兩種方法的異同,以幫助您更好地理解它們的用法和適用場(chǎng)景,需要的朋友可以參考下

前言

在JavaScript中，map()和forEach()是兩個(gè)常用的數(shù)組方法，它們都用于遍歷數(shù)組，但在某些方面有一些關(guān)鍵的區(qū)別。本文將詳細(xì)討論這兩種方法的異同，以幫助您更好地理解它們的用法和適用場(chǎng)景。

返回值

map()： map()方法創(chuàng)建一個(gè)新數(shù)組，其中包含對(duì)原始數(shù)組的每個(gè)元素應(yīng)用回調(diào)函數(shù)的結(jié)果。

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
// doubled: [2, 4, 6]

map()通過對(duì)每個(gè)元素執(zhí)行回調(diào)函數(shù)來生成新數(shù)組，原始數(shù)組不會(huì)被改變。

forEach()： forEach()方法僅用于迭代數(shù)組中的每個(gè)元素，而不返回新數(shù)組。它的主要目的是執(zhí)行回調(diào)函數(shù)，而不關(guān)心返回值。

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num));
// 輸出：1, 2, 3

由于map()返回一個(gè)新數(shù)組，因此它通常用于對(duì)原始數(shù)組進(jìn)行轉(zhuǎn)換，而原數(shù)組保持不變。而forEach()主要用于對(duì)數(shù)組元素進(jìn)行迭代，執(zhí)行一些操作，但不會(huì)創(chuàng)建新的數(shù)組。因此，在需要獲取處理結(jié)果的情況下，map()更為合適。

可鏈性

map()： 由于map()返回一個(gè)新數(shù)組，因此可以鏈?zhǔn)秸{(diào)用多個(gè)數(shù)組方法。

const numbers = [1, 2, 3];
const squaredAndDoubled = numbers.map(num => num * 2).map(num => num ** 2);
// squaredAndDoubled: [4, 16, 36]

forEach()： forEach()方法返回undefined，不支持鏈?zhǔn)秸{(diào)用。

中斷迭代

map()： 由于map()返回一個(gè)新數(shù)組，您可以通過在回調(diào)函數(shù)中使用return語(yǔ)句來提前終止迭代。

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => {
  if (num > 3) return;
  return num ** 2;
});
// squared: [1, 4, 9, undefined, undefined]

forEach()： forEach()無法提前終止迭代。 如果需要中斷，可以通過在回調(diào)函數(shù)中拋出異常。

const numbers = [1, 2, 3, 4, 5];
try {
  numbers.forEach(num => {
    if (num > 3) throw BreakException;
    console.log(num);
  });
} catch (e) {}

性能

通常來說，map()的性能稍微低于forEach()，因?yàn)?code>map()需要?jiǎng)?chuàng)建一個(gè)新數(shù)組。

使用場(chǎng)景

map()的使用場(chǎng)景：

數(shù)據(jù)轉(zhuǎn)換： 當(dāng)需要對(duì)數(shù)組中的每個(gè)元素執(zhí)行某種操作，并將結(jié)果組成一個(gè)新的數(shù)組時(shí)，map()是首選。

const numbers = [1, 2, 3];
const squared = numbers.map(num => num ** 2);
// squared: [1, 4, 9]

提取特定屬性： 適用于從對(duì)象數(shù)組中提取特定屬性形成新數(shù)組。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const userIds = users.map(user => user.id);
// userIds: [1, 2, 3]

forEach()的使用場(chǎng)景：

迭代數(shù)組： 當(dāng)只需要遍歷數(shù)組執(zhí)行某個(gè)操作，而不需要生成新的數(shù)組時(shí)，forEach()是更直接的選擇。

const numbers = [1, 2, 3];
let sum = 0;

numbers.forEach(num => {
  console.log(num);
  sum += num;
});
// 輸出：1, 2, 3
// sum: 6

操作全局變量： 可以在forEach()循環(huán)中更改外部變量的值。

const numbers = [1, 2, 3];
let sum = 0;

numbers.forEach(num => {
  sum += num;
});
// sum: 6

結(jié)論

總的來說，map()和forEach()在某些方面有所不同，因此在選擇使用它們時(shí)需要根據(jù)具體需求權(quán)衡其優(yōu)缺點(diǎn)。如果需要生成一個(gè)新數(shù)組并對(duì)每個(gè)元素進(jìn)行操作，則使用map()；如果只是需要迭代數(shù)組并執(zhí)行一些操作，而不關(guān)心返回值，則使用forEach()。

以上就是詳解JavaScript中map()和forEach()的異同的詳細(xì)內(nèi)容，更多關(guān)于JavaScript map()和forEach()異同的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: