JS forEach和map方法的用法与区别分析

下面我将详细讲解“JS forEach和map方法的用法与区别分析”的完整攻略。

1. forEach方法的用法与示例

forEach方法的定义

forEach() 方法对数组的每个元素执行一次提供的函数，无返回值。

forEach方法的语法

arr.forEach(callback(currentValue[, index[, array]])[, thisArg])

forEach方法的参数

• callback： 遍历数组的时候执行的函数
  • currentValue： 数组正在处理的当前元素。
  • index(可选)：数组正在处理的当前元素的索引。
  • array(可选)：调用 forEach() 方法的数组。
• thisArg(可选)： 执行回调函数 callback 时使用的 this 值。

forEach方法的示例

let arr = [1, 2, 3, 4];
arr.forEach(num => console.log(num ** 2));  // 输出：1 4 9 16

上面的代码中，利用 forEach 方法循环遍历数组，并使用箭头函数对数组元素进行平方操作。

2. map方法的用法与示例

map方法的定义

map() 方法对数组中的每个元素调用提供的函数，并使用结果创建新的数组。

map方法的语法

const newArr = arr.map(callback(currentValue[, index[, array]])[, thisArg]);

map方法的参数

• callback： 遍历数组的时候执行的函数
  • currentValue： 数组正在处理的当前元素。
  • index(可选)：数组正在处理的当前元素的索引。
  • array(可选)：调用 forEach() 方法的数组。
• thisArg(可选)： 执行回调函数 callback 时使用的 this 值。

map方法的示例

let arr = [1, 2, 3, 4];
let newArr = arr.map(num => num * 2);  // 返回新数组 [2, 4,  6, 8]

上面的代码中，利用 map 方法循环遍历数组，对数组元素进行乘以2的操作，并创建返回新数组。

3. forEach和map方法的区别分析

在实际应用中，forEach 和 map 方法的主要区别是：

• 返回值：forEach 方法没有返回值（undefined），而 map 方法会返回一个新数组，该新数组的元素是对原始数组元素通过提供的函数计算后的结果。
• 使用方式：forEach 更适合用于需要直接操作数组的情况，而不需要返回新数组；map 更适合用于需要创建新游标并保存/upate其原始数组每个值的情况。

4. 至少两个JS代码块展示forEach和map方法的应用场景

应用场景1：forEach 操作数组元素，检验条件是否成立

let arr = [1, 2, 3, 4];
let status = true;
arr.forEach(num => {
    if (num >= 0 && num < 10) {
        console.log(`${num} 符合条件`);
    } else {
        console.log(`${num} 不符合条件`);
        status = false;
    }
});

if(status) {
    console.log("所有元素符合条件");
} else {
    console.log("存在不符合条件元素");
}

上面的代码中，forEach 方法用于遍历数组元素，检查每个元素是否满足条件，通过变量 status 保存元素是否满足条件，最后判断所有元素是否符合条件。

应用场景2：map 转换数组元素，创建新数组

let arr = [1, 2, 3, 4];
let newArr = arr.map(num => {
    if (num % 2 === 0) {
        return "偶数";
    } else {
        return "奇数";
    }
});

console.log(newArr);  // 返回新数组 ["奇数", "偶数", "奇数", "偶数"]

上面的代码中，map 方法用于创建新数组，将原数组元素转换为奇数或偶数，并保存在新数组中，返回新数组。