🤍 前端開發(fā)工程師（主業(yè)）、技術(shù)博主（副業(yè)）、已過CET6
🍨 阿珊和她的貓_CSDN個人主頁
🕠 ?？透呒墝ｎ}作者、在牛客打造高質(zhì)量專欄《前端面試必備》
🍚 藍橋云課簽約作者、已在藍橋云課上架的前后端實戰(zhàn)課程《Vue.js 和 Egg.js 開發(fā)企業(yè)級健康管理項目》、《帶你從入門到實戰(zhàn)全面掌握 uni-app》

一、引言

介紹 forEach和 map的背景和用途

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

1. forEach 方法：

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

   語法：

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

   示例：

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

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

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

2. map 方法：

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

   語法：

   const newArray = array.map(function(element, index, array) {// 在這里編寫要對每個元素執(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 中的每個元素，并將其平方后存儲在新的數(shù)組 squareNumbers 中。

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

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

二、 forEach方法的詳解

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

1. 基本概念和語法：

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

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

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

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

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

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

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

優(yōu)點：

• 簡潔易用：forEach方法提供了一種簡單的方式來遍歷數(shù)組并對每個元素執(zhí)行操作，無需顯式編寫循環(huán)邏輯。
• 性能高效：forEach方法的執(zhí)行速度通常相對較快，因為它是在 JavaScript 引擎內(nèi)部實現(xiàn)的。
• 代碼可讀性：使用forEach可以使代碼更清晰和易于理解，因為它明確表達了對數(shù)組元素的操作。

缺點：

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

4. 使用示例：

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

// 打印數(shù)組元素
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {console.log(number);
});// 對數(shù)組元素進行求和
const numbers = [1, 2, 3, 4, 5];
let sum = 0;numbers.forEach(function(number) {sum += number;
});console.log(sum);// 檢查元素是否滿足條件
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方法的基本概念和語法：

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

語法如下：

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

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

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

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

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

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

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

優(yōu)點：

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

缺點：

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

4. map的使用示例：

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

// 將數(shù)組中的每個元素乘以 2
const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(function(number) {return number * 2;
});
console.log(doubleNumbers);// 將對象數(shù)組中的每個對象的屬性 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ù)組中的每個字符串的首字母大寫
const strings = ["apple", "banana", "cherry"];
const capitalizedStrings = strings.map(function(string) {return string.charAt(0).toUpperCase() + string.slice(1);
});
console.log(capitalizedStrings);

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