如何在JavaScript中查找数组内对象的重复属性值并实现去重返回？

嘿，这个需求在日常开发里挺常见的，我给你分享几种实用的解决方案，适合不同场景：

方法一：利用Set + filter（性能最优） #

这种方法借助Set的O(1)查找特性，处理大数据量时效率很高，而且代码简洁：

const array = [{ a:"cat"}, { a:"dog"}, { a:"dog"},{ a:"dog"}];
// 用Set记录已经出现过的属性值
const seenValues = new Set();
// 过滤数组，只保留首次出现的元素
const uniqueArray = array.filter(item => {
  if (!seenValues.has(item.a)) {
    seenValues.add(item.a);
    return true;
  }
  return false;
});

console.log(uniqueArray); // 输出: [{ a: "cat" }, { a: "dog" }]

原理很简单：遍历数组时，先检查当前元素的a值是否已经在Set里，没出现过就把它加入Set并保留这个元素，已经出现过的直接过滤掉。

方法二：利用reduce方法 #

如果你更喜欢用数组的reduce方法来做累加处理，也可以这样写：

const array = [{ a:"cat"}, { a:"dog"}, { a:"dog"},{ a:"dog"}];
const uniqueArray = array.reduce((accumulator, current) => {
  // 检查累加器里是否已经存在相同a值的元素
  const isDuplicate = accumulator.some(item => item.a === current.a);
  if (!isDuplicate) {
    accumulator.push(current);
  }
  return accumulator;
}, []);

console.log(uniqueArray); // 同样得到去重后的数组

不过要注意：some方法每次都会遍历累加器数组，当原数组很大时，性能会比Set方法差一些，适合小数据量的场景。

方法三：封装成通用函数（灵活复用） #

如果以后你需要对不同属性做去重，可以把逻辑封装成一个通用函数，这样复用起来更方便：

/**
 * 根据指定属性对对象数组去重
 * @param {Array} arr - 要处理的数组
 * @param {String} prop - 用来判断重复的属性名
 * @returns {Array} 去重后的数组
 */
function uniqueByProperty(arr, prop) {
  const seen = new Set();
  return arr.filter(item => {
    const value = item[prop];
    if (!seen.has(value)) {
      seen.add(value);
      return true;
    }
    return false;
  });
}

// 使用示例
const array = [{ a:"cat"}, { a:"dog"}, { a:"dog"},{ a:"dog"}];
const uniqueArray = uniqueByProperty(array, 'a');
console.log(uniqueArray);

以后要对b属性去重，直接调用uniqueByProperty(arr, 'b')就行，非常灵活。

额外场景：只需要去重后的属性值 #

如果你不需要保留原对象，只需要a属性的去重值集合，可以更简单：

const array = [{ a:"cat"}, { a:"dog"}, { a:"dog"},{ a:"dog"}];
const uniqueValues = [...new Set(array.map(item => item.a))];

console.log(uniqueValues); // 输出: ["cat", "dog"]

直接用map提取所有a值，再通过Set去重，最后扩展成数组就行。

这些方法应该能覆盖你大部分的需求啦，根据实际场景选最合适的就行～

内容的提问来源于stack exchange，提问作者Afra