JavaScript实现Object数组去重的方法示例
本文介绍了一种在JavaScript中对成员为Object对象的数组进行去重的实现方法。通过遍历数组并利用自定义的对象值比较函数,逐一检查元素是否已存在于结果集中,从而构建一个不含重复对象的新数组。文中提供了完整的函数定义及测试示例,适用于需要处理复杂对象数据去重的场景。
JavaScript Object数组去重实现
本文分享一个使用JavaScript实现数组去重的具体案例,供读者参考学习。
核心目标是实现针对包含Object类型成员的数组进行去重操作。
需要特别注意的是,此处处理的数组元素为Object对象,而非简单的数值或字符串类型。
具体的调用方式如下所示。
arr = distinct_arr_element(arr);
核心去重函数定义如下。
/*
* 在数组中去除重复项()
*/
var distinct_arr_element = function( arr ){
if( !arr ) return null ;
var resultArr = [];
$(arr).each( function( index, el ){
var notExist = true ;
$(resultArr).each( function(i,element){
if( isObjectValueEqual( el, element ) ){
notExist = false ;
return false ;
}
});
if( notExist )
resultArr.push( el );
});
return resultArr ;
}
/*
* 判断两个 Object 的值是否相等
*/
function isObjectValueEqual(a, b) {
// Of course, we can do it use for in Create arrays of property names
var aProps = Object.getOwnPropertyNames(a);
var bProps = Object.getOwnPropertyNames(b);
// If number of properties is different, objects are not equivalent
if (aProps.length != bProps.length) {
return false;
}
for ( var i = 0; i < aProps.length; i++ ) {
var propName = aProps[i];
// If values of same property are not equal, objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
}
// If we made it this far, objects are considered equivalent
return true;
}
完整的测试代码示例如下。
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
/*
* 在数组中去除重复项()
*/
var distinct_arr_element = function( arr ){
if( !arr ) return null ;
var resultArr = [];
$(arr).each( function( index, el ){
var notExist = true ;
$(resultArr).each( function(i,element){
if( isObjectValueEqual( el, element ) ){
notExist = false ;
return false ;
}
});
if( notExist )
resultArr.push( el );
});
return resultArr ;
}
/*
* 判断两个 Object 的值是否相等
*/
function isObjectValueEqual(a, b) {
// Of course, we can do it use for in Create arrays of property names
var aProps = Object.getOwnPropertyNames(a);
var bProps = Object.getOwnPropertyNames(b);
// If number of properties is different, objects are not equivalent
if (aProps.length != bProps.length) {
return false;
}
for ( var i = 0; i < aProps.length; i++ ) {
var propName = aProps[i];
// If values of same property are not equal, objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
}
// If we made it this far, objects are considered equivalent
return true;
}
var arrDemo=[{'name':'jb51.net'},{'name':'jb51.net'},{'age':10},{'age':12}];
console.log(distinct_arr_element(arrDemo))
</script>
你可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun对上述代码进行测试,运行结果如下图所示:

此外,这里再推荐几款相关的实用工具供你参考使用:
在线去除重复项工具: http://tools.jb51.net/code/quchong
在线文本去重复工具: http://tools.jb51.net/aideddesign/txt_quchong
更多关于JavaScript技术内容,可查看本站相关专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》。
希望本文所述的JavaScript编程技巧能对你有所帮助。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
