我有一系列按進球數排序的球員：
let players = [
{"name": "player1", "goals": "5"},
{"name": "player5", "goals": "4"},
{"name": "player2", "goals": "4"},
{"name": "player3", "goals": "2"},
{"name": "player4", "goals": "1"}
]
我想用表格中的位置顯示這些資料，如下所示：
- 球員 1 - 5 個進球
- 球員 5 - 4 球
- 球員 2 - 4 球
- 球員 3 - 2 球
- 球員 4 - 1 球
如果兩名（或更多球員）的進球數相同 - 他們在表格中的位置必須相同（在示例中 - 2.），則應該錯過列舉中的下一個數字（在此示例中沒有數字 3.）。
如何在陣列中按順序添加這種型別 ,,position ''（我不確定這是描述這個的好詞）？
uj5u.com熱心網友回復：
前段時間我需要類似的東西并想出了這個：
function sortedRank(arr, childProp, asc) {
let prev, position = 0, ranking = 0;
return [...arr]
.sort((a, b) => asc ? a[childProp] - b[childProp] : b[childProp] - a[childProp])
.map((target, idx) => {
const obj = { target };
obj.indexRank = idx 1;
if (target[childProp] != prev) {
position = obj.rank = obj.indexRank;
ranking ;
prev = target[childProp];
} else {
obj.rank = position;
}
obj.altRank = ranking;
return obj
});
}
它從原始陣列中回傳 3 種不同的排名型別以及子物件。
resultArr[0].rank1-N 的排名在哪里，但跳過相等的排名數字。例如：
source = resultArr[index].rank
goals 5 = 1.
goals 4 = 2.
goals 4 = 2.
goals 3 = 4.
goals 1 = 5.
resultArr[0].altRank 不會跳過排名數字。
source = resultArr[index].altRank
goals 5 = 1.
goals 4 = 2.
goals 4 = 2.
goals 3 = 3.
goals 1 = 4.
indexRank 是排序后的位置。
顯示代碼片段
const list = [
{"name": "player1","goals": "5"},
{"name": "player5","goals": "4"},
{"name": "player2","goals": "4"},
{"name": "player3","goals": "2"},
{"name": "player4","goals": "1"}
];
function sortedRank(arr, childProp, ascending) {
let prev, position = 0,
ranking = 0;
return [...arr]
.sort((a, b) => ascending ? a[childProp] - b[childProp] : b[childProp] - a[childProp])
.map((target, idx) => {
const obj = { target };
obj.indexRank = idx 1;
if (target[childProp] != prev) {
position = obj.rank = obj.indexRank;
ranking ;
prev = target[childProp];
} else {
obj.rank = position;
}
obj.altRank = ranking;
return obj
});
}
sortedRank(list, 'goals').forEach(({ indexRank, rank, altRank, target }) => {
console.log(`idxRank: ${indexRank} rank: ${rank} alternative: ${altRank}`, target);
});uj5u.com熱心網友回復：
您可以使用有序串列元素( <ol>)來呈現該串列，它會自動為串列項編號：
<ol>
<li v-for="player in players" :key="player.name">
{{ player.name }} - {{ player.goals }} goals
</li>
</ol>
演示
uj5u.com熱心網友回復：
嘗試這個：
const
player_obj = [
{ "name": "player1", "goals": "5" },
{ "name": "player5", "goals": "4" },
{ "name": "player2", "goals": "4" },
{ "name": "player3", "goals": "2" },
{ "name": "player4", "goals": "1" }
]
player_obj.sort((a, b) => a.goals - b.goals)
str = ''
for (let i = 0; i < player_obj.length; i ) {
const
player = player_obj[i]
str = `
<tr><td>${i 1}. ${player.name} - ${player.goal} goals</td></tr>
`
}
table.innerHTML = str
uj5u.com熱心網友回復：
你可以這樣做：
const players=[ {"name": "player1", "goals": "5"},
{"name": "player5", "goals": "4"},
{"name": "player2", "goals": "4"},
{"name": "player3", "goals": "2"},
{"name": "player4", "goals": "1"}]
const playersSorted = players.sort((a, b)=> a.goals - b.goals);
//console.log(playersSorted)
let currentPosition = 1; let lastGoalsNbr =playersSorted[0].goals;
const playersPositioned = playersSorted.map(({name, goals})=> {
if(lastGoalsNbr !== goals ) currentPosition ;
lastGoalsNbr = goals;
return {name, goals, position:currentPosition}
}
)
console.log(playersPositioned)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/372755.html
標籤：javascript Vue.js