js 去重对象数组|极客笔记

js 去重对象数组

在前端开发中，我们经常需要处理各种数据，其中最常见的就是对象数组。对象数组是一个包含多个对象的数组，每个对象都有不同的属性和值。在实际开发中，我们经常需要对对象数组进行去重操作，即去除重复的对象，使数组中的对象保持唯一性。本文将详细介绍如何使用JavaScript去重对象数组。

为什么要去重对象数组

在实际开发中，我们经常会遇到需要处理大量数据的情况，而有些数据可能会出现重复的情况。对于一个对象数组来说，如果数组中存在多个拥有相同属性值的对象，这些对象就被认为是重复的。去重对象数组可以帮助我们简化数据结构，减少冗余信息，提高数据处理效率。

常见的去重方法

方法一：利用Set数据结构

Set数据结构是ES6新增的数据结构，它类似于数组，但成员的值都是唯一的。我们可以利用Set的特性来去重对象数组。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
];

const uniqueArr = Array.from(new Set(arr.map(JSON.stringify))).map(JSON.parse);

console.log(uniqueArr);

运行结果：

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]

方法二：利用reduce方法

我们也可以利用数组的reduce方法来去重对象数组。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
];

const uniqueArr = arr.reduce((acc, current) => {
  const x = acc.find(item => item.id === current.id);
  if (!x) {
    return acc.concat([current]);
  } else {
    return acc;
  }
}, []);

console.log(uniqueArr);

运行结果：

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]

方法三：利用Map数据结构

我们也可以利用Map数据结构来去重对象数组。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
];

const uniqueArr = Array.from(new Map(arr.map(obj => [obj.id, obj])).values());

console.log(uniqueArr);

运行结果：

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]

结语

通过本文的介绍，我们了解了如何使用JavaScript去重对象数组。无论是利用Set、reduce方法还是Map数据结构，都可以轻松实现对象数组的去重操作。在实际开发中，根据具体情况选择合适的方法去去重，可以提高代码效率，让数据操作更加简洁高效。

js 去重对象数组