使用reduce，从对象数组中，在对象的数组属性中创建一组元素

Question

Given the following array:

foos = [
  {
    id: 0,
    bar: ['a','b','c']
  },
  {
    id: 1,
    bar: ['a','b','d']
  },
  {
    id: 2,
    bar: ['a','c']
  },
]

Using reduce , how can I achieve the following?:

bars == ['a','b','c','d']

I've tried:

foo.reduce((bars, foo) => bars.add(foo.bar), new Set())

But it results in a set of objects:

Set { {0: 'a', 1: 'b', 2: 'c'}, {0: 'a', 1: 'b', 2: 'd'}{0: 'a', 1: 'c'}}

And:

foos.reduce((bars, foo) => foo.bar.forEach(bar => bars.add(bar)), new Set())

But the forEach has no access to the bars set.

Answer 1

Instead of creating a Set inside your reduce . You could just reduce all bar arrays into a single one and pass that to your Set constructor.

 const foos = [ { id: 0, bar: ['a','b','c'] }, { id: 1, bar: ['a','b','d'] }, { id: 2, bar: ['a','c'] }, ]; const bars = new Set(foos.reduce((all, foo) => [...all, ...foo.bar], [])); console.log(...bars);

With flatMap :

 const foos = [ { id: 0, bar: ['a','b','c'] }, { id: 1, bar: ['a','b','d'] }, { id: 2, bar: ['a','c'] }, ]; const bars = new Set(foos.flatMap(foo => foo.bar)); console.log(...bars);

Answer 2

You can concat the bar property in the accumulator, and use .filter method to make the values unique:

 const foos = [{ id: 0, bar: ['a', 'b', 'c'] }, { id: 1, bar: ['a', 'b', 'd'] }, { id: 2, bar: ['a', 'c'] }, ]; const bars = foos .reduce((acc, itm) => acc.concat(itm.bar), []) .filter((i, x, s) => s.indexOf(i) === x); console.log(...bars);