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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
vue+moment实现倒计时效果
Aug 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中文分词的简单实现代码分享
2011/07/17 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
python字典的常用操作方法小结
2016/05/16 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
使用Python生成XML的方法实例
2017/03/21 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
Python3标准库总结
2019/02/19 Python
python简单区块链模拟详解
2019/07/03 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
浪漫婚礼主持词
2014/03/14 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
采购员工作总结范文
2015/08/12 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书