數組的map方法詳解

一、基本概念

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方法對數組中的元素進行特定的操作，得到符合要求的新數組。