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