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 本身提供的方法名相同,可以将方法名自定义改变 即可。 为了描述性强,这里暂时没有更改。


谢谢!!!

相关文章
|
2天前
|
Web App开发 JSON JavaScript
JavaScript对象常用操作JSON总结
JavaScript对象常用操作JSON总结
16 8
|
1天前
|
存储 JavaScript 前端开发
JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)
【6月更文挑战第25天】JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)。
8 2
|
1天前
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素。基本语法是`v-for=&quot;(item, index) in items&quot;`,支持遍历对象的键值对。注意与`v-if`同用时应使用`&lt;template&gt;`,组件上使用`v-for`需设`key`属性以优化性能。
10 2
|
5天前
|
存储 JavaScript 前端开发
第六篇-Javascript对象
第六篇-Javascript对象
10 2
|
7天前
|
JavaScript
js 判断对象内所有值为空
js 判断对象内所有值为空
|
22小时前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
22小时前
|
JavaScript 前端开发 Java
遨游 JavaScript 对象星际:探索面向对象编程的深邃世界
遨游 JavaScript 对象星际:探索面向对象编程的深邃世界
|
23小时前
|
前端开发 JavaScript 算法
JavaScript 中的数学与时光魔法:Math与Date对象大揭秘
JavaScript 中的数学与时光魔法:Math与Date对象大揭秘
|
5天前
|
JavaScript 前端开发
JS如何判断一个对象是否为数组?
JS如何判断一个对象是否为数组?
10 0
|
5天前
|
JavaScript 前端开发
JS遍历数组和对象的常用方法有哪些?
JS遍历数组和对象的常用方法有哪些?
8 0