同时使用reduce和sort(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);