JS的map方法|极客笔记

JS的map方法

在JavaScript中，map()方法是数组对象的一个常用方法，用于对数组中的每个元素都执行一个指定的函数。它返回一个新的数组，包含经过指定函数处理后的每个元素。

语法

let newArr = oldArr.map((currentValue, index, arr) => {
    // 返回处理后的值
});

currentValue: 当前元素的值
index: 当前元素的索引
arr: 原始数组

简单示例

假设有一个数组存储了一组数字，我们想对每个数字进行加1操作，并将结果存储在一个新数组中。

let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.map(num => num + 1);

console.log(newNumbers);  // [2, 3, 4, 5, 6]

在上面的示例中，我们使用map()方法对numbers数组的每个元素进行了加1操作，最终得到了newNumbers数组。

使用map()方法的好处

避免原数组被修改

使用map()方法可以避免修改原始数组的值。

let numbers = [1, 2, 3, 4, 5];
let newNumbers = numbers.map(num => num * 2);

console.log(numbers);  // [1, 2, 3, 4, 5]
console.log(newNumbers);  // [2, 4, 6, 8, 10]

更简洁的代码

使用map()方法能够让代码更加简洁和易读。

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

console.log(upperCaseNames);  // ["ALICE", "BOB", "CHARLIE"]

方便处理复杂数据结构

map()方法对于处理嵌套数组或对象非常方便。

let users = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 35 }
];

let userNames = users.map(user => user.name);

console.log(userNames);  // ["Alice", "Bob", "Charlie"]

注意事项

在使用map()方法时，有几个需要注意的地方。

返回值

map()方法返回一个新数组，不会修改原始数组。

不改变原数组

map()方法不会改变原始数组的值，而是返回一个新数组。

注意回调函数

在使用map()方法时，回调函数中需要有返回值。

实际应用

map()方法在实际开发中非常常见，特别是在对数组进行批量处理时。

从字符串数组中提取数字

假设有一个字符串数组，需要提取其中的数字并转换为数字数组。

let strNumbers = ["1", "2", "3", "4", "5"];
let numbers = strNumbers.map(str => parseInt(str));

console.log(numbers);  // [1, 2, 3, 4, 5]

对象数组处理

对于对象数组，可以使用map()方法对其中的对象进行处理。

let users = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 35 }
];

let newUserList = users.map(user => {
    return {
        name: user.name,
        age: user.age + 1
    };
});

console.log(newUserList);
/*
[
    { name: "Alice", age: 31 },
    { name: "Bob", age: 26 },
    { name: "Charlie", age: 36 }
]
*/

数组去重

使用map()方法结合indexOf()可以实现数组去重。

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.filter((num, index) => numbers.indexOf(num) === index);

console.log(uniqueNumbers);  // [1, 2, 3, 4, 5]