如何在JavaScript中从对象数组提取属性并生成去重的新对象数组？

这里提供两种简单的JavaScript实现方式：

方法一：利用Set快速去重 #

Set天然具备去重特性，配合map可以高效完成需求：

let cars = [
  {
    "color": "purple",
    "info":{
      "name": 'new name'
    }
  },
  {
    "color": "red",
     "info":{
      "name": 'new name 1'
    }
  },
  {
    "color": "red",
     "info":{
      "name": 'new name 1'
    }
  },
  {
    "color": "red",
     "info":{
      "name": 'new name 2'
    }
  },
];

// 第一步：提取所有name并去重
const uniqueNames = [...new Set(cars.map(car => car.info.name))];
// 第二步：转换为目标格式
const result = uniqueNames.map(name => ({ result: name }));

console.log(result);
// 输出：[{"result": 'new name'}, {"result": 'new name 1'}, {"result": 'new name 2'}]

思路：先用map把数组里每个元素的info.name提取出来，再通过Set自动去重，最后把去重后的数组转成目标对象格式。

方法二：使用reduce手动控制去重 #

如果需要更灵活的去重逻辑（比如后续要处理复杂判断），可以用reduce实现：

let cars = [
  {
    "color": "purple",
    "info":{
      "name": 'new name'
    }
  },
  {
    "color": "red",
     "info":{
      "name": 'new name 1'
    }
  },
  {
    "color": "red",
     "info":{
      "name": 'new name 1'
    }
  },
  {
    "color": "red",
     "info":{
      "name": 'new name 2'
    }
  },
];

const result = cars.reduce((acc, car) => {
  const currentName = car.info.name;
  // 检查累加器中是否已存在该name
  const hasDuplicate = acc.some(item => item.result === currentName);
  if (!hasDuplicate) {
    acc.push({ result: currentName });
  }
  return acc;
}, []);

console.log(result);
// 输出：[{"result": 'new name'}, {"result": 'new name 1'}, {"result": 'new name 2'}]

思路：初始化一个空数组作为累加器，遍历每个元素时检查当前name是否已经在累加器中存在，不存在就添加进去，最终得到去重后的目标数组。

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