js常用方法2

对象数组去重的几种方式

1. 使用 reduce() 结合 Set 或对象

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

const uniqueArr = arr.reduce((acc, item) => {
    if (!acc.some(i => i.id === item.id)) {
        acc.push(item);
    }
    return acc;
}, []);

console.log(uniqueArr);
// 输出：
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' }
// ]

解释：

• reduce 方法遍历数组并将每个符合条件的元素推入一个新数组。
• 使用 some() 检查是否已经存在具有相同 id 的对象。
• 该方法可以根据需要进行定制，不仅限于 id 属性。

2. filter 和 findIndex

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
    ))
);

console.log(uniqueArr);
// 输出：
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' }
// ]

解释：

• findIndex 方法查找当前对象在数组中的第一个位置，如果当前对象是数组中第一次出现，则返回 true，保留该对象。
• 如果当前对象已经出现过，findIndex 返回的索引与当前索引不同，则过滤掉该对象。

3. 通过 map() 或 reduce() 和 Set 来实现基于某个属性（如 id 或 name）的去重。

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

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

console.log(uniqueArr);
// 输出：
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' }
// ]

解释：

• arr.map(item => [item.id, item]) 创建了一个 [key, value] 的数组，key 是对象的 id，value 是对象本身。
• new Map() 会自动去重，键值对中的 key 是唯一的，因此相同 id 的对象会被去重。
• 使用 values() 获取去重后的对象。