JavaScript 中 Array map() 方法

語言: CN / TW / HK

考察下面的一個例項:

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

在上面的方法中,返回了一個對陣列 map 後的結果。

方法解讀

map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。

map() 方法按照原始陣列元素順序依次處理元素。

map() 不會對空陣列進行檢測,map() 也不會改變原始陣列。

從理解的角度來說就是 map() 方法會對原素組中的方法進行一次遍歷,在遍歷的時候,每次會取出原陣列中的值,然後將取出來的值進行計算。

 

mapper-illustration_ocnina

 

如何進行計算,取決於 map 函式內定義的方法,如果上面的示例,使用的是箭頭表示式來進行計算的,如果你對箭頭表示式還不太清楚的話,請參考相關文章。

當然,我們還可以在 map 中定義一個函式,例如下面的程式碼:

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction)

function myFunction(num) {
  return num * 10;
}

針對上面的這個程式碼就是在 map 方法執行的時候,將會從原始陣列 numbers 內取得一個值(value),然後把這個值作為引數傳遞給 myFunction 這個函式。

myFunction 進行計算後,將返回的值填充回需要返回的陣列中已經取出來的的值所對應的位置。

針對這個方法,我們只需要知道,需要對輸入陣列中的每一個只進行函式定義中的運算即可。

 

https://www.ossez.com/t/javascript-array-map/13692