探秘arr.map

一、基礎概念

1、arr.map是什麼？

在JavaScript中，arr.map()是一個用於數組映射的函數，它會將數組中每個元素傳入一個回調函數內部，並返回一個新數組，新數組的每個元素都是回調函數的返回值。

2、arr.map的語法結構

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

其中，callback是必需的參數，currentValue是當前元素的值，index是當前元素的索引，array是原始數組。

二、實戰演練

1、對數組元素進行平方操作

    const arr = [1, 2, 3, 4];
    const newArr = arr.map(item => item ** 2);
    console.log(newArr);
    //輸出 [1, 4, 9, 16]

可以看出，我們通過arr.map()方法對原數組中的元素進行平方操作，並將結果保存在新數組中。

2、對數組元素進行過濾

    const arr = [1, 2, 3, 4, 5];
    const newArr = arr.map(item => {
        if (item > 2) {
            return item;
        }
    });
    console.log(newArr);
    //輸出 [undefined, undefined, 3, 4, 5]

這裡我們通過arr.map()方法進行了一個篩選操作，只將大於2的元素返回到新數組中，而小於等於2的元素會在新數組中變成undefined。

三、高級應用

1、將對象數組中的某個屬性提取出來

    const arr = [
        {id: 1, name: '張三'},
        {id: 2, name: '李四'},
        {id: 3, name: '王五'}
    ];
    const newArr = arr.map(item => item.id);
    console.log(newArr);
    //輸出 [1, 2, 3]

通過arr.map()方法，我們可以將對象數組中id屬性提取出來並保存到新數組中。

2、將字符串數組中的每個元素轉成數字類型

    const arr = ['1', '2', '3', '4'];
    const newArr = arr.map(item => parseInt(item));
    console.log(newArr);
    //輸出 [1, 2, 3, 4]

對於一些需要進行類型轉換的操作，如將字符串數組中的每個元素都轉成對應的數字類型，我們可以通過arr.map()方法實現。

四、總結

arr.map()是JavaScript中用於數組映射的重要函數之一，通過多種方式的演示與實踐，我們可以清楚地了解其語法結構、常見的使用場景以及高級應用。在實際開發過程中，arr.map()的威力不容小覷，值得我們在代碼編寫中加以充分的利用。