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

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

四、 forEachmap的比较

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

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

  1. 功能:
  • forEach:用于遍历数组并对每个元素执行指定的操作,但不返回新的数组。它将回调函数应用到数组的每个元素上,并且可以使用 this 关键字来引用当前正在处理的元素。
  • map:也用于遍历数组并对每个元素执行指定的操作,但会返回一个新的数组,新数组的元素是对原数组元素应用操作后的结果。
  1. 返回值:
  • forEach:不返回值,它主要用于对数组进行迭代和操作,而不是创建新的数组。
  • map:返回一个新的数组,该数组包含了对原数组元素应用操作后的结果。
  1. 用法示例:
  • 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

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

五、实际应用场景

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

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

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来达到你的目的。

六、 总结

总结 forEachmap的主要特点和用途

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

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

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

相关文章
|
9天前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
1天前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
11 3
|
7天前
|
JavaScript 前端开发 C++
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
|
7天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
9天前
数组方法中的`forEach()`方法和`map()`方法有什么区别?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
|
9天前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
10天前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
9天前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
2月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
|
2月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。