使用 es6 为具有相同 id 的项目重新组织数组答案

【问题标题】：Reorganize an array with es6 for items with same id使用 es6 为具有相同 id 的项目重新组织数组
【发布时间】：2021-06-25 23:48:02
【问题描述】：

假设我有一系列产品：

const products = [
 { title: 'test product', storefront: {id: 0, title: 'test storefront 1'} },
 { title: 'test product 2', storefront: {id: 0, title: 'test storefront 1'} },
 { title: 'test product 3', storefront: {id: 1, title: 'test storefront 2'} }
]

如何返回一个包含每个店面及其所有产品的对象的新数组？

例如：

  const storefronsts = [
    {
      storefront: {id: 0, title: 'test storefront 1'}, 
      products: [
        { title: 'test product', storefront: {id: 0, title: 'test storefront 1'} }, 
        { title: 'test product 2', storefront: {id: 0, title: 'test storefront 1'} }
      ]
    },
    {
      storefront: {id: 1, title: 'test storefront 2'}, 
      products: [
        { title: 'test product 3', storefront: {id: 1, title: 'test storefront 2'} }
      ]
    }
  ]

【问题讨论】：

@MisterJojo 哎呀。现已修复。

标签： javascript arrays typescript sorting ecmascript-6

【解决方案1】：

您可以使用reduce，然后只需检查每个店面id

const rtn = products.reduce((p,c,i,a) => {
    let current = p.find(store => store.storefront.id == c.storefront.id);
    if (!current) { 
        current = { storefront: {id: c.storefront.id, title: c.storefront.title, products: []} }
        p.push(current);
    }

    current.storefront.products.push(c)
    return p;
}, [])

演示：https://jsfiddle.net/n1pfL8e6/

【讨论】：

【解决方案2】：

可以使用 JSON.stringify 将输出（店面数组）与请求的数组（来自问题）进行比较。以下代码返回true 进行比较，而接受的答案返回false。

原始输入：

const products = [{
    title: 'test product',
    storefront: {
        id: 0,
        title: 'test storefront 1'
    }
},
{
    title: 'test product 2',
    storefront: {
        id: 0,
        title: 'test storefront 1'
    }
},
{
    title: 'test product 3',
    storefront: {
        id: 1,
        title: 'test storefront 2'
    }
}
];

改造过程：

const pre = {}

products.forEach(product => {

  const storeFrontId = product.storefront.id;
  const { storefront } = product;
  if (pre[storeFrontId]) {
    return pre[storeFrontId].products.push(product);
  } 
  pre[storeFrontId] = { storefront, products: [ product ] }

});

const storefronts = [];

Object.keys(pre).map(key => storefronts.push(pre[key]));
// Alternative, cleaner version:
// Object.values(pre).map(value => storefronts.push(value) );

console.log(storefronts);

与原始输出比较：

const expected = [
    {
      storefront: {id: 0, title: 'test storefront 1'}, 
      products: [
        { title: 'test product', storefront: {id: 0, title: 'test storefront 1'} }, 
        { title: 'test product 2', storefront: {id: 0, title: 'test storefront 1'} }
      ]
    },
    {
      storefront: {id: 1, title: 'test storefront 2'}, 
      products: [
        { title: 'test product 3', storefront: {id: 1, title: 'test storefront 2'} }
      ]
    }
];

const expectedJSON = JSON.stringify( expected );

将我们的结果与预期结构进行比较：

console.log( JSON.stringify( storefronts ) === expectedJSON );
//=> true

【讨论】：