每天十分鍾系列:JS數據操作之神奇的map()


Array.prototype.map()

map()方法可以創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。

每天十分鍾系列:JS數據操作之神奇的map()

demo1

上面的例子,在控制台中打印的結果是:

  • 1

  • 2

  • 3

  • 4

  • 5

每天十分鍾系列:JS數據操作之神奇的map()

demo2

javascript學習交流群:453833554

上面的例子是將newArray數組中每一個值進行平方,然后賦值給一個新書組,也就是newMapArray中,但是對newArray中的數據不進行任何修改,打印的結果如下。

每天十分鍾系列:JS數據操作之神奇的map()

demo3

map()方法可以在實際項目中很多情況下進行使用,現在大多數的項目采用的是前后端分離的開發模式,但是有很多時候后端接口過來的數據,並不能很友好的讓前端進行使用,那么我們就需要對后端接口數據進行一次前端處理,再不改變原有數據的情況下,顯然利用map()方法進行數據處理是更好的選擇。

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

每天十分鍾系列:JS數據操作之神奇的map()

demo4

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

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

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

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

更直觀的感受一下,還是直接上圖

每天十分鍾系列:JS數據操作之神奇的map()

demo5

簡單寫一個數據處理的例子,如果后端過來的個人數據中,性別只分男女,但是顯示要求是帥哥和美女,這種情況用map()很容易處理

每天十分鍾系列:JS數據操作之神奇的map()

demo6

javascript學習交流群:453833554

當然其實還有其他方法,只是舉一個簡單的例子,大家理解思路即可,寫代碼一定要有自己的思維。

每天十分鍾系列:JS數據操作之神奇的map()

demo7

map()方法在網上有很多資料,大家可以自行查閱和學習,希望本教程能幫助新手入門前端數據處理。

javascript學習交流群:453833554


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM