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

轉載于:https://www.cnblogs.com/gongyue/p/7681990.html

總結

以上是生活随笔為你收集整理的每天十分钟系列：JS数据操作之神奇的map()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。