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

  • 相关阅读:
    javaSE基础知识
    oracle错误分析:ora-04063:view view_test has errors
    爬虫—01-爬虫原理与数据抓取
    Web—13-判断网站请求来自手机还是pc浏览器
    Web—12-详解CSS的相对定位和绝对定位
    Web—11-手机端页面适配
    Web—10-前端性能优化
    Web—09-正则表达式
    知识储备—01-进程,线程,多线程相关总结
    Web—08-移动端库和框架
  • 原文地址:https://www.cnblogs.com/gongyue/p/7681990.html
Copyright © 2020-2023  润新知