JS的对象数组去重处理(二十)

简介: JS的对象数组去重处理(二十)

一. 对象数组的去重


如果数组中,存在的是普通的基本类型值,可看上一章的内容。 如果是对象数组,那么该如何处理呢? 主要是如何判断 两个对象是否相同呢? 在Java 中,需要重写 hashCode() 和equals() 来指明 当某些属性是一样的,就表示两个对象是相同的。 如User 实体类中, id 一致时,表示两个对象是一致的, 如果name,sex,age,description 均一致,那么这两个对象也可以是一致的。 这是程序判定是否相同的。 还有一种更简单的方法,将其toString() 转换成字符串,如果两个对象转换后的字符串是相同的,那么就说明这两个对象是相同的。 JS的判断是否对象相同,采用 toString() 转换成字符串后比较的方式。 转换成字符串时,需要将key 值 进行相应的排序,转换的是排序后的对象。 转换字符串用JSON.stringify(), 还原字符串用JSON.parse().


关于JSON的操作,可以参考老蝴蝶写的: JSON简介及前端简单解析(一)


二.对象数组去重方法


参考 jason_renyu 前辈的文章,这里非常感谢: https://blog.csdn.net/jason_renyu/article/details/79288932


所使用到的对象数据:


//有重复,有顺序不一致。
var arr= [
      {
        id: 1,
        name: '两个蝴蝶飞',
        sex:'男'
      },
      {
        id: 1,
        name: '两个蝴蝶飞',
        sex:'男',
        age:24
      },
      {
        id: 2,
        name: '两个蝴蝶飞',
        sex: '男'
      },
      {
        id:3,
        name: '精灵妹',
        sex:'女'
      },
      {
        id: 2,
        name: '两个蝴蝶飞',
        sex: '男'
      },
      {
        sex: '男',
        name: '两个蝴蝶飞',
        id: 2
      },
      {
        name: '精灵妹',
        id:3,
        sex: '女'
      },
      {
        name: '精灵妹',
        id:4,
        sex: '女'
      }
    ];
  console.log("去重之前的数组为:"+JSON.stringify(arr));
  var arr1=uniqueObject(arr);
  console.log("去重之后的数组为:"+JSON.stringify(arr1));


写相应的uniqueObject 的方法.


function uniqueObject(arr){
  //存放的是字符串形式的数组。
  var tempArr = [];
  //将数组对象转成数组字符串。
  var newStr =arrToString(arr);
  newStr.sort();
  //先放置第一个
  var temp=newStr[0];
  tempArr.push(temp);
  // 数组去重
  for(var i=1;i<newStr.length;i++){
    if(newStr[i]!==temp){
      temp=newStr[i];  //放置到集合里面。
      tempArr.push(newStr[i]);
    }
  }
  //上面,集合还是字符串形式的数组,需要转换成json对象的形式。
  var newArr = [];
  // 新数组字符串转成数组对象
  for(var i=0;i<tempArr.length;i++){
    newArr.push(JSON.parse(tempArr[i]));
  }
  return newArr;
}


转换成字符串数组 的arrToString 方法:


/**
 * 
 * @param arr 对象数组
 * @returns {Array} 转换成字符串的数组
 */
function arrToString(arr){
  var newArr = [];
  if(arr.length !== 0){
    for(var i=0;i<arr.length;i++){ //对每一个对象数据进行处理。
      //将每一个对象里面的属性key 进行重新排序,变成新的对象。
      var thisObj = sortObject(arr[i]);
      //将json对象,转换成字符串
      var thisStr = JSON.stringify(thisObj);
       // 去除空格及\t空白字符
      thisStr = thisStr.replace(/(\s|[\\t])/g,'');
      //里面放置字符串
      newArr.push(thisStr);
    }
  }
  return newArr;
}


将单个对象排序 key值的方法 sortObject


/**
 * 
 * @param obj 对象
 * @returns 将对象按照key值进行排序。
 */
function sortObject(obj){
  var keyArr = [];
  for(var item in obj){ //把所有的key放置在一个数组里面。
    keyArr.push(item);
  };
  keyArr.sort(); //排序,按照字符进行排序。
  var newObj = {}; //还是json对象
  for(var i=0;i<keyArr.length;i++){
    newObj[keyArr[i]] = obj[keyArr[i]] 
  }
  //处理成 键=值的数组形式。
  //console.log("值是:"+JSON.stringify(newObj));
  return newObj;
}


合并为一起运行为:


var arr= [
      {
        id: 1,
        name: '两个蝴蝶飞',
        sex:'男'
      },
      {
        id: 1,
        name: '两个蝴蝶飞',
        sex:'男',
        age:24
      },
      {
        id: 2,
        name: '两个蝴蝶飞',
        sex: '男'
      },
      {
        id:3,
        name: '精灵妹',
        sex:'女'
      },
      {
        id: 2,
        name: '两个蝴蝶飞',
        sex: '男'
      },
      {
        sex: '男',
        name: '两个蝴蝶飞',
        id: 2
      },
      {
        name: '精灵妹',
        id:3,
        sex: '女'
      },
      {
        name: '精灵妹',
        id:4,
        sex: '女'
      }
    ];
  console.log("去重之前的数组为:"+JSON.stringify(arr));
  var arr1=uniqueObject(arr);
  console.log("去重之后的数组为:"+JSON.stringify(arr1));
//对应的方法处理。
function uniqueObject(arr){
  //存放的是字符串形式的数组。
  var tempArr = [];
  //将数组对象转成数组字符串。
  var newStr =arrToString(arr);
  newStr.sort();
  //先放置第一个
  var temp=newStr[0];
  tempArr.push(temp);
  // 数组去重
  for(var i=1;i<newStr.length;i++){
    if(newStr[i]!==temp){
      temp=newStr[i];  //放置到集合里面。
      tempArr.push(newStr[i]);
    }
  }
  //上面,集合还是字符串形式的数组,需要转换成json对象的形式。
  var newArr = [];
  // 新数组字符串转成数组对象
  for(var i=0;i<tempArr.length;i++){
    newArr.push(JSON.parse(tempArr[i]));
  }
  return newArr;
}
/**
 * 
 * @param arr 对象数组
 * @returns {Array} 转换成字符串的数组
 */
function arrToString(arr){
  var newArr = [];
  if(arr.length !== 0){
    for(var i=0;i<arr.length;i++){ //对每一个对象数据进行处理。
      //将每一个对象里面的属性key 进行重新排序,变成新的对象。
      var thisObj = sortObject(arr[i]);
      //将json对象,转换成字符串
      var thisStr = JSON.stringify(thisObj);
       // 去除空格及\t空白字符
      thisStr = thisStr.replace(/(\s|[\\t])/g,'');
      //里面放置字符串
      newArr.push(thisStr);
    }
  }
  return newArr;
}
/**
 * 
 * @param obj 对象
 * @returns 将对象按照key值进行排序。
 */
function sortObject(obj){
  var keyArr = [];
  for(var item in obj){ //把所有的key放置在一个数组里面。
    keyArr.push(item);
  };
  keyArr.sort(); //排序,按照字符进行排序。
  var newObj = {}; //还是json对象
  for(var i=0;i<keyArr.length;i++){
    newObj[keyArr[i]] = obj[keyArr[i]] 
  }
  //处理成 键=值的数组形式。
  //console.log("值是:"+JSON.stringify(newObj));
  return newObj;
}


20190626191745627.png


可以正确的进行对象数组的去重。


三. 采用prototype 原型扩展的方式进行扩展后的形式


与上面差不多,直接写出来了。


var arr= [
      {
        id: 1,
        name: '两个蝴蝶飞',
        sex:'男'
      },
      {
        id: 1,
        name: '两个蝴蝶飞',
        sex:'男',
        age:24
      },
      {
        id: 2,
        name: '两个蝴蝶飞',
        sex: '男'
      },
      {
        id:3,
        name: '精灵妹',
        sex:'女'
      },
      {
        id: 2,
        name: '两个蝴蝶飞',
        sex: '男'
      },
      {
        sex: '男',
        name: '两个蝴蝶飞',
        id: 2
      },
      {
        name: '精灵妹',
        id:3,
        sex: '女'
      },
      {
        name: '精灵妹',
        id:4,
        sex: '女'
      }
    ];
  console.log("去重之前的数组为:"+JSON.stringify(arr));
  var arr1=arr.uniqueObject(); //去重对象。
  console.log("去重之后的数组为:"+JSON.stringify(arr1));
Array.prototype.uniqueObject=function(){
  //存放的是字符串形式的数组。
  var tempArr = [];
  //将数组对象转成数组字符串。
  var newStr =this.arrToString();
  newStr.sort();
  //先放置第一个
  var temp=newStr[0];
  tempArr.push(temp);
  // 数组去重
  for(var i=1;i<newStr.length;i++){
    if(newStr[i]!==temp){
      temp=newStr[i];  //放置到集合里面。
      tempArr.push(newStr[i]);
    }
  }
  //上面,集合还是字符串形式的数组,需要转换成json对象的形式。
  var newArr = [];
  // 新数组字符串转成数组对象
  for(var i=0;i<tempArr.length;i++){
    newArr.push(JSON.parse(tempArr[i]));
  }
  return newArr;
}
Array.prototype.arrToString=function(){
  var newArr = [];
  if(this.length !== 0){
    for(var i=0;i<this.length;i++){ //对每一个对象数据进行处理。
      //将每一个对象里面的属性key 进行重新排序,变成新的对象。
      var thisObj = this[i].sortObject();
      //将json对象,转换成字符串
      var thisStr = JSON.stringify(thisObj);
       // 去除空格及\t空白字符
      thisStr = thisStr.replace(/(\s|[\\t])/g,'');
      //里面放置字符串
      newArr.push(thisStr);
    }
  }
  return newArr;
}
//是Object 对象的扩展
Object.prototype.sortObject=function(){
  var keyArr = [];
  for(var item in this){ //把所有的key放置在一个数组里面。
    keyArr.push(item);
  };
  keyArr.sort(); //排序,按照字符进行排序。
  var newObj = {}; //还是json对象
  for(var i=0;i<keyArr.length;i++){
    newObj[keyArr[i]] = this[keyArr[i]] 
  }
  //处理成 键=值的数组形式。
  return newObj;
}


方法名可能与JavaScript 本身提供的方法名相同,可以将方法名自定义改变 即可。 为了描述性强,这里暂时没有更改。


谢谢!!!

相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
18 1
JavaScript中对象的数据拷贝
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
47 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
49 1
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
21 2
|
2月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
34 2
|
2月前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
116 0
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
35 0