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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
一个简单的js树形菜单
Dec 09 Javascript
js异常捕获方法介绍
Apr 10 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
js实现自动锁屏功能
Jun 02 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 字符串 小常识
2009/06/05 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
bootstrap网格系统使用方法解析
2017/01/13 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python中的编码知识整理汇总
2016/01/26 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python字符串反转的四种方法详解
2019/12/02 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物