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

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

一、引言

介绍 forEachmap的背景和用途

forEachmap 是 JavaScript 中用于处理数组的两个常用方法。

  1. forEach 方法:
    forEach 方法用于遍历数组中的每个元素,并对每个元素执行指定的操作。它是一个用于迭代数组的内置函数,不返回任何值。
    语法:
array.forEach(function(element, index, array) {
  // 在这里编写要对每个元素执行的操作
});
  1. 示例:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});
  1. 在上述示例中,forEach 方法遍历数组 numbers 中的每个元素,并在每次迭代时将当前元素打印到控制台上。
    forEach 方法的主要用途是对数组进行迭代操作,例如打印数组中的每个元素、修改数组中的每个元素或执行其他与每个元素相关的操作。
  2. map 方法:
    map 方法用于对数组中的每个元素进行操作,并返回一个新的数组,其中包含对原始数组中每个元素应用操作的结果。
    语法:
const newArray = array.map(function(element, index, array) {
  // 在这里编写要对每个元素执行的操作
  return operationResult;
});
  1. 示例:
const numbers = [1, 2, 3, 4, 5];
const squareNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squareNumbers); 
  1. 在上述示例中,map 方法遍历数组 numbers 中的每个元素,并将其平方后存储在新的数组 squareNumbers 中。
    map 方法的主要用途是对数组进行转换操作,例如将数组中的每个元素加 1、将每个元素转换为字符串或执行其他类型的元素级操作。

forEachmap 都是 JavaScript 中用于处理数组的常用方法。forEach 用于迭代和对每个元素执行操作,而 map 用于对每个元素进行操作并返回一个新的数组。选择使用哪个方法取决于你的具体需求。如果你只需要对数组进行迭代并执行操作,而不需要返回新的数组,可以使用 forEach。如果你需要对每个元素进行操作并返回一个新的数组,可以使用 map

二、 forEach方法的详解

forEach方法是 JavaScript 中用于遍历数组并对每个元素执行指定操作的一种常用方法。它是 ES5(ECMAScript 5)引入的数组方法之一。

  1. 基本概念和语法:

forEach方法接受一个回调函数作为参数,并将该回调函数应用到数组的每个元素上。回调函数接受三个参数:当前遍历的元素、当前元素的索引和整个数组本身。

// 对每个元素执行的操作
array.forEach(function(element, index, array) {
});
  1. 使用forEach遍历数组并执行指定的操作:

以下是一个示例,使用forEach方法遍历一个数组,并在控制台上打印出每个元素的值:

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

在上面的示例中,forEach方法遍历数组numbers,并对于每个元素number,执行了console.log(number)的操作,将每个元素打印到控制台上。

  1. forEach方法的优缺点:

优点:

  • 简洁易用:forEach方法提供了一种简单的方式来遍历数组并对每个元素执行操作,无需显式编写循环逻辑。
  • 性能高效:forEach方法的执行速度通常相对较快,因为它是在 JavaScript 引擎内部实现的。
  • 代码可读性:使用forEach可以使代码更清晰和易于理解,因为它明确表达了对数组元素的操作。

缺点:

  • 不支持中途跳出或返回值:forEach方法是一个用于迭代的“只读”方法,它无法中途跳出循环或返回一个值。如果需要在迭代过程中进行条件判断或提前终止循环,或者需要返回一个值,就需要使用其他的方法,如for循环或filter方法。
  • 无法修改原始数组:forEach方法无法直接修改原始数组。如果需要在遍历过程中修改数组元素,需要使用其他方法,如for循环或reduce方法。
  1. 使用示例:

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

// 打印数组元素
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});
// 对数组元素进行求和
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 + " 是偶数");
  } else {
    console.log(number + " 是奇数");
  }
});

这些示例展示了如何使用forEach方法遍历数组并执行不同的操作,包括打印元素、求和以及检查元素的条件。

三、 map方法的详解

  1. map方法的基本概念和语法:

map方法是 JavaScript 中数组对象的一个方法,它用于对数组中的每个元素进行操作,并返回一个新的数组,新数组的元素是对原数组元素应用操作后的结果。

语法如下:

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

其中,arr是要进行操作的原数组,function(element, index, array)是一个回调函数,它接受三个参数:当前遍历的元素element、当前元素的索引index和整个数组array。回调函数应该返回操作后的元素。

  1. 使用map方法对数组进行操作并返回新的数组:

以下是一个示例,使用map方法将数组中的每个元素加 1:

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

在上述示例中,map方法对数组numbers中的每个元素执行了number + 1的操作,并返回了一个新的数组plusOneNumbers,其中的元素是原数组每个元素加 1 后的结果。

  1. map方法的优缺点:

优点:

  • 简洁易用:map方法提供了一种简单的方式来对数组进行批量操作,并返回一个新的数组。
  • 性能高效:map方法是在 JavaScript 引擎内部实现的,因此在处理大型数组时效率较高。
  • 链式调用:map方法返回的是一个新的数组,可以方便地进行链式调用,进一步对返回的数组进行操作。

缺点:

  • 不支持中途跳出或返回值:map方法是一个遍历过程,它必须对每个元素都执行回调函数,无法中途跳出或返回一个值。
  • 无法修改原始数组:map方法返回的是一个新的数组,而不是修改原始数组。如果需要修改原始数组,需要使用其他方法,如for循环或reduce方法。

  1. map的使用示例:

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

// 将数组中的每个元素乘以 2
const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubleNumbers);
// 将对象数组中的每个对象的属性 funName 的值乘以 2
const objects = [
  { funName: 10 },
  { funName: 20 },
  { funName: 30 }
];
const doubleFunNames = objects.map(function(obj) {
  return { funName: obj.funName * 2 };
});
console.log(doubleFunNames);
// 将字符串数组中的每个字符串的首字母大写
const strings = ["apple", "banana", "cherry"];
const capitalizedStrings = strings.map(function(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
});
console.log(capitalizedStrings);

这些示例展示了如何使用map方法对不同类型的数组进行操作,并返回新的数组。

相关文章
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
39 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
29 3
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
49 1
|
2月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
23 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
32 0
|
6月前
|
Dart
Dart之集合详解(List、Set、Map)
Dart之集合详解(List、Set、Map)
|
3月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
|
4月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。
下一篇
DataWorks