JS map 循环

JS map 循环

在JavaScript中，map()方法是一个非常有用的数组方法，它可以用来创建一个新数组，其中包含根据原始数组中的每个元素处理后的值。在本文中，我将详细介绍map()方法的用法以及一些示例代码。

语法

map()方法的语法如下：

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

• array: 要操作的数组。
• function(currentValue, index, arr): 对数组每个元素执行的函数。该函数接受三个参数：
  • currentValue: 当前元素的值。
  • index: 当前元素的索引。
  • arr: 原始数组。
• thisValue (可选): 当执行回调函数时，用作this的值。

示例

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

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

console.log(doubledNumbers); 
// Output: [2, 4, 6, 8, 10]

在上面的示例中，我们首先定义一个包含一组数字的数组numbers，然后使用map()方法将数组中的每个元素乘以2，并将结果存储在doubledNumbers数组中。

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

const fruits = ['apple', 'banana', 'orange'];
const capitalizedFruits = fruits.map(function(fruit) {
  return fruit.toUpperCase();
});

console.log(capitalizedFruits); 
// Output: ['APPLE', 'BANANA', 'ORANGE']

在这个示例中，我们将包含水果名称的字符串数组fruits中的每个字符串转换为大写形式，并将结果存储在capitalizedFruits数组中。

示例3：使用箭头函数简化代码

const names = ['Alice', 'Bob', 'Charlie'];
const upperCaseNames = names.map(name => name.toUpperCase());

console.log(upperCaseNames); 
// Output: ['ALICE', 'BOB', 'CHARLIE']

这个示例使用了箭头函数来简化代码，将names数组中的每个元素转换为大写形式，并将结果存储在upperCaseNames数组中。

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

const words = ['JavaScript', 'HTML', 'CSS'];
const wordLengths = words.map(word => word.length);

console.log(wordLengths); 
// Output: [10, 4, 3]

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

总结

通过本文的介绍和示例代码，你应该对JavaScript中map()方法的用法有了更深入的了解。map()方法可以帮助简化对数组的处理过程，使代码更加简洁和直观。