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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
隐性调用php程序的方法
2009/03/09 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
JSON格式化输出
2014/11/10 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Python socket模块方法实现详解
2019/11/05 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python unichr函数知识点总结
2020/12/16 Python
家长给孩子的评语
2014/01/30 职场文书
致200米运动员广播稿
2014/02/06 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
好学生评语大全
2014/05/05 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis