Jquery对数组的操作技巧整理


Posted in Javascript onMarch 25, 2014

1. $.each(array, [callback]) 遍历[常用]

解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略.
each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同 
$.each(_mozi,function(key,val){ 
//回调函数有两个参数,第一个是元素索引,第二个为当前值 
alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val); 
});

相对于原生的for..in,each更强壮一点. for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取;
2. $.grep(array, callback, [invert]) 过滤数组[常用]
解释: 使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回 true 以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);
$.grep(_mozi,function(val,key){ 
//过滤函数有两个参数,第一个为当前元素,第二个为元素索引 
if(val=='墨子'){ 
alert('数组值为 墨子 的下标是: '+key); 
} 
}); 
var _moziGt1=$.grep(_mozi,function(val,key){ 
return key>1; 
}); 
alert('_mozi数组中索引值大于1的元素为: '+_moziGt1); 
var _moziLt1=$.grep(_mozi,function(val,key){ 
return key>1; 
},true); 
//此处传入了第三个可靠参数,对过滤函数中的返回值取反 
alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);

3. $.map(array,[callback])按给定条件转换数组 [一般]
解释:作为参数的转换函数会为每个数组元素调用, 而且会给这个转换函数传递一个表示被转换的元素作为参数. 转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组, 并扩展至原始数组中.
这个是个很强大的方法,但并不常用. 它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素.
var _mapArrA=$.map(_mozi,function(val){ 
return val+'[新加]'; 
}); 
var _mapArrB=$.map(_mozi,function(val){ 
return val=='墨子' ? '[只给墨子加]'+val : val; 
}); 
var _mapArrC=$.map(_mozi,function(val){ 
//为数组元素扩展一个新元素 
return [val,(val+'[扩展]')]; 
}); 
alert('在每个元素后面加\'[新加]\'字符后的数组为: '+ _mapArrA); 
alert('只给元素 墨子 添加字符后的数组为: '+ _mapArrB); 
alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '+_mapArrC);

4 .$.inArray(val,array)判断值是否存在于数组中[常用]
解释: 确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 ).
记得indexOf()方法了吗? indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1.现在, 知道怎么用了吧. 有了它, 判断某个值是否存在于数组中,就变得轻而易举了.
var _exist=$.inArray('墨子',_mozi); 
var _inexistence=$.inArray('卫鞅',_mozi) 
if(_exist>=0){ 
alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist); 
} 
if(_inexistence<0){ 
alert('卫鞅 不存在于数组_mozi中!,返回值为: '+_inexistence+'!'); 
}

5 .$.merge(first,second)合并两个数组[一般]
解释: 返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素.
这个方法是用jQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组.
//原生concat()可能比它还简洁点 
_moziNew=$.merge(_mozi,['鬼谷子','商鞅','孙膑','庞涓','苏秦','张仪']) 
alert('合并后新数组长度为: '+_moziNew.length+'. 其值为: '+_moziNew);

6 .$.unique(array)过滤数组中重复元素[不常用]
解释: 删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组.
第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复, 哈, 多完美, 但仔细一看, 仅限处理DOM元素. 功能8折了.所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它.
var _h2Arr=$.makeArray(h2obj); 
//将数组_h2Arr重复一次 
_h2Arr=$.merge(_h2Arr,_h2Arr); 
var _curLen=_h2Arr.length; 
_h2Arr=$.unique(_h2Arr); 
var _newLen=_h2Arr.length; 
alert('数组_h2Arr原长度值为: '+_curLen+' ,过滤后为: '+_newLen 
+' .共过滤 '+(_curLen-_newLen)+'个重复元素')

7. $.makeArray(obj) 将类数组对象转换为数组[不常用]
解释: 将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1.
这是个多余的方法, 无所不能的$本来就包含了这个功能. jQuery官网上解释的非常模糊. 其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象.
var _makeArr=$.makeArray(h2obj); 
alert('h2元素对象集合的数据类型转换为: '+_makeArr.constructor.name);//输出Array

8. $(dom).toArray()将所有DOM元素恢复成数组[不常用]
解释: 把jQuery集合中所有DOM元素恢复成一个数组;
并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.
var _toArr=$('h2').toArray(); 
alert('h2元素集合恢复后的数据类型是: '+_toArr.constructor.name);
Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
javascript 用函数实现继承详解
May 28 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
常用的几段javascript代码分享
Mar 25 #Javascript
捕获和分析JavaScript Error的方法
Mar 25 #Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 #Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 #Javascript
jquery动态更换设置背景图的方法
Mar 25 #Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 #Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 #Javascript
You might like
php&amp;java(二)
2006/10/09 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Python实现八大排序算法
2016/08/13 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
类和结构的区别
2012/08/15 面试题
汉语专业应届生求职信
2013/10/01 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
干部个人考察材料
2014/12/24 职场文书
实习单位指导教师评语
2014/12/30 职场文书
应收账款管理制度
2015/08/06 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
使用Django框架创建项目
2022/06/10 Python