jquery数组封装使用方法分享(jquery数组遍历)


Posted in Javascript onMarch 25, 2014

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

不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略.

each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例:

使用方法如下:

var arr = ['javascript', 'php', 'java', 'c++', 'c#', 'perl', 'vb', 'html', 'css', 'objective-c'];
$.each(arr, function(key, val) {
 // firebug console
 console.log('index in arr:' + key + ", corresponding value:" + val);
 // 如果想退出循环
 // return false;
});

再来个测试程序:
[/code]
 var fruit = ['苹果','香蕉','橙子','哈密瓜','芒果'];
 //用原生getElementsByTagName获取h2元素的对象集合
 var h2obj=document.getElementsByTagName('h2');

 //$.each()遍历数组
 $('input#js_each').click(function(){
  $.each(fruit,function(key,val){
   //回调函数有两个参数,第一个是元素索引,第二个为当前值
   alert('fruit数组中,索引:'+key+'对应的值为:'+val);
  });
 });

[/code]
相对于原生的for..in,each更强壮一点. for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取;

$.grep(array, callback, [invert])过滤

使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回 true 以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);

v[code]ar temp = [];
temp = $.grep(arr, function(val, key) {
 if(val.indexOf('c') != -1) 
  return true;
 // 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素
 // 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素
}, false);
console.dir(temp);

再来个测试程序:

 //$.grep()过滤数组
 $('input#js_grep').click(function(){
  $.grep(fruit,function(val,key){
   //过滤函数有两个参数,第一个为当前元素,第二个为元素索引
   if(val=='芒果'){
    alert('数组值为 芒果 的下标是: '+key);
   }
  });  var _moziGt1=$.grep(fruit,function(val,key){
   return key>1;
  });
  alert('fruit数组中索引值大于1的元素为: '+_moziGt1);
  var _moziLt1=$.grep(fruit,function(val,key){
   return key>1;
  },true);
  //此处传入了第三个可靠参数,对过滤函数中的返回值取反
  alert('fruit数组中索引值小于等于1的元素为: '+_moziLt1);
 });

$.map(array,[callback])按给定条件转换数组

作为参数的转换函数会为每个数组元素调用, 而且会给这个转换函数传递一个表示被转换的元素作为参数. 转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组, 并扩展至原始数组中.这个是个很强大的方法,但并不常用. 它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素.

//1.6之前的版本只支持数组
temp = $.map(arr, function(val, key) {
 //返回null,返回的数组长度减1
 if(val === 'vb') return null;
 return val;
});
console.dir(temp);
//1.6开始支持json格式的object
var obj = {key1: 'val1', key2: 'val2', key3: 'val3'};
temp = $.map(obj, function(val, key) {
 return val;
});
console.dir(temp);

再来个测试程序:

 //$.map()按给定条件转换数组
 $('input#js_map').click(function(){
  var _mapArrA=$.map(fruit,function(val){
   return val+'[新加]';
  });
  var _mapArrB=$.map(fruit,function(val){
   return val=='苹果' ? '[只给苹果加]'+val : val;
  });
  var _mapArrC=$.map(fruit,function(val){
   //为数组元素扩展一个新元素
   return [val,(val+'[扩展]')];
  });
  alert('在每个元素后面加\'[新加]\'字符后的数组为: '+ _mapArrA);
  alert('只给元素 苹果 添加字符后的数组为: '+ _mapArrB);
  alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '+_mapArrC);
 });

$.inArray(val,array)判断值是否存在于数组中

确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 ).记得indexOf()方法了吗? indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1.现在, 知道怎么用了吧. 有了它, 判断某个值是否存在于数组中,就变得轻而易举了.

//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素
console.log($.inArray('javascript', arr));

测试程序:
[code]
 //$.inArray判断值是否在数组中,不存在返回-1,存在则返回对应索引值
 $('input#js_inarray').click(function(){
  var _exist=$.inArray('芒果',fruit);
  var _inexistence=$.inArray('榴莲',fruit)
  if(_exist>=0){
   alert('芒果 存在于数组fruit中,其在数组中索引值是: '+_exist);
  }
  if(_inexistence< 0){
   alert('榴莲 不存在于数组fruit中!,返回值为: '+_inexistence+'!');
  }
 });

$.merge(first,second)合并两个数组

返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素. 这个方法是用jQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组.

var frontEnd = ['javascript', 'css', 'html'],
   backEnd = ['java', 'php', 'c++'];
// 这种方式会修改第一个参数, 即frontEnd数组
temp = $.merge(frontEnd, backEnd);
console.dir(temp);
console.dir(frontEnd);
// 可以用下面的方式来避免对原数组的影响
// $.merge($.merge([], frontEnd), backEnd);

测试程序

 //$.merge()合并两个数组
 $('input#js_merge').click(function(){
  //原生concat()可能比它还简洁点
  fruitNew=$.merge(fruit,['水蜜桃','火龙果','西瓜','杨桃','荔枝','龙眼'])
  alert('合并后新数组长度为: '+fruitNew.length+'. 其值为: '+fruitNew);
 });

$.unique(array)过滤数组中重复元素

删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组.第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复, 哈, 多完美, 但仔细一看, 仅限处理DOM元素. 功能8折了.所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它.

<div>blahblahblah....</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
// $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)
// 获得原始的DOM数组,而不是jQuery封装的
var divs = $('div').get(); 
// 增加几个class为dup的div
divs = divs.concat($('div.dup').get()); 
console.log("before unique:" + divs.length);
divs = $.unique(divs);
console.log("after unique:" + divs.length);

测试程序:

 //$.unique()过滤数组中重复元素(仅限DOM元素数组)
 $('input#js_unique').click(function(){
  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)+'个重复元素');
 });

$.makeArray(obj) 将类数组对象转换为数组

将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1.这是个多余的方法, 无所不能的$本来就包含了这个功能. jQuery官网上解释的非常模糊. 其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象.

首先什么是类数组对象?jQuery官网上用divs = getElementsByTag('div')来做例子,这个divs有类似数组的一些方法比如length,通过[index]方式获取元素等,然后通过$.makeArray(divs)使它转为数组,就可以用数组的其他功能,比如reverse(), pop()等。

 //$.makeArr()类数组转换
 $('input#js_makearray').click(function(){
  var _makeArr=$.makeArray(h2obj);
  alert('h2元素对象集合的数据类型转换为: '+_makeArr.constructor.name);
 });

$(dom).toArray()将所有DOM元素恢复成数组

把jQuery集合中所有DOM元素恢复成一个数组;并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.

 //$(dom).toArray()将所有DOM元素恢复成数组
 $('input#js_toarray').click(function(){
  var _toArr=$('h2').toArray();
  alert('h2元素集合恢复后的数据类型是: '+_toArr.constructor.name);
Javascript 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
jquery默认校验规则整理
Mar 24 #Javascript
Javascript连接多个数组不用concat来解决
Mar 24 #Javascript
jqeury-easyui-layout问题解决方法
Mar 24 #Javascript
让table变成exls的示例代码
Mar 24 #Javascript
You might like
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
javascript获取元素的计算样式
2019/05/24 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
2014年优秀班主任工作总结
2014/12/16 职场文书
校长师德表现自我评价
2015/03/04 职场文书
写给女朋友的保证书
2015/05/09 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
雨中的树观后感
2015/06/03 职场文书