利用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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 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单态设计模式(单例模式)实例
2014/11/18 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python web基础之加载静态文件实例
2018/03/20 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python实现滑雪者小游戏
2020/02/22 Python
python实现银行实战系统
2020/02/26 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
土建资料员岗位职责
2014/01/04 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
广告创意求职信
2014/03/17 职场文书
高级工程师英文求职信
2014/03/19 职场文书
前台文员岗位职责
2015/02/04 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书