js map遍历|极客笔记

js map遍历

在JavaScript编程中，经常需要对数组或对象进行遍历操作。map()是JavaScript中常用的遍历方法之一，它可以对数组的每个元素进行操作，并返回一个新的数组，常用于将原始数组中的每个元素转化为其他形式。

下面将详细介绍map()方法的用法，包括参数和示例代码，以帮助读者更好地理解和运用。

1. `map()`方法的基本语法

map()方法是数组的一个原生方法，它接受一个回调函数作为参数，在回调函数中定义要对每个元素执行的操作，并返回一个新的数组。

map()方法的基本语法如下：

array.map(callback(currentValue[, index[, array]])[, thisArg])

其中，参数说明如下：

callback：必需，表示对每个元素要执行的操作的回调函数，该函数接受三个参数：
- currentValue：必需，表示当前正在处理的元素。
- index：可选，表示当前元素在数组中的索引。
- array：可选，表示调用map()方法的原始数组。
thisArg：可选，表示在执行回调函数时使用的this值。

2. `map()`方法的返回值

map()方法会创建一个新的数组，该数组的每个元素是在原始数组上调用回调函数的结果。原始数组不会被修改。

下面是一个简单的示例，演示map()方法的返回值：

let numbers = [1, 2, 3, 4];
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers);  // [2, 4, 6, 8]

在上面的示例中，map()方法将原始数组numbers中的每个元素乘以2，并将结果存储在新数组doubledNumbers中。

3. `map()`方法的应用场景

map()方法常用于遍历数组，并对每个元素进行操作。下面列举几个常见的应用场景。

3.1 数组元素求平方

let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(function(number) {
  return number ** 2;
});
console.log(squaredNumbers);  // [1, 4, 9, 16]

在上面的示例中，map()方法将原始数组numbers中的每个元素求平方，并将结果存储在新数组squaredNumbers中。

3.2 对象数组属性提取

let students = [
  { name: 'Alice', age: 18 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 22 }
];

let names = students.map(function(student) {
  return student.name;
});
console.log(names);  // ['Alice', 'Bob', 'Charlie']

在上面的示例中，map()方法将对象数组students中的每个元素的name属性提取出来，并将结果存储在新数组names中。

3.3 修改对象属性

let students = [
  { name: 'Alice', age: 18 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 22 }
];

let newStudents = students.map(function(student) {
  student.age += 1;
  return student;
});
console.log(newStudents);

在上面的示例中，map()方法将对象数组students中的每个元素的age属性加1，并将结果存储在新数组newStudents中。

3.4 字符串转换

let names = ['Alice', 'Bob', 'Charlie'];
let upperCaseNames = names.map(function(name) {
  return name.toUpperCase();
});
console.log(upperCaseNames);  // ['ALICE', 'BOB', 'CHARLIE']

在上面的示例中，map()方法将字符串数组names中的每个元素转换为大写，并将结果存储在新数组upperCaseNames中。