一起使用 reduce 和排序 (JavaScript)

Question

我有一个对象数组 (groceryArray)，我想通过 groupId 属性（对象键）将它们组织成一个对象，最后通过 groupDisplayOrder 属性对这些键进行排序。请参阅 finalOutput 以获得所需的结果。

const groceryArray = [
    { id: 'apples', groupId: 'produce', groupDisplayOrder: 1 },
    { id: 'chicken', groupId: 'meat', groupDisplayOrder: 3 },
    { id: 'shrimp', groupId: 'seafood', groupDisplayOrder: 4 },
    { id: 'milk', groupId: 'dairy', groupDisplayOrder: 2 },
    { id: 'carrots', groupId: 'produce', groupDisplayOrder: 1 },
    { id: 'salmon', groupId: 'seafood', groupDisplayOrder: 4 }
]

期望的结果

const finalOutput = {
    produce: [{ id: 'apples', groupId: 'produce', groupDisplayOrder: 1 }, { id: 'carrots', groupId: 'produce', groupDisplayOrder: 1 }],
    dairy: [{ id: 'milk', groupId: 'dairy', groupDisplayOrder: 2 }],
    meat: [{ id: 'chicken', groupId: 'meat', groupDisplayOrder: 3 }],
    seafood: [{ id: 'shrimp', groupId: 'seafood', groupDisplayOrder: 4 }, { id: 'salmon', groupId: 'seafood', groupDisplayOrder: 4 }]
}

这是我当前的代码......我想我可能做了太多的步骤。我想知道是否有一种方法可以同时减少和排序？

  const groceriesGroupedById = groceryArray.reduce((acc, cur) => {
    if (cur.groupId) {
      (acc[cur.groupId] || (acc[cur.groupId] = [])).push(cur)
    }
    return acc
  }, {})

  const sortedGroupIds = Object.keys(groceriesGroupedById).sort((a, b) => {
    return groceriesGroupedById[a][0].groupDisplayOrder - groceriesGroupedById[b][0].groupDisplayOrder
  })

  const finalOutput = sortedGroupIds.reduce((acc, key) => ( acc[key] = groceriesGroupedById[key], acc ), {})

Answer 1

首先，使用Array.sort()对数组进行排序并使用Array.reduce()

const groceryArray = [
    { id: 'apples', groupId: 'produce', groupDisplayOrder: 1 },
    { id: 'chicken', groupId: 'meat', groupDisplayOrder: 3 },
    { id: 'shrimp', groupId: 'seafood', groupDisplayOrder: 4 },
    { id: 'milk', groupId: 'dairy', groupDisplayOrder: 2 },
    { id: 'carrots', groupId: 'produce', groupDisplayOrder: 1 },
    { id: 'salmon', groupId: 'seafood', groupDisplayOrder: 4 }
];

groceryArray.sort((a, b) => a.groupDisplayOrder - b.groupDisplayOrder);

const finalOutput = groceryArray.reduce((acc, cur) => {
  if (!acc[cur.groupId]) acc[cur.groupId] = [];
  acc[cur.groupId].push(cur);
  return acc;
}, {});

console.log(finalOutput);

Answer 2

您可以采用嵌套方法，使用数组和 groupDisplayOrder，对象以 groupId 作为键。

最后将所有对象组合成一个对象。

const
    groceryArray = [{ id: 'apples', groupId: 'produce', groupDisplayOrder: 1 }, { id: 'chicken', groupId: 'meat', groupDisplayOrder: 3 }, { id: 'shrimp', groupId: 'seafood', groupDisplayOrder: 4 }, { id: 'milk', groupId: 'dairy', groupDisplayOrder: 2 }, { id: 'carrots', groupId: 'produce', groupDisplayOrder: 1 }, { id: 'salmon', groupId: 'seafood', groupDisplayOrder: 4 }],
    result = Object.assign({}, ...groceryArray.reduce((r, o) => {
        ((r[o.groupDisplayOrder] ??= {})[o.groupId] ??= []).push(o);
        return r;
    }, []));

console.log(result);

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

Answer 3

使用Map 和Array#reduce，您可以对数据进行分组，然后遍历所有值并对它们进行排序。

const 
  groceryArray=[{id:"apples",groupId:"produce",groupDisplayOrder:1},{id:"chicken",groupId:"meat",groupDisplayOrder:3},{id:"shrimp",groupId:"seafood",groupDisplayOrder:4},{id:"milk",groupId:"dairy",groupDisplayOrder:2},{id:"carrots",groupId:"produce",groupDisplayOrder:1},{id:"salmon",groupId:"seafood",groupDisplayOrder:4}],

  res = groceryArray.reduce((r, o) => ((r[o.groupId] ??= []), r[o.groupId].push(o), r), {});

Object.values(res).forEach((o) => o.sort(({ groupDisplayOrder: a }, { groupDisplayOrder: b }) => a - b));

console.log(res);