js map()方法|极客笔记

js map()方法

1. 介绍

在JavaScript中，map()方法是Array对象的一个方法，被用于通过对数组的每个元素应用一个回调函数来创建一个新的数组。这个回调函数接受三个参数：当前元素的值，当前元素的索引和数组本身。

map()方法会按照原始数组的顺序依次执行回调函数，并将回调函数的返回值作为新数组的元素，最终返回这个新数组。

下面是map()方法的语法：

arr.map(callback(currentValue, index, array), thisArg)

其中，arr代表要调用map()方法的数组，callback是一个函数，currentValue代表数组中当前被处理的元素的值，index代表当前元素的索引，array代表调用map()方法的原始数组，thisArg可选，代表回调函数执行时的this值。

以下是一个简单的示例：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);

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

在上面的代码中，map()方法将原始数组中的每个元素都乘以2，并返回一个新的数组doubledNumbers。

2. 使用场景

map()方法在很多场景中都非常有用。下面列举了一些常见的应用场景。

2.1. 转换数组中的每个元素

map()方法允许我们对一个数组中的每个元素进行处理，并返回新的处理后的数组，而不改变原始数组。

下面是一个使用场景示例，假设有一个存储学生成绩的数组，我们想要将所有成绩加上10分：

const scores = [85, 92, 78, 95, 88];
const updatedScores = scores.map((score) => score + 10);

console.log(updatedScores);
// 输出: [95, 102, 88, 105, 98]

在上面的代码中，map()方法将原始数组中的每个元素都加上了10，并返回了一个新的数组updatedScores。

2.2. 生成新的对象数组

map()方法也可以用来将一个对象数组转换成另一个对象数组，可以根据需要选择提取对象的某些属性。

下面是一个使用场景示例，假设有一个存储学生对象的数组，我们想要提取每个学生的姓名属性，生成一个只包含姓名的新数组：

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

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

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

在上面的代码中，map()方法提取了每个学生对象的姓名属性，并返回了一个新的数组names。

2.3. 生成React组件列表

在React开发中，常常需要根据给定的数据生成一组组件列表，map()方法可以非常方便地帮助我们完成这个任务。

下面是一个使用场景示例，假设有一个存储用户对象的数组，我们想要根据每个用户对象生成一个用户信息组件列表：

import React from 'react';

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const UserList = () => {
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <span>{user.name}</span>
        </div>
      ))}
    </div>
  );
};

export default UserList;

在上面的代码中，map()方法根据每个用户对象生成了一个用户信息组件列表，并通过设置key属性来为每个组件提供唯一的标识。