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