javascript 数组处理的两个利器: `forEach` 和 `map`(下)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

四、 forEach和 map的比较

比较 forEach和 map在功能和用途上的差异

forEach 和 map 是 JavaScript 中用于遍历数组的两个常用方法，它们在功能和用途上有以下差异：

1. 功能：

• forEach：用于遍历数组并对每个元素执行指定的操作，但不返回新的数组。它将回调函数应用到数组的每个元素上，并且可以使用 this 关键字来引用当前正在处理的元素。

• map：也用于遍历数组并对每个元素执行指定的操作，但会返回一个新的数组，新数组的元素是对原数组元素应用操作后的结果。

2. 返回值：

• forEach：不返回值，它主要用于对数组进行迭代和操作，而不是创建新的数组。

• map：返回一个新的数组，该数组包含了对原数组元素应用操作后的结果。

3. 用法示例：

• forEach 的示例：

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

• map 的示例：

const numbers = [1, 2, 3, 4, 5];
const加倍后的数字 = numbers.map(function (number) {
  return number * 2;
});
console.log(加倍后的数字); 

综上所述，forEach 主要用于对数组进行迭代和操作，而 map 主要用于创建一个新的数组，其中包含对原数组元素应用操作后的结果。选择使用哪个方法取决于你的具体需求。如果你只需要遍历数组并执行某个操作，而不需要返回新的数组，可以使用 forEach。如果你需要根据操作结果创建一个新的数组，可以使用 map。

讨论何时使用 forEach，何时使用 map

forEach 和 map 是 JavaScript 中用于遍历数组的两种常用方法。
它们都可以遍历数组中的每个元素，并对每个元素执行相应的操作。

但是，它们之间有一些重要的区别，这些区别决定了何时使用 forEach，何时使用 map。

forEach

forEach 方法用于遍历数组中的每个元素，并对每个元素执行指定的操作。它是一个用于迭代的“只读”方法，它不会返回任何值，并且不能用于修改原始数组。

以下是一些使用 forEach 的常见场景：

• 对数组进行遍历并执行某个操作，而不需要返回新的数组：

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

• 检查数组中的每个元素是否满足某个条件：

  const numbers = [1, 2, 3, 4, 5];
  
  numbers.forEach(function(number) {
    if (number % 2 === 0) {
      console.log(number + " 是偶数");
    } else {
      console.log(number + " 是奇数");
    }
  });
  

map

map 方法也用于遍历数组中的每个元素，但与 forEach 不同的是，它会返回一个新的数组，该数组是对原始数组中每个元素应用操作后的结果。

以下是一些使用 map 的常见场景：

• 将数组中的每个元素转换为另一种形式：

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

• 对数组中的每个元素进行聚合计算：

  const numbers = [1, 2, 3, 4, 5];
  
  const sumNumbers = numbers.map(function(number) {
    return number + 10;
  }).reduce(function(a, b) {
    return a + b;
  }, 0);
  
  console.log(sumNumbers); 
  

综上所述，何时使用 forEach，何时使用 map，取决于你的具体需求。如果你只需要遍历数组并执行某个操作，而不需要返回新的数组，可以使用 forEach。如果你需要根据操作结果创建一个新的数组，可以使用 map。

分析两者在性能方面的差异

从性能方面来看，for循环的性能最好，其次是forEach，最后是map。这是因为for循环没有任何额外的函数调用栈和上下文，而forEach比想象中复杂，有诸多参数和上下文需要在执行时考虑，可能会拖慢性能；map最慢，因为它的返回值是一个等长的全新数组，数组创建和赋值会产生较大的性能开销。

在实际使用中，如果需要对数组进行简单遍历，推荐使用for循环或forEach方法；如果需要对数组进行复杂操作并返回新的数组，可以考虑使用map方法。需要注意的是，在数据量较大时，遍历性能的差距可能会更加明显，因此需要根据实际情况选择合适的遍历方式。

五、实际应用场景

介绍一些实际场景，展示如何在不同情况下选择使用 forEach或 map

以下是一些实际场景，展示如何在不同情况下选择使用forEach或map：

1. 简单的迭代操作： 如果你只需要对数组进行简单的迭代，并且不需要返回任何新的值，可以使用forEach。例如，打印数组中的每个元素：

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

2. 对每个元素执行复杂的操作： 如果你需要对数组中的每个元素执行复杂的操作，但不需要返回新的数组，可以使用forEach。例如，将数组中的每个元素乘以 2：

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  number *= 2;
});

3. 返回新的数组： 如果你需要根据数组中的每个元素创建一个新的数组，可以使用map。例如，将数组中的每个元素加 1 并返回一个新的数组：

const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map(function(number) {
  return number + 1;
});

console.log(newNumbers); 

4. 同时使用 for 和 map： 如果你需要在迭代的同时创建一个新的数组，可以结合使用for循环和map。例如，将数组中的每个元素乘以 2 并将结果存储在新的数组中：

const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(newNumbers); 

总之，选择使用forEach还是map取决于你的需求。如果你只需要简单的迭代操作，或者不需要返回新的值，可以使用forEach；如果你需要根据每个元素创建一个新的数组，可以使用map。有时，你可能需要结合使用for循环和map来达到你的目的。

六、 总结

总结 forEach和 map的主要特点和用途

forEach和map都是 JavaScript 中用于遍历数组的方法，它们的主要特点和用途如下：

1. forEach方法

• 特点：
  • 对数组中的每个元素执行一次指定的操作。
  • 不返回新的数组，而是在遍历过程中直接修改原始数组。
• 用途：
  • 适用于对数组进行简单的遍历和操作，例如打印每个元素、执行一些副作用操作等。
  • 不需要返回新的数组，或者不关心返回值的情况下使用。

2. map方法

• 特点：
  • 对数组中的每个元素执行一次指定的操作，并返回一个新的数组，其中包含操作后的结果。
  • 不会修改原始数组。
• 用途：
  • 适用于将数组中的每个元素进行转换或操作，并返回一个新的数组。
  • 需要对数组进行映射操作，例如将每个元素乘以一个固定值、将字符串转换为数字等。

总的来说，forEach适用于简单的遍历和操作，不需要返回新的数组。而map适用于对数组进行转换操作，并返回一个新的数组。选择使用哪种方法取决于你的具体需求。