每天十分钟系列: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

上一篇:Oracle之 等待事件log file sync + log file parallel write (awr优化)


下一篇:Oracle数据库由dataguard备库引起的log file sync等待