Array.prototype.map()

map()方法可以创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

demo1

上面的例子，在控制台中打印的结果是：

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()相关推荐

OpenCV学习笔记（四十一）——再看基础数据结构core OpenCV学习笔记（四十二）——Mat数据操作之普通青年、文艺青年、暴力青年 OpenCV学习笔记（四十三）——存取像素值操作汇总co
OpenCV学习笔记(四十一)--再看基础数据结构core 记得我在OpenCV学习笔记(四)--新版本的数据结构core里面讲过新版本的数据结构了,可是我再看这部分的时候,我发现我当时实在是看得太马 ...
箱形图适用于哪种数据_盘点 | 十分钟进阶Excel数据可视化
过·往半年前,开了一个叫"知识点"的小专题,陆陆续续分享了一些数据可视化相关的东西.其中Excel相关16篇,Tableau相关3篇,Ai相关3篇,D3.js相关2篇. 刚开始的 ...
OpenCV学习笔记（四十二）——Mat数据操作之普通青年、文艺青年、暴力青年
首先还是要感谢箫鸣朋友在我<OpenCV学习笔记(四十)--再谈OpenCV数据结构Mat详解>的留言,告诉我M.at<float>(3, 3)在Debug模式下运行缓慢,推荐 ...
app把信息添加到mysql_10) 十分钟学会android--app数据保存三种方式
虽然可以在onPause()时保存一些信息以免用户的使用进度被丢失,但大多数Android app仍然是需执行保存数据的动作.大多数较好的apps都需要保存用户的设置信息,而且有一些apps必须维护大 ...
十分钟学会SSH+SFTP操作终端，告别XShell
1.前言在Mac下登陆远程服务器并没有Windows那么方便的使用XShell,相比较而言,在Mac下更多的是依赖终端输入SSH命令登陆远程服务器. 使用SSH命令行的好处就是可以近距离接触底层,用 ...
10) 十分钟学会android--app数据保存三种方式
虽然可以在onPause()时保存一些信息以免用户的使用进度被丢失,但大多数Android app仍然是需执行保存数据的动作.大多数较好的apps都需要保存用户的设置信息,而且有一些apps必须维护大 ...
三分钟入门大数据之用户画像标签的分类
哈喽,大家好,我是汉斯老师.近几年来,互联网行业由于较高的薪资收入,受到许多人的追捧.很多年轻的学子,或是其他行业的有志青年,都想要投身到这个行业中来.然而一方面受到"互联网寒冬" ...
三分钟入门大数据之什么是用户画像？
哈喽,大家好,我是汉斯老师.近几年来,互联网行业由于较高的薪资收入,受到许多人的追捧.很多年轻的学子,或是其他行业的有志青年,都想要投身到这个行业中来.然而一方面受到"互联网寒冬" ...
十分钟，学会使用js三种方法创建本地json数据文件
前言在干业务时,需要得到一份全国省市到街道的区划数据,刚好业务中连接了高德地图,高德地图又提供了区划的api,这下只需要把数据写到json里了.什么!你说你还不会用js创建json文件?没关系,只需 ...

每天十分钟系列：JS数据操作之神奇的map()

Array.prototype.map()

每天十分钟系列：JS数据操作之神奇的map()相关推荐

最新文章

热门文章