Javascript - получить уникальные значения из массива внутри объекта

Question

Я пытаюсь получить все уникальные значения из массива внутри и внутри объекта, внутри массива

var items = [
{
  colors:['white', 'black'],
  fruits:['apple, banana']
},

{
  colors:['yellow', 'black'],
  fruits:['mango, blueberry'],
},
...
]

const property = 'colors'
const values = this.distinct(this.items.map(item => item[property].map(elem => elem))

Я хочу, чтобы значения возвращали массив с каждым значением цвета, например, так:

['black','white','yellow']

Но это не работает, и я не понимаю, почему

Answer 1

flatMap массив объектов для извлечения каждого подмассива colors, передачи в конструктор Set для устранения дубликатов и преобразования набора обратно в массив:

var items = [{
  colors:['white', 'black'],
  fruits:['apple, banana']
},{
  colors:['yellow', 'black'],
  fruits:['mango, blueberry'],
}];
const colorsSet = new Set(
  items.flatMap(item => item.colors)
);
const uniques = [...colorsSet];
console.log(uniques);

Answer 2

reduce может использоваться для итерации по массиву и назначения цвета в качестве ключа объекта-накопителя:

const result = items.reduce((a, {colors})=> {
    colors.forEach(cl => a[cl] = 1);
    return a;
}, {})
console.log(Object.keys(result));

Или в одну строку:

Object.keys(items.reduce((a, {colors})=> (colors.forEach(cl => a[cl] = 1) , a), {}));

Чтение подробнее о методе уменьшения

Пример:

let items = [
    {
        colors: ['white', 'black'],
        fruits: ['apple, banana']
    },

    {
        colors: ['yellow', 'black'],
        fruits: ['mango, blueberry'],
    }
]

const result = items.reduce((a, {colors})=> {
    colors.forEach(cl => a[cl] = 1);
    return a;
},{})
console.log(Object.keys(result));

const oneLine = Object.keys(items.reduce((a, {colors})=> 
    (colors.forEach(cl => a[cl] = 1) , a), {}));
console.log(oneLine);