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日程管理控件glDatePicker用法详解
Mar 29 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
前端性能优化及技巧
2016/05/06 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
小学敬老月活动方案
2014/02/11 职场文书
党课培训主持词
2014/04/01 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
出差报告范文
2014/11/06 职场文书
感谢信范文大全
2015/01/23 职场文书
开展警示教育活动总结
2015/05/09 职场文书