我正在撰寫一個 Football Team Builder 并希望從多個物件內部計算特定屬性。在這種情況下，我想統計 5 個足球運動員的國籍。需要計算來自同一國家的足球運動員的數量，并將其添加到現役球員的技能點總數中。（見代碼）
我在此處閱讀了有關“Object.keys”的內容，但我對 JavaScript 的了解似乎太少，無法正確使用它。
HTML
<h1> Create your Five-a-side Team </h1>
<p> Formation: <span>1-2-1</span></p>
<p>
Attacker 1: <span id="attacker_1"> </span> <br>
Midfielder 1: <span id="midfielder_1"> </span> <br>
Midfielder 2: <span id="midfielder_2"> </span> <br>
Defender 1: <span id="defender_1"> </span> <br>
Keeper: <span id="keeper"> </span> <br>
</p>
<p>
Total Skill Points: <span id="total_skill_points"> 0</span>★
</p>
<p>
You have <span id="same_nation_count">0</span>
players from <span id="nation_name">the same Nation</span>.
<br>
That means you got <span id="bonus_points"
>0</span> Bonus points added to your Total Skill Points!
</p>
JavaScript
// Attacker 1
const captain_01 = {
firstName: 'Johan',
lastName: 'Cruijff',
skillPoints: 5,
position: 'Attacker',
club: 'FC Barcelona',
nation: 'The Netherlands'
}; captain_01.fullName = `${captain_01.firstName} ${captain_01.lastName}`;
// Midfielder 1
const topclass_01 = {
firstName: 'Frenkie',
lastName: 'de Jong',
skillPoints: 4,
position: 'Midfielder',
club: 'FC Barcelona',
nation: 'The Netherlands'
}; topclass_01.fullName = `${topclass_01.firstName}
${topclass_01.lastName}`;
// Midfielder 2
const talent_01 = {
firstName: 'Ryan',
lastName: 'Gravenberch',
skillPoints: 3,
position: 'Midfielder',
club: 'Ajax',
nation: 'The Netherlands'
}; talent_01.fullName = `${talent_01.firstName}
${talent_01.lastName}`;
// Defender 1
const worldclass_01 = {
firstName: 'Virgil',
lastName: 'van Dijk',
skillPoints: 5,
position: 'Defender',
club: 'Liverpool',
nation: 'The Netherlands'
}; worldclass_01.fullName = `${worldclass_01.firstName}
${worldclass_01.lastName}`;
// Keeper
const keeper_01 = {
firstName: 'Gianluigi',
lastName: 'Donnarumma',
skillPoints: 5,
position: 'Keeper',
club: 'PSG',
nation: 'Italy'
}; keeper_01.fullName = `${keeper_01.firstName}
${keeper_01.lastName}`;
// Active Attacker 1
document.getElementById("attacker_1").innerHTML =
`${captain_01.fullName} (${captain_01.skillPoints}★)
(${captain_01.nation})`;
// Active Midfielder 1
document.getElementById("midfielder_1").innerHTML =
`${talent_01.fullName} (${talent_01.skillPoints}★)
(${talent_01.nation})`;
// Active Midfielder 2
document.getElementById("midfielder_2").innerHTML =
`${topclass_01.fullName} (${topclass_01.skillPoints}★)
(${topclass_01.nation})`;
// Active Defender 1
document.getElementById("defender_1").innerHTML =
`${worldclass_01.fullName} (${worldclass_01.skillPoints}★) (${worldclass_01.nation})`;
// Active Keeper
document.getElementById("keeper").innerHTML =
`${keeper_01.fullName} (${keeper_01.skillPoints}★)
(${keeper_01.nation})`;
// Counts the amount of players from the same nation
let nationCount = '';
// Counts Bonus Points to the Total Skill Points
let bonusPoints = nationCount;
document.getElementById("bonus_points").innerHTML =
bonusPoints;
// Total Skill Points calculator
document.getElementById("total_skill_points").innerHTML =
captain_01.skillPoints talent_01.skillPoints
topclass_01.skillPoints worldclass_01.skillPoints
keeper_01.skillPoints bonusPoints;
// Sets name for nation by calculating the most common nation among the players
document.getElementById("nation_name").innerHTML ;
這是我的 JSFiddle：https ://jsfiddle.net/u3tL65xz/1/
uj5u.com熱心網友回復：
首先將播放器物件放入一個集合中，以便于處理它們。然后從玩家串列中創建一個唯一的“國家”串列。您可以通過使用 Set 物件來確保唯一性。然后，您可以簡單地根據nation屬性篩選欄位并計算代表的每個唯一國家的總數。
const captain_01={firstName:'Johan',lastName:'Cruijff',skillPoints:5,position:'Attacker',club:'FC Barcelona',nation:'The Netherlands'};captain_01.fullName=`${captain_01.firstName} ${captain_01.lastName}`;const topclass_01={firstName:'Frenkie',lastName:'de Jong',skillPoints:4,position:'Midfielder',club:'FC Barcelona',nation:'The Netherlands'};topclass_01.fullName=`${topclass_01.firstName}
${topclass_01.lastName}`;const talent_01={firstName:'Ryan',lastName:'Gravenberch',skillPoints:3,position:'Midfielder',club:'Ajax',nation:'The Netherlands'};const worldclass_01={firstName:'Virgil',lastName:'van Dijk',skillPoints:5,position:'Defender',club:'Liverpool',nation:'The Netherlands'};const keeper_01={firstName:'Gianluigi',lastName:'Donnarumma',skillPoints:5,position:'Keeper',club:'PSG',nation:'Italy'};
const players = [captain_01, topclass_01, talent_01, worldclass_01,keeper_01];
const nations = new Set(players.map(p=>p.nation));
const output = Array.from(nations).map(n=>{return {[n]:players.filter(p=>p.nation === n).length}});
console.log(output);uj5u.com熱心網友回復：
由于您準備了 5 個玩家的物件，因此計算按國家分組的玩家數量非常簡單。下面的代碼片段顯示了將所有 5 個玩家的物件收集到一個陣列中，并使用回圈遍歷玩家的物件，最后將它們存盤在nationCount. 如果國家第一次進入回圈，nationCount當我們嘗試時將沒有資料find，所以我們推送計數為1的物件。如果同一個國家第二次或兩次以上進入回圈，我們只是增加count值。所以最終的結果nationCount將是這樣的：
[
{
nation: "The Netherlands",
count: 5
},
... and so on for more countries
]
let players = [{ firstName: 'Johan', lastName: 'Cruijff', skillPoints: 5, position: 'Attacker', club: 'FC Barcelona', nation: 'The Netherlands' },{ firstName: 'Virgil', lastName: 'van Dijk', skillPoints: 5, position: 'Defender', club: 'Liverpool', nation: 'The Netherlands' },{ firstName: 'Frenkie', lastName: 'de Jong', skillPoints: 4, position: 'Midfielder', club: 'FC Barcelona', nation: 'The Netherlands' },{ firstName: 'Ryan', lastName: 'Gravenberch', skillPoints: 3, position: 'Midfielder', club: 'Ajax', nation: 'The Netherlands' },{ firstName: 'Jasper', lastName: 'Cillessen', skillPoints: 2, position: 'Keeper', club: 'Valencia', nation: 'India' }]
// In your case, ignore the above one. The players object should be the one below.
//let players = [captain_01,talent_01,topclass_01,talent_01,average_01];
let nationCount = [];
for (let player of players) {
let existingNation = nationCount.find(ele => ele.nation === player.nation)
if (existingNation)
existingNation.count ;
else
nationCount.push({
nation: player.nation,
count: 1
})
}
console.log(nationCount)我希望這個物件能幫助你進一步處理你操縱分數的游戲邏輯。
uj5u.com熱心網友回復：
一個簡單的解決方案是遍歷物件并計算出現的次數 nation
async function nationPlayerMapper() {
const arr = {};
const data = [captain_01,worldclass_01,average_01,topclass_01,talent_01];
await data.map(obj => {
const {nation} = obj;
if (!arr[nation]) {
arr[nation] = 1;
} else {
arr[nation] = 1;
}
});
for (let [nation, count] of Object.entries(arr)) {
console.log(`Count Of Same Players From ${nation} is ${count}`);
}
}
// Counts the amount of players from the same Nation
let nationCount = nationPlayerMapper();
let captain_01 = {
firstName: 'Johan',
lastName: 'Cruijff',
skillPoints: 5,
position: 'Attacker',
club: 'FC Barcelona',
nation: 'The Netherlands'
};
captain_01.fullName = `${captain_01.firstName} ${captain_01.lastName}`;
let worldclass_01 = {
firstName: 'Virgil',
lastName: 'van Dijk',
skillPoints: 5,
position: 'Defender',
club: 'Liverpool',
nation: 'The Netherlands'
};
worldclass_01.fullName = `${worldclass_01.firstName}
${worldclass_01.lastName}`;
let topclass_01 = {
firstName: 'Frenkie',
lastName: 'de Jong',
skillPoints: 4,
position: 'Midfielder',
club: 'FC Barcelona',
nation: 'The Netherlands'
};
topclass_01.fullName = `${topclass_01.firstName}
${topclass_01.lastName}`;
let talent_01 = {
firstName: 'Ryan',
lastName: 'Gravenberch',
skillPoints: 3,
position: 'Midfielder',
club: 'Ajax',
nation: 'The Netherlands'
};
talent_01.fullName = `${talent_01.firstName}
${talent_01.lastName}`;
let average_01 = {
firstName: 'Jasper',
lastName: 'Cillessen',
skillPoints: 2,
position: 'Keeper',
club: 'Valencia',
nation: 'The Netherlands'
};
async function nationPlayerMapper() {
const arr = {};
const data = [captain_01,worldclass_01,average_01,topclass_01,talent_01];
await data.map(obj => {
const {nation} = obj;
if (!arr[nation]) {
arr[nation] = 1;
} else {
arr[nation] = 1;
}
});
for (let [nation, count] of Object.entries(arr)) {
console.log(`Count Of Same Players From ${nation} is ${count}`);
}
}
// Counts the amount of players from the same Nation
let nationCount = nationPlayerMapper();轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/384526.html
標籤：javascript 目的 特性