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

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6

🍨 阿珊和她的猫_CSDN个人主页

🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》

🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》《带你从入门到实战全面掌握 uni-app》

文章目录

  • [四、 `forEach`和 `map`的比较](#四、 forEachmap的比较)
    • [比较 `forEach`和 `map`在功能和用途上的差异](#比较 forEachmap在功能和用途上的差异)
    • [讨论何时使用 `forEach`,何时使用 `map`](#讨论何时使用 forEach,何时使用 map)
    • 分析两者在性能方面的差异
  • 五、实际应用场景
    • [介绍一些实际场景,展示如何在不同情况下选择使用 `forEach`或 `map`](#介绍一些实际场景,展示如何在不同情况下选择使用 forEachmap)
  • [六、 总结](#六、 总结)
    • [总结 `forEach`和 `map`的主要特点和用途](#总结 forEachmap的主要特点和用途)

四、 forEachmap的比较

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

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

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

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

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

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

  1. 用法示例:
  • forEach 的示例:
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (number) {
  console.log(number);
});
  • map 的示例:
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
const加倍后的数字 = numbers.map(function (number) {
  return number * 2;
});
console.log(加倍后的数字); 

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

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

forEachmap 是 JavaScript 中用于遍历数组的两种常用方法。

它们都可以遍历数组中的每个元素,并对每个元素执行相应的操作。

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

forEach

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

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

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

    javascript 复制代码
    const numbers = [1, 2, 3, 4, 5];
    
    numbers.forEach(function(number) {
      console.log(number);
    });
  • 检查数组中的每个元素是否满足某个条件:

    javascript 复制代码
    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 的常见场景:

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

    javascript 复制代码
    const numbers = [1, 2, 3, 4, 5];
    
    const doubledNumbers = numbers.map(function(number) {
      return number * 2;
    });
    
    console.log(doubledNumbers); 
  • 对数组中的每个元素进行聚合计算:

    javascript 复制代码
    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方法。需要注意的是,在数据量较大时,遍历性能的差距可能会更加明显,因此需要根据实际情况选择合适的遍历方式。

五、实际应用场景

介绍一些实际场景,展示如何在不同情况下选择使用 forEachmap

以下是一些实际场景,展示如何在不同情况下选择使用forEachmap

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

javascript 复制代码
const numbers = [1, 2, 3, 4, 5];

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

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

javascript 复制代码
const numbers = [1, 2, 3, 4, 5];

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

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

javascript 复制代码
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 并将结果存储在新的数组中:

javascript 复制代码
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来达到你的目的。

六、 总结

总结 forEachmap的主要特点和用途

forEachmap都是 JavaScript 中用于遍历数组的方法,它们的主要特点和用途如下:

  1. forEach方法
  • 特点:
    • 对数组中的每个元素执行一次指定的操作。
    • 不返回新的数组,而是在遍历过程中直接修改原始数组。
  • 用途:
    • 适用于对数组进行简单的遍历和操作,例如打印每个元素、执行一些副作用操作等。
    • 不需要返回新的数组,或者不关心返回值的情况下使用。
  1. map方法
  • 特点:
    • 对数组中的每个元素执行一次指定的操作,并返回一个新的数组,其中包含操作后的结果。
    • 不会修改原始数组。
  • 用途:
    • 适用于将数组中的每个元素进行转换或操作,并返回一个新的数组。
    • 需要对数组进行映射操作,例如将每个元素乘以一个固定值、将字符串转换为数字等。

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

相关推荐
martian6653 分钟前
Spring Boot开发三板斧:高效构建企业级应用的核心技法
java·开发语言
A_ugust__13 分钟前
Vue3.2 项目打包成 Electron 桌面应用
javascript·vue.js·electron
cherry523016 分钟前
【Java设计模式】第1章 课程导学
java·开发语言·设计模式
wuxiguala27 分钟前
【java图形化界面编程】
java·开发语言·python
东方雴翾30 分钟前
CSS语言的游戏AI
开发语言·后端·golang
鲤鱼不懂1 小时前
python 浅拷贝copy与深拷贝deepcopy 理解
开发语言·python
猫猫头有亿点炸1 小时前
C语言之九九乘法表
c语言·开发语言
问道飞鱼1 小时前
【Vue3知识】组件间通信的方式
开发语言·javascript·ecmascript·组件·通信
小破孩呦1 小时前
动态列表的数据渲染、新增、编辑等功能开发及数据处理
前端·javascript·elementui
熟悉不过1 小时前
cesium项目之cesiumlab地形数据加载
前端·javascript·vue.js·cesium·webgis·cesiumlab