Jquery 数组操作大全个人总结


Posted in Javascript onNovember 13, 2013

jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对jQuery数组做个总结.温故,知新.
强烈建议你打开DEMO演示后再看下面的详解: 点此查看DEMO

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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
JavaScript 动态生成方法的例子
Jul 22 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
Jquery $when done then的用法详解
May 20 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 #Javascript
js 判断上传文件大小及格式代码
Nov 13 #Javascript
php跨域调用json的例子
Nov 13 #Javascript
JQuery文字列表向上滚动的代码
Nov 13 #Javascript
浅析Javascript使用include/require
Nov 13 #Javascript
js将字符串转成正则表达式的实现方法
Nov 13 #Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
vue v-model动态生成详解
2018/06/30 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Pytorch中.new()的作用详解
2020/02/18 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
银行委托书范本
2014/04/04 职场文书
求职自我推荐信
2015/03/24 职场文书
python之django路由和视图案例教程
2021/07/26 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
vue的项目如何打包上线
2022/04/13 Vue.js