Jquery $.map使用方法实例详解


Posted in jQuery onSeptember 01, 2020

$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。

注意:

1. 在jQuery 1.6 之前,该函数只支持遍历数组;从 1.6 开始,该函数也支持遍历对象。

2. map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。

3. 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。

$.map(data,function(item,index){return XXX})

遍历data数组中的每个元素,并按照return中的计算方式 形成一个新的元素,放入返回的数组中

var b = $.map( [55,1,2], function( item,index ) { return { "label": item, "value": index }});
            alert(b[0].label +" "+ b[0].value);

[55,1,2]是一个数组,按照return的条件,,,,function 中的item,为55时,index也就是数组的下标就为0

$.map()括号中就相当于一个循环

循环多条数据,把数据定义为b

var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
 return [a - 45, index];
});

输出为:

[-45, 0, -44, 1, 7, 2, 52, 3]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
jQuery实现动态加载瀑布流
Sep 01 #jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
php中count获取多维数组长度的方法
2014/11/03 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Django数据统计功能count()的使用
2020/11/30 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
以太网Ethernet IEEE802.3
2013/08/05 面试题
师范生自荐信范文
2013/10/06 职场文书
个人培训自我鉴定
2014/03/28 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
后备干部培训方案
2014/05/22 职场文书
司法局火灾防控方案
2014/06/05 职场文书
上党课的心得体会
2014/09/02 职场文书
护理医院见习报告
2014/11/03 职场文书
学生评语集锦
2015/01/04 职场文书
个人总结与自我评价
2015/02/14 职场文书
创业计划书之溜冰场
2019/10/25 职场文书