本篇文章為大家介紹一下JavaScript中的Array.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()
方法通常用於對元素進行一些更改,無論是乘以上面的程式碼中的特定數字,還是進行應用程式可能需要的任何其他操作。
例如,您可能有一個物件數組,這些物件儲存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()
方法的語法如下:
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
在回呼函數中使用參數,而忽略其餘參數。這就是我通常在日常專案中所做的事情:)
英文原文網址:
https://www.freecodecamp.org/news/javascript- map-how-to-use-the-js-map-function-array-method/
更多程式相關知識,請造訪:程式設計入門! !
以上是如何使用JS.map()方法(陣列法)的詳細內容。更多資訊請關注PHP中文網其他相關文章!