如何基于香草javascript中的属性对对象数组进行分组
如何基于香草javascript中的特定属性 groupBy 对象数组?例如,给定的是:
How do you groupBy array of objects based on specific properties in vanilla javascript? For example this given:
const products = [
{
category: "Sporting Goods",
price: "$49.99",
stocked: true,
name: "Football"
},
{
category: "Sporting Goods",
price: "$9.99",
stocked: true,
name: "Baseball"
},
{
category: "Sporting Goods",
price: "$29.99",
stocked: false,
name: "Basketball"
},
{
category: "Electronics",
price: "$99.99",
stocked: true,
name: "iPod Touch"
},
{
category: "Electronics",
price: "$399.99",
stocked: false,
name: "iPhone 5"
},
{ category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
];
我想运行一个reduce函数,该函数会导致像这样的新对象数组:
i want to run a reduce function that would result to a new array of objects like this:
预期输出:
const categorize = [
{
category:"Sporting Goods",
products: [
{
name:"Football",
price: "$49.99",
stocked: true
},
{
name:"Baseball",
price: "$9.99",
stocked: true
},
{
name:"Basketball",
price: "$29.99",
stocked: true
}
]
},
{
category: "Electronics",
products: [
{
name: "iPod Touch",
price: "$99.99",
stocked: true
},
{
name: "iPhone 5",
price: "$399.99",
stocked: false
},
{
name: "Nexus 7",
price: "$199.99",
stocked: true
}
]
}
]
我从这里的教程中获得了我的解决方案: https://www.consolelog .io/group-by-in-javascript/使用reduce函数.
i based my solution from the tutorial here: https://www.consolelog.io/group-by-in-javascript/ using the reduce function.
这是我的代码:
const groupBy = (arr,prop)=>{
return arr.reduce((groups,item)=>{
let val = item[prop];
groups[val] = groups[val]||[];
groups[val].push(item);
return groups
},{});
}
const categorize = groupBy(products,'category');
console.log(categorize);
/* returns an Object like
Object {Sporting Goods: Array[3], Electronics: Array[3]}
however it's not the intended output.
*/
我试图在groupBy函数内返回Object.values(obj)
或Object.entries(obj)
,但是它只返回2个数组,如[Array[3],Array[3]]
,如果我将初始值(reduce的第二个参数)设置为空[]而不是{},输出只是一个空数组.需要帮助,谢谢!
I tried to return Object.values(obj)
or Object.entries(obj)
inside the groupBy function but it just returns an array of 2 arrays like [Array[3],Array[3]]
and if i set the initial value (2nd parameter of reduce) to empty [] instead of {}, the output is just an empty array. Need help, thanks!
因为您想要一个包含 objects 的数组(而不只是一个普通值数组),所以创建一个{ category, products: [] }
对象在累加器中不存在:
Because you want an array containing objects (rather than just an array of plain values), create a { category, products: [] }
object if it doesn't exist in the accumulator:
const products=[{category:"Sporting Goods",price:"$49.99",stocked:!0,name:"Football"},{category:"Sporting Goods",price:"$9.99",stocked:!0,name:"Baseball"},{category:"Sporting Goods",price:"$29.99",stocked:!1,name:"Basketball"},{category:"Electronics",price:"$99.99",stocked:!0,name:"iPod Touch"},{category:"Electronics",price:"$399.99",stocked:!1,name:"iPhone 5"},{category:"Electronics",price:"$199.99",stocked:!0,name:"Nexus 7"}];
const output = Object.values(
products.reduce((a, { category, ...item }) => {
if (!a[category]) {
a[category] = { category, products: [] };
}
a[category].products.push(item);
return a;
}, {})
);
console.log(output);