JS实现的Object数组去重功能示例【数组成员为Object对象】


Posted in Javascript onFebruary 01, 2019

本文实例讲述了JS实现的Object数组去重功能。分享给大家供大家参考,具体如下:

目标:实现成员为 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':'3water.com'},{'name':'3water.com'},{'age':10},{'age':12}];
console.log(distinct_arr_element(arrDemo))
</script>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JS实现的Object数组去重功能示例【数组成员为Object对象】

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
原生js实现简单轮播图
Oct 26 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 #Javascript
Electron 如何调用本地模块的方法
Feb 01 #Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 #Javascript
原来JS还可以这样拆箱转换详解
Feb 01 #Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 #Javascript
微信小程序常用简易小函数总结
Feb 01 #Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
php 操作符与控制结构
2012/03/07 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
微信小程序如何自定义table组件
2019/06/29 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python函数形参用法实例分析
2015/08/04 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python实现统计代码行数的小工具
2019/09/19 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
施工安全责任书范本
2014/07/24 职场文书
个人更名证明
2015/06/23 职场文书
小学英语教学随笔
2015/08/14 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers