利用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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
实例详解带参数的 npm script
May 28 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vue实现弹幕功能
2019/10/25 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python实现自动更换ip的方法
2015/05/05 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
个人评价范文分享
2014/01/11 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
顶岗实习协议书
2015/01/29 职场文书
运动会通讯稿100字
2015/07/20 职场文书