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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
写一个Vue loading 插件
Nov 09 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
php简单静态页生成过程
2008/03/27 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
详解JavaScript函数
2015/12/01 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
javascript实现下雨效果
2017/03/27 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
python执行精确的小数计算方法
2019/01/21 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python中必要的名词解释
2019/11/20 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python3 xpath和requests应用详解
2020/03/06 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
Linux常见面试题
2016/10/04 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
编辑硕士自荐信范文
2013/11/27 职场文书
求职信需要的五点内容
2014/02/01 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS