JS循环map|极客笔记

JS循环map

在JavaScript中，我们经常会用到数组的map方法来遍历数组并对每个元素进行操作。在这篇文章中，我们将深入了解如何在JavaScript中使用map方法来进行循环。

什么是map方法

在JavaScript中，数组的map方法是一个非常有用的方法，它用于创建一个新数组，该数组是通过对原始数组中的每个元素应用一个函数得到的。这个函数将每个元素作为参数，并返回一个新的元素。例如，我们可以使用map方法将一个数组中的所有元素都乘以2并返回一个新数组。

map方法的基本语法

map方法的基本语法如下：

array.map(function(currentValue, index, arr), thisValue)

array：要操作的原始数组
function(currentValue, index, arr)：对数组中的每个元素需要执行的函数。该函数可以接受三个参数：
- currentValue：当前正在处理的元素
- index：当前正在处理的元素的索引
- arr：原始数组
thisValue：可选参数，传递给函数的 this 值。

使用map方法进行循环

下面我们将通过一些示例来演示如何使用map方法进行循环。

示例1：将数组中的每个元素乘以2

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

const doubled = numbers.map(num => num * 2);

console.log(doubled); // 输出 [2, 4, 6, 8, 10]

在上面的示例中，我们使用了箭头函数来将数组中的每个元素都乘以2，并将结果存储在新数组doubled中。

示例2：将数组中的字符串转为大写

const strings = ["hello", "world", "javascript"];

const upperCaseStrings = strings.map(str => str.toUpperCase());

console.log(upperCaseStrings); // 输出 ["HELLO", "WORLD", "JAVASCRIPT"]

在这个示例中，我们使用map方法将数组中的每个字符串转换为大写，并将结果存储在新数组upperCaseStrings中。

示例3：获取数组中每个元素的长度

const fruits = ["apple", "banana", "orange"];

const lengths = fruits.map(fruit => fruit.length);

console.log(lengths); // 输出 [5, 6, 6]

在这个示例中，我们使用map方法获取数组中每个字符串元素的长度，并将结果存储在新数组lengths中。

使用map方法处理对象数组

除了处理基本数据类型外，我们也可以使用map方法处理包含对象的数组。

示例4：获取对象数组中每个对象的某个属性

const students = [
  { name: "Alice", age: 22 },
  { name: "Bob", age: 24 },
  { name: "Cindy", age: 21 }
];

const names = students.map(student => student.name);

console.log(names); // 输出 ["Alice", "Bob", "Cindy"]

在这个示例中，我们使用map方法获取对象数组中每个对象的name属性，并将结果存储在新数组names中。

示例5：计算对象数组中每个对象的属性之和

const numbers = [
  { a: 1, b: 2 },
  { a: 3, b: 4 },
  { a: 5, b: 6 }
];

const sums = numbers.map(numObj => numObj.a + numObj.b);

console.log(sums); // 输出 [3, 7, 11]

在这个示例中，我们使用map方法计算对象数组中每个对象的a和b属性之和，并将结果存储在新数组sums中。