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

转载于:https://www.cnblogs.com/gongyue/p/7681990.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354711.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用vue-axios请求geoJson数据报错的问题

最近的项目用到了echarts一个带有散点地图的图表,按照正常jquery写法应该使用ajax请求geojson的数据动态去切换地图,就像下面这样 $.get(Js/map/ cityData.name .json, function(geoJson) {map(gr-map, cityData, geoJson, geoCoordMap);//调用地图方法}); 页面显示(成功) bu…

前端工业物联网开发(Electron + Typescript + Vue)

从SpaceX公司的带来的Javascript上天新闻开始,以及近几年js语言在整个互联网的广泛应用,注定未来js语言有着不平凡的使命,跨端(一套代码多端运行)、易UI(前端开发UI的便利)、丰富的生态&#xf…

JAVA记录-Servlet介绍

1.什么是Servlet Servlet是sun公司提供的一门用于开发动态web资源的技术。Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向浏览器输出数据),需要完成以下2个步骤:1、编写一个Java类,实现…

前端jenkins打包编译发布项目流程

如今的前端项目已不像之前直接写完代码,扔到服务器直接运行了。免不了安装依赖,执行build过程,然后再将打包后的代码上传到服务器,可能还需要更改配置文件啥的。如此多的步骤严重影响开发的日常划水时间。所以jenkins自动化部署少…

OpenMap教程4 –图层

1.简介 在第一个教程中,我们创建了一个基本的OpenMap GIS应用程序,该应用程序在JFrame中显示一个从文件系统加载的具有一个形状图层的地图。 该教程基于com.bbn.openmap.app.example.SimpleMap 。 在第二篇教程中,我们扩展了基本应用程序以使…

Vue.js实战之Vuex的入门教程

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式。 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这…

为什么写公众号,为什么改名字

这是一篇水果文,啥叫水果文?比水文稍微有点内容,我暂时这么解释吧。最近刚刚开始决定写公众号,其实这个订阅号申请的还蛮早的,当时是为了学习开发公众号而创建的,所以中间有过一段空档期(呸&…

chrome浏览器解决ajax跨域问题

方法一 1、右键谷歌快捷方式,选择“属性”。 2、打开属性窗口,切换到“快捷方式”选项卡。 3、在目标路径的后面添加【 --disable-web-security】,其中chrome.exe与--disable之间有一个空格 4、点击应用,然后点击确定关闭窗口。 5…

前端的使命来了

最近国家工信部发布了一则关于重大App进行适老化改造的政策目的在于随着互联网的普及,有一部分群体在互联网应用的使用上存在着一定的障碍,为了保证这部分人能够顺利的使用手机中的App,国家出手了!现在人们的生活越来越离不开互联…

第二章 Burp Suite代理和浏览器设置

Burp Suite代理工具是以拦截代理的方式,拦截所有通过代理的网络流量,如客户端的请求数据、服务器端的返回信息等。Burp Suite主要拦截http和https协议的流量,通过拦截,Burp Suite以中间人的方式,可以对客户端请求数据、…

Multiavatar头像生成,要多少有多少

还在为选一个个性十足,不同于别人的头像而烦恼吗?12,230,590,464个头像够你选择够不够?Multiavatar一款集多文化头像生成器,它可以根据不同的种族,不同的文化,不同的年龄,不同的世界观&#xff…

将Java 8流解析为SQL

当Java 8发行并且人们开始流式处理各种东西时,很快他们就开始想象如果可以以相同的方式使用数据库将有多大的潜力。 本质上,关系数据库由以表状结构组织的巨大数据块组成。 这些结构非常适合进行过滤和映射操作,如SQL语言的SELECT&#xff0c…

TCP Congestion Control

TCP Congestion Control Congestion occurs when total arrival rate from all packet flows exceeds R over a sustained(维持) period of timeBuffers(缓冲) at multiplexer will fill and packets will be lostPhases of Congestion Behavior Light traffic Arrival Rate &l…

SVG格式的Icon,用了你就知道有多香

继阿里的iconfont之后,字节跳动也出品了自己的矢量图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景。矢量SVG图标的出现,完全改变了前端的开发方式,之前总是通过设计…

sql server2016里面的json功能 - 转

测试一下基本的,从查询结果里面构造一个json 的格式 create table t1(ID int identity,name nvarchar(50),Chinese int ,Math int)insert into t1 values (张三,90,80),(李四,75,90),(王五,68,100) select * from t1select * from t1 for json auto--查询结果 ID …

CSS实现TikTok文字抖动效果

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班......CSS技术是前端必须掌握的一项技能,不仅要掌握&#…

当心findFirst()和findAny()

过滤Java 8 Stream ,通常使用findFirst()或findAny()来获取在过滤器中幸存的元素。 但这可能并不能真正实现您的意思,并且可能会出现一些细微的错误。 那么 从我们的Javadoc( 此处和此处 )可以看出,这两个方法都从流中…

Intellij新建Spring项目引入用户目录下的Spring jar包

首先,在IntelliJ IDEA中新建module,选择Spring应用: 在初次使用时,如果IDE检测到本地没有spring核心库,则会在新建过程中下载对应库文件,在使用spring框架时,可以细分多种不同应用场景&#xff…

如何在typescript中使用axios来封装一个HttpClient类

我们通常开始直接在代码中使用像axios这样的第三方库。这没有错。但是,在不断变化的库,软件包,版本等世界中,直接使用这些库API可能会导致代码不一致。一个好的做法是创建自己的抽象并将对库API的调用包装到包装器中。这将使您保持…

gRPC Web使用指南

gRPC 是一个高性能、通用的开源 RPC 框架,其由 Google 主要面向移动应用开发并基于 HTTP/2 协议标准而设计,基于 ProtoBuf (Protocol Buffers) 序列化协议开发,且支持众多开发语言()。gRPC 提供了一种简单的方法来精确…