Сглаживание массивов объектов, имеющих массивы, вложенные в их свойства

Question

В настоящее время у меня есть массив, содержащий мою одежду (фиктивные данные):

myClothes = [
    {
        type: 'shirts',
        pieces: [
            {
                brand: 'patagonia',
                quantity: 6,
            },
            {
                brand: 'hugo boss',
                quantity: 3,
            },
        ],
    },
    {
        type: 'trousers',
        pieces: [
            {
                brand: 'jack & jones',
                quantity: 2,
            },
            {
                brand: 'zara',
                quantity: 4,
            },
            {
                brand: 'versace',
                quantity: 1,
            },
        ],
    },
    {
        type: 'socks',
        pieces: [
            {
                brand: 'no-name',
                quantity: 12,
            },
        ],
    },  
];

Как видите, массив содержит объекты (рубашки, брюки, носки), которые разделяют одежду по их типу. Теперь, что я могу сделать с javascript, чтобы создать новый массив, который выглядит так, как показано ниже? Так что там, где все части не отделены от рубашек / брюк / носков, и это должно просто показать, сколько у меня есть товаров этой марки.

allPiecesUnseperated = [
    {
        brand: 'patagonia',
        quantity: 6,
    },
    {
        brand: 'hugo boss',
        quantity: 3,
    },
    {
        brand: 'jack & jones',
        quantity: 2,
    },
    {
        brand: 'zara',
        quantity: 4,
    },
    {
        brand: 'versace',
        quantity: 1,
    },  
    {
        brand: 'no-name',
        quantity: 12,
    },          
];

Answer 1

const clothes = [{
    type: 'shirts',
    pieces: [{
        brand: 'patagonia',
        quantity: 6,
      },
      {
        brand: 'hugo boss',
        quantity: 3,
      },
    ],
  },
  {
    type: 'trousers',
    pieces: [{
        brand: 'jack & jones',
        quantity: 2,
      },
      {
        brand: 'zara',
        quantity: 4,
      },
      {
        brand: 'versace',
        quantity: 1,
      },
    ],
  },
  {
    type: 'socks',
    pieces: [{
      brand: 'no-name',
      quantity: 12,
    }, ],
  },
];

const result = clothes.map(({
  pieces
}) => pieces).reduce((acc, arr) => [...acc, ...arr], []);

console.log(result);

Answer 2

Используйте .flatMap() функцию

const myClothes = [
    {
        type: 'shirts',
        pieces: [
            { brand: 'patagonia', quantity: 6 },
            { brand: 'hugo boss', quantity: 3 }
        ]
    },
    {
        type: 'trousers',
        pieces: [
            { brand: 'jack & jones', quantity: 2 },
            { brand: 'zara', quantity: 4, },
            { brand: 'versace', quantity: 1 }
        ]
    },
    {
        type: 'socks',
        pieces: [
            { brand: 'no-name', quantity: 12 },
        ]
    }  
];

const output = myClothes.flatMap(o => o.pieces);

console.log(output);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Вероятно, не самое эффективное (поскольку concat действительно создает новый массив при каждом вызове) или самое элегантное решение, но оно должно выполнить свою работу.

var all = []
myClothes.forEach((item) => {
    all = all.concat(item.pieces)
})