如何將 position 添加到 javascript / Vue.js 中的現有陣列？

Question

我有一系列按進球數排序的球員：

 let players = [
  {"name": "player1", "goals": "5"},
  {"name": "player5", "goals": "4"},
  {"name": "player2", "goals": "4"},
  {"name": "player3", "goals": "2"},
  {"name": "player4", "goals": "1"}
]

我想用表格中的 position 顯示這些數據，如下所示：

1. 球員1 - 5個進球
2. 球員 5 - 4 球
3. 球員2 - 4個進球
4. 球員 3 - 2 球
5. 球員 4 - 1 球

如果兩個（或更多球員）有相同數量的進球 - 他們必須在表中具有相同的 position（在示例中 - 2.），則應該錯過枚舉中的下一個數字（在此示例中沒有數字 3.）。

如何按數組順序添加這種類型，position''（我不確定這是描述這個的好詞）？

Answer 1

您可以使用有序列表元素( <ol> )來呈現該列表，它會自動為列表項編號：

<ol>
  <li v-for="player in players" :key="player.name">
    {{ player.name }} - {{ player.goals }} goals
  </li>
</ol>

演示

Answer 2

嘗試這個：

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 += `
        ${i+1}. ${player.name} -  ${player.goal} goals
    `
}

table.innerHTML = str

Answer 3

你可以這樣做：

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)

Answer 4

前段時間我需要類似的東西並想出了這個：

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 種不同的排名類型以及來自原始數組的子 object。

其中resultArr[0].rank是 1-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是排序后的position。

 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); });