Javascript中“map”方法的使用_js的map方法的使用-CSDN博客

本文链接：https://blog.csdn.net/m0_51323460/article/details/140659422

map 方法是 JavaScript 中数组的一种高阶函数，用于创建一个新数组，其元素是对原数组中的每个元素调用一个提供的函数后的返回值。map 不会修改原数组，它会返回一个新数组。

语法

array.map(function(currentValue, index, array), thisArg)

参数

function(currentValue, index, array): 一个函数，用来处理数组中的每个元素，包含以下参数：
- currentValue: 当前处理的元素。
- index (可选): 当前处理元素的索引。
- array (可选): 调用 map 方法的数组。
thisArg (可选): 执行回调函数时使用的 this 值。

返回值

一个新的数组，每个元素是回调函数的返回值。返回值

示例

示例 1: 基本用法

const numbers = [1, 4, 9, 16]; 
const doubled = numbers.map(function(num) { return num * 2; }); 
console.log(doubled); // [2, 8, 18, 32]

示例 2: 使用箭头函数

const numbers = [1, 4, 9, 16]; 
const doubled = numbers.map(num => num * 2); 
console.log(doubled); // [2, 8, 18, 32]

示例 3: 处理对象数组

假设有一个包含多个用户对象的数组，想要提取出每个用户的姓名：

const users = [ 
    { id: 1, name: 'Alice' }, 
    { id: 2, name: 'Bob' }, 
    { id: 3, name: 'Charlie' } 
]; 
const names = users.map(user => user.name); 
console.log(names); // ['Alice', 'Bob', 'Charlie']

示例 4: 访问索引和原数组

const numbers = [1, 2, 3, 4]; 
const results = numbers.map((num, index, array) => { 
    return `Number: ${num}, Index: ${index}, Array: ${array}`;
 }); 
console.log(results); 
/* [ 
  "Number: 1, Index: 0, Array: 1,2,3,4",
  "Number: 2, Index: 1, Array: 1,2,3,4", 
  "Number: 3, Index: 2, Array: 1,2,3,4", 
  "Number: 4, Index: 3, Array: 1,2,3,4"
]*/

示例5：计算学生的平均成绩

假设我们有一个学生数组，每个学生对象包含他们的姓名和各科成绩。我们想要生成一个新的数组，包含每个学生的姓名和他们的平均成绩。

原始数据

const students = [ 
    { name: 'Alice', grades: { math: 85, science: 92, english: 88 } }, 
    { name: 'Bob', grades: { math: 78, science: 81, english: 74 } }, 
    { name: 'Charlie', grades: { math: 92, science: 90, english: 95 } } 
];

使用 `map` 方法计算平均成绩

使用 map 方法遍历学生数组，计算每个学生的平均成绩，并返回一个新的对象数组，其中包含学生的姓名和平均成绩。

cost studentsWithAverageGrades = students.map(student => { 
    const grades = student.grades; 
    const totalGrades = Object.values(grades).reduce((sum, grade) => sum + grade, 0); 
    const averageGrade = totalGrades / Object.values(grades).length; 
    return { 
        name: student.name, averageGrade: averageGrade.toFixed(2) // 保留两位小数 
    }; 
}); 
 console.log(studentsWithAverageGrades);
 /* [ 
 { name: 'Alice', averageGrade: '88.33' }, 
 { name: 'Bob', averageGrade: '77.67' }, 
 { name: 'Charlie', averageGrade: '92.33' } ] */