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 相关文章推荐
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
微信小程序实现日历效果
Dec 28 Javascript
js动态生成表格(节点操作)
Jan 12 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
nodejs集成sqlite使用示例
2017/06/05 NodeJs
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python 实现登录网页的操作方法
2018/05/11 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
《四季》教学反思
2014/04/08 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
停发工资证明范本
2015/06/12 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python