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

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