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 相关文章推荐
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Django继承自带user表并重写的例子
2019/11/18 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
简历中自我评价分享
2013/10/09 职场文书
制作部班长职位说明书
2014/02/26 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers