我如何渲染列表中的 2 个玩家,他们有相同的点数,处于相同的水平,例如第二?

How can I render 2 players of a list, that have the same points, at the same level, e.g. both second?

在排行榜中,我遇到了上述问题。我呈现一个列表,我根据他们的分数对玩家进行排序。然后我使用 index + 1 渲染它们以获得它们在列表中的位置。但在平等的情况下,一个获得第二,另一个获得第三等

首先,我虽然可能对每个玩家都有一个索引,但这会有点矫枉过正,因为每次一个玩家改变他们的分数,我也必须改变其他玩家的索引,以调整更新的列表。

我想,我需要一些检查点数的东西,如果它们与以下玩家相同,则分配相同的索引。然后,如果后面的玩家得分较少,则得到指数减去得分相同的玩家的数量,并将结果作为他的指数。

这是一个好的解决方案吗?

如果有人愿意提供帮助,我有 here 一个最小可重现的示例。

谢谢

你可以count有多少人的分数比玩家多,而那个玩家的位置就是count + 1。您需要对每个玩家进行额外计数,但如果列表不是很大,这可能是一个解决方案。例如:

let players = [
  { name: "John", points: 4 },
  { name: "Bill", points: 3 },
  { name: "Mark", points: 4 },
  { name: "Helen", points: 2 },
  { name: "Mary", points: 10 }
];

const list = players.sort((a, b) => (a.points < b.points ? 1 : -1));

function countPlayersMithMorePoints(points){
  return players.filter(player => player.points > points).length + 1;
}

players = players.map(player => {
  return {
    ...player,
    position: countPlayersMithMorePoints(player.points)
  }
})

console.log(players)

所以在这种情况下。 “Mark”和“Jhon”有 4 分……所以都排在第二位。海伦排在第四位。没有第三名。

这是我所做的。我取出排序后的列表并遍历它并检查上一个值是否与迭代中的当前值相同。值相同则不用加仓,不同则加仓

https://codesandbox.io/s/players-with-same-points-forked-lkhcu6