JavaScript Map –如何使用JS.map()函數

有時，你可能須要獲取一個數組並將一些操做應用於其子項，以便得到具備已修改元素的新數組。

無需使用循環手動遍歷數組，你能夠簡單地使用內置Array.map()方法。

該Array.map()方法容許你遍歷數組並使用回調函數修改其元素。而後，將對數組的每一個元素執行回調函數。

例如，假設你具備如下數組元素：

let arr = [3, 4, 5, 6];

如今，假設你須要將數組的每一個元素乘以3。你能夠考慮for以下使用循環：

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

可是實際上可使用該Array.map()方法來達到相同的結果。這是一個例子：

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

該Array.map()方法一般用於對元素進行一些更改，不管是乘以上面的代碼中的特定數字，仍是進行應用程序可能須要的任何其餘操做。

如何在對象數組上使用map()

例如，您可能有一個對象數組，這些對象存儲firstName和存儲lastName您的朋友的值，以下所示：

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

您可使用map()在陣列上的方法來迭代和加入的價值觀 firstName和lastName以下：

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

該map()方法傳遞的不單單是一個元素。讓咱們看看傳遞map()給回調函數的全部參數。

完整的map()方法語法

該map()方法的語法以下：

arr.map(function(element, index, array){  }, this);

function()在每一個數組元素上調用該回調，而且該map()方法始終將current element，index當前元素的of和整個array對象傳遞給它。

該this參數將在回調函數中使用。默認狀況下，其值爲undefined。例如，下面是將this值更改成數字的方法80：

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(this) // 80
}, 80);

console.log()若是你有興趣，還可使用測試其餘參數：

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

這就是您須要瞭解的全部Array.map()方法。一般，您只會element在回調函數中使用參數，而忽略其他參數。這就是我一般在平常項目中所作的事情：）