数组的map方法详解

VGYUW • 2025-02-25 18:17 • 编程

一、基本概念

map方法是数组原型上的一个方法，用于对数组中的每个元素进行指定的操作，返回一个新的数组，不会改变原数组，新数组的长度和原来数组相同

let arr = [1, 2, 3];
let newArr = arr.map(function(item){
    return item * 2;
});
console.log(newArr); // [2, 4, 6]
console.log(arr); // [1, 2, 3]

在上面的代码中，我们使用map方法对原数组arr中的每个元素进行了乘以2的操作，得到了新数组newArr。

二、回调函数

map方法的第一个参数是一个回调函数，用于指定对数组中每个元素进行的操作。回调函数接收三个参数：

1. currentValue：当前值，表示正在被处理的数组元素。

2. index：当前索引，表示正在被处理的数组元素的索引。

3. array：原数组，表示正在被处理的数组本身。

通过回调函数可以对每个元素进行特定的操作，最终形成一个新的数组。

let arr = [1, 2, 3];
let newArr = arr.map(function(item, index, array){
    console.log("当前值：", item);
    console.log("当前索引：", index);
    console.log("原数组：", array);
    return item * 2;
});
console.log(newArr); // [2, 4, 6]

在上面的代码中，我们使用console.log输出了回调函数的三个参数，其中item表示正在被处理的当前元素，index表示正在被处理的当前元素的索引，array表示正在被处理的当前数组本身。

三、返回值

map方法返回一个新的数组，新数组包含原数组中每个元素的操作结果。

let arr = [1, 2, 3];
let newArr = arr.map(function(item){
    return item * 2;
});
console.log(newArr); // [2, 4, 6]

在上面的代码中，我们使用map方法将原数组中的每个元素乘以2，并将结果存储在新数组中。

四、使用箭头函数

使用箭头函数可以更加简洁的书写回调函数，可以有效提升代码的可读性和可维护性。

let arr = [1, 2, 3];
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2, 4, 6]

在上面的代码中，我们使用箭头函数替代了原来的回调函数，将数组中的每个元素乘以2，得到新的数组。

五、应用示例

1. 将数字字符串转化为数字类型

let strArr = ['1', '2', '3'];
let numArr = strArr.map(item => Number(item));
console.log(numArr); // [1, 2, 3]

在上面的代码中，我们使用map方法将字符串数组中的每个元素转化为数字类型的元素，得到新数组numArr。

2. 对象数组中某个属性进行操作

let personArr = [
    {name: 'Tom', age: 18},
    {name: 'Jerry', age: 20},
    {name: 'Mike', age: 25}
];
let ageArr = personArr.map(item => item.age);
console.log(ageArr); // [18, 20, 25]

在上面的代码中，我们使用map方法将personArr数组中每个元素对象的age属性进行提取，得到新的数组ageArr。

3. 将日志字符串转化为对象格式

let logArr = [
    '2021-01-01 breakfest 10',
    '2021-01-01 lunch 20',
    '2021-01-01 dinner 30'
];
let objArr = logArr.map(item => {
    let arr = item.split(' ');
    return {
        date: arr[0],
        meal: arr[1],
        price: Number(arr[2])
    };
});
console.log(objArr); // [{date: "2021-01-01", meal: "breakfest", price: 10}, {date: "2021-01-01", meal: "lunch", price: 20}, {date: "2021-01-01", meal: "dinner", price: 30}]

在上面的代码中，我们使用map方法将logArr数组中的每个元素字符串进行分割，转化为对应的对象数组。

六、总结

map方法是数组原型上非常实用的方法之一，通过回调函数可以对数组中每个元素进行指定的操作，最终返回一个新数组，不会修改原数组。同时，使用箭头函数可以更加简洁和易读。在实际应用中，我们可以通过map方法对数组中的元素进行特定的操作，得到符合要求的新数组。

原创文章，作者：VGYUW，如若转载，请注明出处：https://www.506064.com/n/361815.html