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
更多专业前端知识,请上 【猿2048】www.mk2048.com