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

js 数组对象去重方法

在JavaScript中，我们经常需要处理数组对象，其中有时候会出现重复的对象。为了避免重复的数据导致混乱，我们需要对数组对象进行去重操作。本文将详细介绍几种常用的 JavaScript 数组对象去重方法，帮助你更好地处理数组对象中的重复数据。

方法一：使用 ES6 Set

ES6引入了Set数据结构，Set对象允许你存储任何类型的唯一值，无论是原始值或者对象引用。通过将数组对象转换成Set对象，然后再将Set对象转换回数组，即可实现去重操作。

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

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

console.log(uniqueArr);

运行结果：

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

方法二：使用 filter 方法

利用数组的filter方法结合indexOf函数，可以快速实现数组对象的去重。具体思路是遍历数组对象，对每个元素使用indexOf函数检查是否已存在于新数组中，如果不存在则添加到新数组中。

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

const uniqueArr = arr.filter((value, index, self) =>
  index === self.findIndex((t) => (
    t.id === value.id && t.name === value.name
  ))
);

console.log(uniqueArr);

运行结果：

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

方法三：使用 reduce 方法

另一种去重方法是利用数组的reduce方法，对数组对象进行遍历并逐个添加到新数组中，只有当新数组中不存在相同元素时才添加。这种方法比filter方法稍微复杂一些，但是效果一样。

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

const uniqueArr = arr.reduce((acc, cur) => {
  const hasElement = acc.find((t) => t.id === cur.id && t.name === cur.name);
  if (!hasElement) {
    acc.push(cur);
  }
  return acc;
}, []);

console.log(uniqueArr);

运行结果：

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

方法四：使用 Map 数据结构

Map对象是一种简单的键/值对集合，能够存储不重复的键。利用Map对象的特性，我们可以通过遍历数组对象，将对象的某个属性作为键，只保留首次出现的对象。

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

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

console.log(uniqueArr);

运行结果：

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

方法五：使用 lodash 库

如果你不愿意自己实现去重的逻辑，也可以使用著名的 lodash 库提供的 uniqBy 方法来简化操作。uniqBy 方法接受一个数组和一个迭代器函数，根据迭代器函数对数组元素进行处理并去重。

const _ = require('lodash');

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

const uniqueArr = _.uniqBy(arr, item => item.id);

console.log(uniqueArr);

运行结果：

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

总结

本文介绍了五种常用的 JavaScript 数组对象去重方法，包括使用 ES6 Set、filter 方法、reduce 方法、Map 数据结构以及 lodash 库中的 uniqBy 方法。每种方法都有其特点和适用场景，具体选择取决于你的需求和代码风格。

js 数组对象去重方法