JavaScript实现Object数组去重的方法示例

作者:函数茶馆时间:2026-10-22 20:50:31浏览:524

本文介绍了一种在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对上述代码进行测试,运行结果如下图所示:

JavaScript Object数组去重实现

此外,这里再推荐几款相关的实用工具供你参考使用:

在线去除重复项工具: http://tools.jb51.net/code/quchong

在线文本去重复工具: http://tools.jb51.net/aideddesign/txt_quchong

更多关于JavaScript技术内容,可查看本站相关专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》。

希望本文所述的JavaScript编程技巧能对你有所帮助。

作者最新文章