jQuery数组处理代码详解(含实例演示)


Posted in Javascript onFebruary 03, 2012

演示所用数组

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤'];

1. $.each遍历示例[常用]

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

2. $.grep()过滤数组[常用]

$.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()按给定条件转换数组[一般]

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()判断值是否存在于数组中[常用]
 

var _exist=$.inArray('墨子',_mozi); 
var _inexistence=$.inArray('卫鞅',_mozi) 
if(_exist>=0){ 
alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist); 
} 
if(_inexistence<0){ 
alert('卫鞅 不存在于数组_mozi中!,返回值为: '+_inexistence+'!'); 
}

5. $.merge()合并两个数组[一般]

//原生concat()可能比它还简洁点 
_moziNew=$.merge(_mozi,['鬼谷子','商鞅','孙膑','庞涓','苏秦','张仪']) 
alert('合并后新数组长度为: '+_moziNew.length+'. 其值为: '+_moziNew);

6. $.unique()过滤数组中重复元素[不常用]

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()类数组对象转换为数组[不常用]

var _makeArr=$.makeArray(h2obj); 
alert('h2元素对象集合的数据类型转换为: '+_makeArr.constructor.name);

8. $.toArray()将所有DOM元素恢复成数组[不常用]

var _toArr=$('h2').toArray(); 
alert('h2元素集合恢复后的数据类型是: '+_toArr.constructor.name);
Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
Sort()函数的多种用法
Mar 20 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 #Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 #Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 #Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 #Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 #Javascript
You might like
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
详解vue axios中文文档
2017/09/12 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python中append实例用法总结
2019/07/30 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
受资助学生感谢信
2015/01/21 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
无线电通信名词解释
2022/02/18 无线电