jquery基础教程之数组使用详解


Posted in Javascript onMarch 10, 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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
查询json的数据结构的8种方式简介
Mar 10 #Javascript
js 3秒后跳转页面的实现代码
Mar 10 #Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 #Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 #Javascript
使用js操作css实现js改变背景图片示例
Mar 10 #Javascript
红米手机抢购的js代码
Mar 10 #Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 #Javascript
You might like
php数组总结篇(一)
2008/09/30 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
python实现批量监控网站
2016/09/09 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android