假設我有一個類別注意這僅適用于功能組件而不是類組件
const category = ["Action","Female Games","Boys Games","Kids","Team","Guns","Parkour","Logic","Adventure","Hero Games",
"Fun Games","War Games","Space Games","Free To Play",
"F2P","Gache Game","NFT Game","Zombie Games","Multiplayer","Open-world Game",
"Mobile Games","PvP Game","Clan Games"]
我有這些應該與類別相關的隨機游戲專案，否則它為空。
const PopularItems = [
{imgPath:"",name:"Genshin Impact",type:["Free To Play","F2P","Gache Game","Adventure","Multiplayer","Open-world Game","Fun Games"],views:"213131",rate:"2.1"},
{imgPath:"",name:"Crossfire",type:["Free To Play","F2P","Action","Guns","Multiplayer","Boys Games","War Games","Open-world Game","Fun Games"],views:"12161",rate:"4.1"},
{imgPath:"",name:"Spiderman",type:["Parkour","Action","Adventure","Hero Games","Fun Games"],views:"232411",rate:"3.9"},
{imgPath:"",name:"Apocalypse",type:["Zombie Games","Multiplayer","Open-world Game","Action","Guns","Team","Fun Games"],views:"232411",rate:"4.0"},
{imgPath:"",name:"Honkai Impact",type:["Adventure","Free To Play","F2P","Gache Game","Action","Multiplayer","Open-world Game","Fun Games"],views:"232411",rate:"4.1"},
{imgPath:"",name:"MIR4",type:["NFT Game","Action","Hero Games","Multiplayer","Open-world Game","Fun Games"],views:"232411",rate:"4.5"},
{imgPath:"",name:"Minecraft",type:["Kids","Multiplayer","Open-world Game","Fun Games","Adventure"],views:"232411",rate:"4.6"},
{imgPath:"",name:"Clash of Clan",type:["Mobile Games","PvP Game","Open-world Game","Fun Games","War Games","Hero Games", "Adventure"],views:"232411",rate:"4.1"},
{imgPath:"",name:"Call of Duty",type:["War Games","Multiplayer","Open-world Game","Team","Guns","Adventure","Free To Play","F2P","Gache Game"],views:"232411",rate:"4.2"},
{imgPath:"",name:"Valorant",type:["Multiplayer","Open-world Game","Team","Guns","Parkour","Action"],views:"232411",rate:"4.1"},
{imgPath:"",name:"Mobile Legends Bang Bang",type:["Multiplayer","Open-world Game","Mobile Games","PvP Game","Clan Games","Hero Games"],views:"232411",rate:"4.3"}
]
我想找到可以在類別中找到的 if 型別，然后在找到與游戲匹配的類別時增加每個類別的專案大小。我的意思是，每當我找到與 categorylist 匹配的型別時，它就會增加該類別的專案。例如，如果我在其中找到 3 個多人游戲，PopularItems.type那么多人游戲就像multiplayer:3
另一個例子
category.find( 5 War Games) => WarGames: 5
category.find( 10 Guns Games ) => GunsGames: 10
誰能給我一個解釋？或至少解決方案？我已經嘗試使用
includes() , indexOf(), some(), filter() or map() but I still don't understand.
uj5u.com熱心網友回復：
這是一種可能的解決方案：
const findCategory = findThis => ({
[findThis || 'Search Item']: PopularItems.reduce(
(acc, itm) => itm.type.includes(findThis) ? acc 1 : acc, 0
) || 'Not found in category-array'
});
解釋
- 該方法
findCategory回傳一個物件 key是正在搜索的類別（或者，如果為 null，則為默認值）- 是該
value類別在 PopularItems 陣列中出現的次數（在陣列type元素內的 prop 處）
代碼片段
const category = ["Action", "Female Games", "Boys Games", "Kids", "Team", "Guns", "Parkour", "Logic", "Adventure", "Hero Games", "Fun Games", "War Games", "Space Games", "Free To Play", "F2P", "Gache Game", "NFT Game", "Zombie Games", "Multiplayer", "Open-world Game", "Mobile Games", "PvP Game", "Clan Games"];
const PopularItems = [{
imgPath: "",
name: "Genshin Impact",
type: ["Free To Play", "F2P", "Gache Game", "Adventure", "Multiplayer", "Open-world Game", "Fun Games"],
views: "213131",
rate: "2.1"
},
{
imgPath: "",
name: "Crossfire",
type: ["Free To Play", "F2P", "Action", "Guns", "Multiplayer", "Boys Games", "War Games", "Open-world Game", "Fun Games"],
views: "12161",
rate: "4.1"
},
{
imgPath: "",
name: "Spiderman",
type: ["Parkour", "Action", "Adventure", "Hero Games", "Fun Games"],
views: "232411",
rate: "3.9"
},
{
imgPath: "",
name: "Apocalypse",
type: ["Zombie Games", "Multiplayer", "Open-world Game", "Action", "Guns", "Team", "Fun Games"],
views: "232411",
rate: "4.0"
},
{
imgPath: "",
name: "Honkai Impact",
type: ["Adventure", "Free To Play", "F2P", "Gache Game", "Action", "Multiplayer", "Open-world Game", "Fun Games"],
views: "232411",
rate: "4.1"
},
{
imgPath: "",
name: "MIR4",
type: ["NFT Game", "Action", "Hero Games", "Multiplayer", "Open-world Game", "Fun Games"],
views: "232411",
rate: "4.5"
},
{
imgPath: "",
name: "Minecraft",
type: ["Kids", "Multiplayer", "Open-world Game", "Fun Games", "Adventure"],
views: "232411",
rate: "4.6"
},
{
imgPath: "",
name: "Clash of Clan",
type: ["Mobile Games", "PvP Game", "Open-world Game", "Fun Games", "War Games", "Hero Games", "Adventure"],
views: "232411",
rate: "4.1"
},
{
imgPath: "",
name: "Call of Duty",
type: ["War Games", "Multiplayer", "Open-world Game", "Team", "Guns", "Adventure", "Free To Play", "F2P", "Gache Game"],
views: "232411",
rate: "4.2"
},
{
imgPath: "",
name: "Valorant",
type: ["Multiplayer", "Open-world Game", "Team", "Guns", "Parkour", "Action"],
views: "232411",
rate: "4.1"
},
{
imgPath: "",
name: "Mobile Legends Bang Bang",
type: ["Multiplayer", "Open-world Game", "Mobile Games", "PvP Game", "Clan Games", "Hero Games"],
views: "232411",
rate: "4.3"
}
];
const findCategory = findThis => ({
[findThis || 'Search Item']: PopularItems.reduce(
(acc, itm) => itm.type.includes(findThis) ? acc 1 : acc, 0
) || 'Not found in category-array'
});
console.log('search: null\n', findCategory());
console.log('search: War Games\n', findCategory('War Games'));
console.log('search: Multiplayer\n', findCategory('Multiplayer'));轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/416314.html
標籤：