🤍 前端開(kāi)發(fā)工程師（主業(yè)）、技術(shù)博主（副業(yè)）、已過(guò)CET6
🍨 阿珊和她的貓_CSDN個(gè)人主頁(yè)
🕠 ?？透呒?jí)專(zhuān)題作者、在?？痛蛟旄哔|(zhì)量專(zhuān)欄《前端面試必備》
🍚 藍(lán)橋云課簽約作者、已在藍(lán)橋云課上架的前后端實(shí)戰(zhàn)課程《Vue.js 和 Egg.js 開(kāi)發(fā)企業(yè)級(jí)健康管理項(xiàng)目》、《帶你從入門(mén)到實(shí)戰(zhàn)全面掌握 uni-app》

一、引言

介紹 forEach和 map的背景和用途

forEach 和 map 是 JavaScript 中用于處理數(shù)組的兩個(gè)常用方法。

1. forEach 方法：

   forEach 方法用于遍歷數(shù)組中的每個(gè)元素，并對(duì)每個(gè)元素執(zhí)行指定的操作。它是一個(gè)用于迭代數(shù)組的內(nèi)置函數(shù)，不返回任何值。

   語(yǔ)法：

   array.forEach(function(element, index, array) {// 在這里編寫(xiě)要對(duì)每個(gè)元素執(zhí)行的操作
   });
   

   示例：

   const numbers = [1, 2, 3, 4, 5];
   numbers.forEach(function(number) {console.log(number);
   });
   

   在上述示例中，forEach 方法遍歷數(shù)組 numbers 中的每個(gè)元素，并在每次迭代時(shí)將當(dāng)前元素打印到控制臺(tái)上。

   forEach 方法的主要用途是對(duì)數(shù)組進(jìn)行迭代操作，例如打印數(shù)組中的每個(gè)元素、修改數(shù)組中的每個(gè)元素或執(zhí)行其他與每個(gè)元素相關(guān)的操作。

2. map 方法：

   map 方法用于對(duì)數(shù)組中的每個(gè)元素進(jìn)行操作，并返回一個(gè)新的數(shù)組，其中包含對(duì)原始數(shù)組中每個(gè)元素應(yīng)用操作的結(jié)果。

   語(yǔ)法：

   const newArray = array.map(function(element, index, array) {// 在這里編寫(xiě)要對(duì)每個(gè)元素執(zhí)行的操作return operationResult;
   });
   

   示例：

   const numbers = [1, 2, 3, 4, 5];
   const squareNumbers = numbers.map(function(number) {return number * number;
   });
   console.log(squareNumbers); 
   

   在上述示例中，map 方法遍歷數(shù)組 numbers 中的每個(gè)元素，并將其平方后存儲(chǔ)在新的數(shù)組 squareNumbers 中。

   map 方法的主要用途是對(duì)數(shù)組進(jìn)行轉(zhuǎn)換操作，例如將數(shù)組中的每個(gè)元素加 1、將每個(gè)元素轉(zhuǎn)換為字符串或執(zhí)行其他類(lèi)型的元素級(jí)操作。

forEach 和 map 都是 JavaScript 中用于處理數(shù)組的常用方法。forEach 用于迭代和對(duì)每個(gè)元素執(zhí)行操作，而 map 用于對(duì)每個(gè)元素進(jìn)行操作并返回一個(gè)新的數(shù)組。選擇使用哪個(gè)方法取決于你的具體需求。如果你只需要對(duì)數(shù)組進(jìn)行迭代并執(zhí)行操作，而不需要返回新的數(shù)組，可以使用 forEach。如果你需要對(duì)每個(gè)元素進(jìn)行操作并返回一個(gè)新的數(shù)組，可以使用 map。

二、 forEach方法的詳解

forEach方法是 JavaScript 中用于遍歷數(shù)組并對(duì)每個(gè)元素執(zhí)行指定操作的一種常用方法。它是 ES5（ECMAScript 5）引入的數(shù)組方法之一。

1. 基本概念和語(yǔ)法：

forEach方法接受一個(gè)回調(diào)函數(shù)作為參數(shù)，并將該回調(diào)函數(shù)應(yīng)用到數(shù)組的每個(gè)元素上?；卣{(diào)函數(shù)接受三個(gè)參數(shù)：當(dāng)前遍歷的元素、當(dāng)前元素的索引和整個(gè)數(shù)組本身。

// 對(duì)每個(gè)元素執(zhí)行的操作
array.forEach(function(element, index, array) {
});

2. 使用forEach遍歷數(shù)組并執(zhí)行指定的操作：

以下是一個(gè)示例，使用forEach方法遍歷一個(gè)數(shù)組，并在控制臺(tái)上打印出每個(gè)元素的值：

const numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) {console.log(number);
});

在上面的示例中，forEach方法遍歷數(shù)組numbers，并對(duì)于每個(gè)元素number，執(zhí)行了console.log(number)的操作，將每個(gè)元素打印到控制臺(tái)上。

3. forEach方法的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

• 簡(jiǎn)潔易用：forEach方法提供了一種簡(jiǎn)單的方式來(lái)遍歷數(shù)組并對(duì)每個(gè)元素執(zhí)行操作，無(wú)需顯式編寫(xiě)循環(huán)邏輯。
• 性能高效：forEach方法的執(zhí)行速度通常相對(duì)較快，因?yàn)樗窃?JavaScript 引擎內(nèi)部實(shí)現(xiàn)的。
• 代碼可讀性：使用forEach可以使代碼更清晰和易于理解，因?yàn)樗鞔_表達(dá)了對(duì)數(shù)組元素的操作。

缺點(diǎn)：

• 不支持中途跳出或返回值：forEach方法是一個(gè)用于迭代的“只讀”方法，它無(wú)法中途跳出循環(huán)或返回一個(gè)值。如果需要在迭代過(guò)程中進(jìn)行條件判斷或提前終止循環(huán)，或者需要返回一個(gè)值，就需要使用其他的方法，如for循環(huán)或filter方法。
• 無(wú)法修改原始數(shù)組：forEach方法無(wú)法直接修改原始數(shù)組。如果需要在遍歷過(guò)程中修改數(shù)組元素，需要使用其他方法，如for循環(huán)或reduce方法。
  

4. 使用示例：

以下是一些使用forEach方法的示例：

// 打印數(shù)組元素
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {console.log(number);
});// 對(duì)數(shù)組元素進(jìn)行求和
const numbers = [1, 2, 3, 4, 5];
let sum = 0;numbers.forEach(function(number) {sum += number;
});console.log(sum);// 檢查元素是否滿(mǎn)足條件
const numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) {if (number % 2 === 0) {console.log(number + " 是偶數(shù)");} else {console.log(number + " 是奇數(shù)");}
});

這些示例展示了如何使用forEach方法遍歷數(shù)組并執(zhí)行不同的操作，包括打印元素、求和以及檢查元素的條件。

三、 map方法的詳解

1. map方法的基本概念和語(yǔ)法：

map方法是 JavaScript 中數(shù)組對(duì)象的一個(gè)方法，它用于對(duì)數(shù)組中的每個(gè)元素進(jìn)行操作，并返回一個(gè)新的數(shù)組，新數(shù)組的元素是對(duì)原數(shù)組元素應(yīng)用操作后的結(jié)果。

語(yǔ)法如下：

const newArray = arr.map(function(element, index, array) {// 返回操作后的元素return operation(element);
});

其中，arr是要進(jìn)行操作的原數(shù)組，function(element, index, array)是一個(gè)回調(diào)函數(shù)，它接受三個(gè)參數(shù)：當(dāng)前遍歷的元素element、當(dāng)前元素的索引index和整個(gè)數(shù)組array?；卣{(diào)函數(shù)應(yīng)該返回操作后的元素。

2. 使用map方法對(duì)數(shù)組進(jìn)行操作并返回新的數(shù)組：

以下是一個(gè)示例，使用map方法將數(shù)組中的每個(gè)元素加 1：

const numbers = [1, 2, 3, 4, 5];
const plusOneNumbers = numbers.map(function(number) {return number + 1;
});
console.log(plusOneNumbers); 

在上述示例中，map方法對(duì)數(shù)組numbers中的每個(gè)元素執(zhí)行了number + 1的操作，并返回了一個(gè)新的數(shù)組plusOneNumbers，其中的元素是原數(shù)組每個(gè)元素加 1 后的結(jié)果。

3. map方法的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

• 簡(jiǎn)潔易用：map方法提供了一種簡(jiǎn)單的方式來(lái)對(duì)數(shù)組進(jìn)行批量操作，并返回一個(gè)新的數(shù)組。
• 性能高效：map方法是在 JavaScript 引擎內(nèi)部實(shí)現(xiàn)的，因此在處理大型數(shù)組時(shí)效率較高。
• 鏈?zhǔn)秸{(diào)用：map方法返回的是一個(gè)新的數(shù)組，可以方便地進(jìn)行鏈?zhǔn)秸{(diào)用，進(jìn)一步對(duì)返回的數(shù)組進(jìn)行操作。

缺點(diǎn)：

• 不支持中途跳出或返回值：map方法是一個(gè)遍歷過(guò)程，它必須對(duì)每個(gè)元素都執(zhí)行回調(diào)函數(shù)，無(wú)法中途跳出或返回一個(gè)值。
• 無(wú)法修改原始數(shù)組：map方法返回的是一個(gè)新的數(shù)組，而不是修改原始數(shù)組。如果需要修改原始數(shù)組，需要使用其他方法，如for循環(huán)或reduce方法。

4. map的使用示例：

以下是一些使用map方法的示例：

// 將數(shù)組中的每個(gè)元素乘以 2
const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(function(number) {return number * 2;
});
console.log(doubleNumbers);// 將對(duì)象數(shù)組中的每個(gè)對(duì)象的屬性 funName 的值乘以 2
const objects = [{ funName: 10 },{ funName: 20 },{ funName: 30 }
];
const doubleFunNames = objects.map(function(obj) {return { funName: obj.funName * 2 };
});
console.log(doubleFunNames);// 將字符串?dāng)?shù)組中的每個(gè)字符串的首字母大寫(xiě)
const strings = ["apple", "banana", "cherry"];
const capitalizedStrings = strings.map(function(string) {return string.charAt(0).toUpperCase() + string.slice(1);
});
console.log(capitalizedStrings);

這些示例展示了如何使用map方法對(duì)不同類(lèi)型的數(shù)組進(jìn)行操作，并返回新的數(shù)組。