数组去重,数组中对象去重,根据数组中对象的某个属性去重

原创已于 2023-03-13 14:14:13 修改 · 6.2k 阅读

49 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

ES6

于 2020-10-13 16:53:32 首次发布

本文介绍了如何在JavaScript中对普通数组和对象数组进行去重。对于普通数组，可以使用new Set、filter+indexOf以及reduce方法；对于对象数组，提供了通过序列化对象和reduce去重两种策略，确保在不改变原有数据结构的基础上有效去除重复元素。

数组去重

一、普通数组去重：`三种`方法可实现：① `new Set` 或 ② `fileter + indexOf` 或 ③ `reduce`

// 普通数组重复
let arr = [1,1,3,2,2,4,5,6,6,1,7];

new Set(arr);
arr.filter((item,index) => arr.indexOf(item) === index);
arr.reduce((unique,item)=> unique.includes(item) ? unique : [...unique,item],[]);

在这里插入图片描述

补充：在简单数组中，找出`重复`的数据项，使用 `indexOf`和`lastIndexOf`。

const arr = [1,1,3,2,2,4,5,6,6,1,7];
const repeatList = arr.filter((item, i) => arr.indexOf(item) !== arr.lastIndexOf(item) && arr.indexOf(item) === i);
console.log(repeatList); // [1,2,6];

二、对象数组去重：ES6的`set`数据结构去除数组对象中的`重复对象` -（完全相同的对象）

思路：①序列化对象为字符串，然后②使用new Set结构去重，最后③再反序列化为对象。

// 包含：完全相同的对象
let arr = [
   { name: '张三',  age: 18 },
   { name: '张三',  age: 18 },
   { name: '李四',  age: 20 }
 ];

let noRepeat = [...new Set(arr.map(item => JSON.stringify(item)))];
let newArr = noRepeat.map(item=> JSON.parse(item));
console.log(newArr);

在这里插入图片描述

三、对象数组去重：`reduce`去除数组对象中的某个`重复属性`的对象 -（某一属性相同的不同对象）

步骤：① 定义按照过滤的对象的属性名称；② 使用 reduce + some 数组属性对象去重

// 包含：某一属性相同的不同对象
const arr = [
   { id:1, name:'张三' },
   { id:1, name:'李四' },
   { id:2, name:'张三' },
];

const id = 'id'; // 1、定义按照过滤的对象的属性名称
const newArr = arr.reduce((all,next)=>all.some((item)=>item[id]==next[id])?all:[...all,next],[]); // 2、数组属性对象 去重
console.log(newArr);