问题描述
我是JavaScript初学者，也是ReactJS。
我正在做练习，只是为了提高我的知识。此练习列出了投资基金。我呈现此列表并显示有关每个投资基金的一些详细信息。
我现在要尝试的是根据其各自的category和subcategory来组织此列表。在下图中的列表中显示一块，可以看到我渲染了一个列表，并且该列表中的每个项目都有一个类别和一个子类别。
我尝试使用reduce，但是我真的不明白它是如何工作的，因此我无法应用我在互联网上看到的示例。要整理列表，请使用.map()。
这是我放入codesandbox的代码
您能告诉我如何根据类别和子类别来组织/列出每个投资基金吗？
谢谢。
解决方法
我们可以使用Array.reduce将资金按类别或类别和子类别进行分组，这将创建以这些属性为键的对象。
一旦我们将资金按类别分组，我们只能显示给定组中的资金，例如
groups["Renda Variável"]
我们还可以使用Array.sort对任何属性（或属性组合）进行排序。
此外，如果您只想要给定类别的资金，则可以使用Array.filter，如下所示：
// Show only funds from "Estratégias Diferenciadas"
console.log("Desired category:",funds.filter(fund => fund.Category === "Estratégias Diferenciadas"));
例如（我从这里所有资金中选择了20个随机项目）：
let funds = [{"Category":"Renda Variável","SubCategory":"Valor Long Only","Name":"Normandia Institucional Fundo de Investimento em Cotas de Fundo de Investimento em Ações","Type":"Ações"},{"Category":"Renda Fixa","SubCategory":"Crédito Privado","Name":"Fundo de Investimento Vinci Renda Fixa Crédito Privado","Type":"Renda Fixa"},{"Category":"Renda Variável","SubCategory":"Valor Plus","Name":"Novus Ações Institucional Fundo de Investimento em Cotas de Fundos de Investimento em Ações","SubCategory":"Cotas de FIDCs Próprios","Name":"SRM Exodus 60 Fundo de Investimento em Cotas de Fundos de Investimento Multimercado - Créd. Priv.","Type":"Multimercado"},{"Category":"Estratégias Diferenciadas","SubCategory":"Estratégia Específica - Investimento no Exterior","Name":"Exploritas Alpha America Latina Fic de Fi Multimercado","SubCategory":"Long & Short Direcional","Name":"3R Genus Hedge Fundo de Investimento Multimercado","SubCategory":"Equity Hedge/Long Biased","Name":"NCH Maracanã Long Short Select Fundo de Investimento de Ações","Name":"Perfin Institucional Fundo de Investimento em Cotas de Fundos de Investimento em Ações","SubCategory":"Renda Fixa","Name":"Brasil Plural Yield Fundo de Investimento Renda Fixa Referenciado DI","Name":"Augme 45 Fundo de Investimento em Cotas de Fundos de Investimento multimercado Crédito Privado","Name":"Daycoval Classic Fundo de Investimento Renda Fixa Crédito Privado","Name":"BNP Paribas Match DI Fundo de Investimento Renda Fundo de Investimentoxa Referenciado Crédito Privado","SubCategory":"Direitos Creditórios","Name":"Fundo de Investimento em Direitos Créditorios TG Real","Type":"Direito Creditório"},"Name":"Leste Credit Brasil Fundo de Investimento em Cotas de Fundos de Investimento Multimercado Crédito Privado","Name":"Rio Bravo Fundamental Fundo de Investimento em Ações","Name":"NW3 Event Driven Fundo de Investimento em Cotas de Fundos de Investimento Multimercado","SubCategory":"Cotas de FIDCs Multigestor","Name":"Solis Capital Antares Crédito Privado - Fundo de Investimento em Cotas de Fundos de Investimento Multimercado - Longo Prazo","SubCategory":"Macro Valorização","Name":"Adam Macro Strategy II Fundo de Investimento em Cotas de Fundos de Investimento Multimercado","Name":"Valora Guardian Fundo de Investimento em Cotas de Fundos de Investimento Multimercado Crédito Privado","SubCategory":"Long & Short Neutro","Name":"Távola Long & Short Fundo de Investimento Multimercado","Type":"Multimercado"}]
console.log("Funds grouped by Category:",funds.reduce((groups,fund) => {
// We use this key to group funds,we could make it anything,e.g. Name etc.
let key = fund.Category;
groups[key] = [...(groups[key] || []),fund];
return groups;
},{}));
console.log("Funds grouped by Category,Subcategory:",in this case we're grouping by Category and SubCategory
let key = fund.Category + "," + fund.SubCategory;
groups[key] = [...(groups[key] || []),{}));
console.log("Funds sorted by Category:",[...funds].sort((a,b) => a.Category > b.Category ? 1: -1));
console.log("Funds sorted by Category,SubCategory:",b) => {
if (a.Category !== b.Category) {
return a.Category > b.Category ? 1: -1;
}
return a.SubCategory > b.SubCategory ? 1: -1;
}));