天天十分鐘系列：JS數據操做之神奇的map()

Array.prototype.map()

map()方法能夠建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。

demo1

上面的例子，在控制檯中打印的結果是：

• 1

• 2

• 3

• 4

• 5

demo2

javascript學習交流羣：453833554

上面的例子是將newArray數組中每個值進行平方，而後賦值給一個新書組，也就是newMapArray中，可是對newArray中的數據不進行任何修改，打印的結果以下。

demo3

map()方法能夠在實際項目中不少狀況下進行使用，如今大多數的項目採用的是先後端分離的開發模式，可是有不少時候後端接口過來的數據，並不能很友好的讓前端進行使用，那麼咱們就須要對後端接口數據進行一次前端處理，再不改變原有數據的狀況下，顯然利用map()方法進行數據處理是更好的選擇。

map() 方法在使用的時候有三個參數，直接上圖：

demo4

我從新定義了一下newArray數組，在map()方法中輸入三個參數

• item 數組中正在處理的當前元素。

• index 數組中正在處理的當前元素的索引。

• array map()方法被調用的數組。

更直觀的感覺一下，仍是直接上圖

demo5

簡單寫一個數據處理的例子，若是後端過來的我的數據中，性別只分男女，可是顯示要求是帥哥和美女，這種狀況用map()很容易處理

demo6

javascript學習交流羣：453833554

固然其實還有其餘方法，只是舉一個簡單的例子，你們理解思路便可，寫代碼必定要有本身的思惟。

demo7

map()方法在網上有不少資料，你們能夠自行查閱和學習，但願本教程能幫助新手入門前端數據處理。

javascript學習交流羣：453833554