如何在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"}
]

我想按照表格位置显示这些数据，就像这样：

1. 选手1 - 5个进球
2. 选手5 - 4个进球
3. 选手2 - 4个进球
4. 选手3 - 2个进球
5. 选手4 - 1个进球

如果两个或更多的选手进球数相同，则它们在表格中必须具有相同的位置（如示例中的第2位），接下来的枚举号应该被跳过（在此示例中没有第3项）。

如何添加这种“按数组顺序排名”的类型（我不确定这是否是描述这种类型的好词）？

- damiano9696

Answer 1

我之前也需要类似的东西，然后想出了这个方案：

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] .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 是排序后的位置。

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

- Christopher

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

table.innerHTML = str

- tyazeez

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)

- Lahcen

Answer 4

你可以使用有序列表元素 (<ol>)来呈现该列表，它会自动为列表项编号：

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

演示

- tony19