利用jQuery操作对象数组的实现代码


Posted in Javascript onApril 27, 2011

jQuery对于数组元素操作主要提供了以下工具:
(1)数组和对象的例遍:jQuery.each(obj,callback)
通用例遍方法,可用于例遍对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
(2)数组元素的过滤:jQuery.grep(array,callback,[invert])
使用过滤函数过滤数组元素。此函数至少传递两个参数:待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
(3)数组元素的查找:jQuery.inArray(value,array)
确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。
(4)删除重复元素:jQuery.unique(array)
删除数组中重复元素。
下面的实例通过对象数组的过滤来实现获取或者删除指定属性为指定值的数组元素。

<script src="js/jquery.js" ></script> 
<script> 
/** 
* 从对象数组中删除属性为objPropery,值为objValue元素的对象 
* @param Array arrPerson 数组对象 
* @param String objPropery 对象的属性 
* @param String objPropery 对象的值 
* @return Array 过滤后数组 
*/ 
function remove(arrPerson,objPropery,objValue) 
{ 
return $.grep(arrPerson, function(cur,i){ 
return cur[objPropery]!=objValue; 
}); 
} 
/** 
* 从对象数组中获取属性为objPropery,值为objValue元素的对象 
* @param Array arrPerson 数组对象 
* @param String objPropery 对象的属性 
* @param String objPropery 对象的值 
* @return Array 过滤后的数组 
*/ 
function get(arrPerson,objPropery,objValue) 
{ 
return $.grep(arrPerson, function(cur,i){ 
return cur[objPropery]==objValue; 
}); 
} 
/** 
* 显示对象数组信息 
* @param String info 提示信息 
* @param Array arrPerson 对象数组 
*/ 
function showPersonInfo(info,arrPerson) 
{ 
$.each(arrPerson, function(index,callback){ 
info+="Person id:" + arrPerson[index].id + " name:" + arrPerson[index].name+ " sex:"+ arrPerson[index].sex+" age:"+ arrPerson[index].age+"\r\t"; 
}); 
alert(info); 
} 
//测试数据 
var arrPerson=new Array(); 
var person=new Object(); 
person.id=1; 
person.name="帅哥"; 
person.sex="男"; 
person.age=30; 
arrPerson.push(person); 
person=new Object(); 
person.id=2; 
person.name="美眉甲"; 
person.sex="女"; 
person.age=28; 
arrPerson.push(person); 
person=new Object(); 
person.id=3; 
person.name="美眉乙"; 
person.sex="女"; 
person.age=20; 
arrPerson.push(person); 
//测试删除 
showPersonInfo("原始数组:\r\t",arrPerson); 
arrPerson=remove(arrPerson,"id",1); 
showPersonInfo("删除之后:\r\t",arrPerson); 
//测试获取 
arrPerson=get(arrPerson,"id",3); 
showPersonInfo("只获取ID为3的元素:\r\t",arrPerson); 
</script>
Javascript 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 #Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 #Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 #Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 #Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 #Javascript
javascript中的继承实例代码
Apr 27 #Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 #Javascript
You might like
php PDO中文乱码解决办法
2009/07/20 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
javascript 实现map集合
2015/04/03 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python代码过长的换行方法
2018/07/19 Python
详解python数据结构和算法
2019/04/18 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
PHP面试题-$message和$$message的区别
2015/12/08 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
大学社团计划书
2014/05/01 职场文书
超市促销活动总结
2014/07/01 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
小学教师教学随笔
2015/08/14 职场文书