如何将对象数组转换为基于属性的唯一值数组？

问题描述 #

现有包含dinner和breakfest属性的JavaScript对象数组：

const food = [
  {dinner: 'Apple', breakfest: 'Tomato'},
  {dinner: 'Apple', breakfest: 'Apple'},
  {dinner: 'Milk', breakfest: 'Banana'},
  {dinner: 'Apple', breakfest: 'Milk'},
  {dinner: 'Tomato', breakfest: 'Banana'}
]

需要提取所有属性值，生成无重复的目标数组：

const whatIAmEat = ['Apple', 'Tomato', 'Milk', 'Banana']

已知可通过...new Set结合concat实现，但希望更简洁的写法。

简洁实现方案 #

方案1：flatMap + Object.values + Set

这是最简洁的写法之一，利用flatMap扁平化所有对象的属性值，再通过Set自动去重：

const whatIAmEat = [...new Set(food.flatMap(Object.values))]

• Object.values(item)提取单个对象的所有属性值，返回数组
• flatMap遍历数组每个对象，将所有属性值数组合并为一个一维数组
• new Set()自动过滤重复值，最后用扩展运算符...转回数组

方案2：Array.from替代扩展运算符

如果偏好更显式的数组转换方式，可以用Array.from：

const whatIAmEat = Array.from(new Set(food.flatMap(Object.values)))

方案3：reduce + Set（灵活扩展版）

如果后续需要对属性值做额外处理（比如过滤空值、转换格式），reduce的写法更灵活：

const whatIAmEat = [...food.reduce((uniqueSet, item) => {
  // 遍历当前对象的所有属性值，添加到Set中
  Object.values(item).forEach(val => uniqueSet.add(val))
  return uniqueSet
}, new Set())]

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