Question

这是我第一次在这里提问。我是JavaScript的新手，我正在尝试通过制作游戏来学习它。我有5个玩家，每个玩家都有一个scoreHistory数组。如何对所有球员的得分进行排序，并仅显示前10名？由于只有5个玩家，因此如果某些玩家得分较高，则应该多次显示。

 const Data = [
{
    username: 'spidey2016',
    email: 'webhead@yahoo.com',
    password: 'maryJane123',
    firstName: 'Peter',
    lastName: 'Parker',
    scoreHistory: [500, 2300, 1000, 900, 3000],
},
{
    username: 'bbanner45',
    email: 'always_angry@gmail.com',
    password: 'berttyRoss456',
    firstName: 'Bruce',
    lastName: 'Banner',
    scoreHistory: [1000, 3500, 800, 2000, 3100],
},
{
    username: 'weirdo100',
    email: 'magic_hands@yahoo.com',
    password: 'chritinePalmer789',
    firstName: 'Stephen',
    lastName: 'Strange',
    scoreHistory: [2000, 700, 1000, 1000, 500],
},
{
    username: 'merchantOfDeath',
    email: 'tstark@starkindustries.com',
    password: 'pepperPotts123',
    firstName: 'Tony',
    lastName: 'Stark',
    scoreHistory: [3000, 2500, 1000, 3100, 800],
},
{
    username: 'hammerGod',
    email: 'pointBreak@crowmail.com',
    password: 'janeFoster456',
    firstName: 'Thor',
    lastName: 'Odinson',
    scoreHistory: [500, 900, 1100, 2500, 2900],
},

]

export default Data;

我能够做的是对我的数据进行排序，并获得每个玩家的最高得分，并将其从最高到最低排序。但是，我意识到有些球员得分很高，应该多次展示。

import React from 'react';
import { connect } from 'react-redux'

// hard code list of high scores - top 10

const HighScores = (props) => {
    return (
        <div>
            <h1>High Scores</h1>
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Username</th>
                        <th>High Score</th>
                    </tr>
                </thead>
                <tbody>                   
                    {props.user.sort((a, b) => Math.max(...b.scoreHistory) - Math.max(...a.scoreHistory)).map((user, index) => //sort through all players based on their top scores them display them in order top to last
                        <tr key={index}>
                            <th>{index + 1}</th>
                            <td>{user.username}</td>
                            <td>{Math.max(...user.scoreHistory)}</td>
                        </tr>
                    )}
                </tbody>
            </table>

        </div>
    );
}

const mapStateToProps = state => ({
    user: state.users,
    allScores: state.allScores
})

export default connect(mapStateToProps)(HighScores);

Answer 1

您可以采用分阶段的方法，获取所有分数和名称，并对数组进行排序，并获取前十项。

var data = [{ username: 'spidey2016', email: 'webhead@yahoo.com', password: 'maryJane123', firstName: 'Peter', lastName: 'Parker', scoreHistory: [500, 2300, 1000, 900, 3000] }, { username: 'bbanner45', email: 'always_angry@gmail.com', password: 'berttyRoss456', firstName: 'Bruce', lastName: 'Banner', scoreHistory: [1000, 3500, 800, 2000, 3100] }, { username: 'weirdo100', email: 'magic_hands@yahoo.com', password: 'chritinePalmer789', firstName: 'Stephen', lastName: 'Strange', scoreHistory: [2000, 700, 1000, 1000, 500] }, { username: 'merchantOfDeath', email: 'tstark@starkindustries.com', password: 'pepperPotts123', firstName: 'Tony', lastName: 'Stark', scoreHistory: [3000, 2500, 1000, 3100, 800] }, { username: 'hammerGod', email: 'pointBreak@crowmail.com', password: 'janeFoster456', firstName: 'Thor', lastName: 'Odinson', scoreHistory: [500, 900, 1100, 2500, 2900] }],
    top10 = data
        .reduce((r, { username, scoreHistory }) => r.concat(
            scoreHistory.map(score => ({ username, score }))
        ), [])
        .sort(({ score: a }, { score: b }) => b - a)
        .slice(0, 10);

console.log(top10);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

好像是学校的练习。这是您需要实现的步骤：

首先，将玩家得分历史中的每个得分映射到以下对象：

{
    username: String,
    score: Number
}

您可以使用map function
实现此目的然后通过解构数据或使用flat / concat

来展平数组

最后，您可以使用sort来排序最大得分，每个对象还标明执行此操作的玩家的姓名

Answer 3

实现此目标的一种方法是这样的：

首先，您创建一个新数组scores，该数组由（得分，玩家）对组成：

let scores = [];
Data.forEach(entry => {
    entry.scoreHistory.forEach(score => {
      scores.push({score:score, player:entry.username});
    });
});

然后您按分数对这个数组进行降序排序

scores.sort((a, b) => b.score - a.score);

现在您只需要遍历前十名并打印输出：

for (let i = 0; i < 10; i++) {
    console.log(scores[i]);
}

Answer 4

这是您可以执行的操作：

创建一个对象数组，每个{ player: username, score: score }
对数组进行排序并将其切片以找到前5个

const data = [
{
    username: 'spidey2016',
    email: 'webhead@yahoo.com',
    password: 'maryJane123',
    firstName: 'Peter',
    lastName: 'Parker',
    scoreHistory: [500, 2300, 1000, 900, 3000],
},
{
    username: 'bbanner45',
    email: 'always_angry@gmail.com',
    password: 'berttyRoss456',
    firstName: 'Bruce',
    lastName: 'Banner',
    scoreHistory: [1000, 3500, 800, 2000, 3100],
},
{
    username: 'weirdo100',
    email: 'magic_hands@yahoo.com',
    password: 'chritinePalmer789',
    firstName: 'Stephen',
    lastName: 'Strange',
    scoreHistory: [2000, 700, 1000, 1000, 500],
},
{
    username: 'merchantOfDeath',
    email: 'tstark@starkindustries.com',
    password: 'pepperPotts123',
    firstName: 'Tony',
    lastName: 'Stark',
    scoreHistory: [3000, 2500, 1000, 3100, 800],
},
{
    username: 'hammerGod',
    email: 'pointBreak@crowmail.com',
    password: 'janeFoster456',
    firstName: 'Thor',
    lastName: 'Odinson',
    scoreHistory: [500, 900, 1100, 2500, 2900],
},

]

const scores = data.map(player => {
  return player.scoreHistory.map(score => {
    return {
      player: player.username,
      score,
    }
  })
}).flat()

const highestScores = scores.sort((a, b) => b.score - a.score).slice(0, 5)

const list = document.querySelector('.top-scores')

highestScores.forEach(({ player, score }) => {
  const el = document.createElement("li")
  el.innerText = `${player} ${score}`
  list.appendChild(el)
})

<ul class="top-scores">
</ul>

使用JavaScript的十大得分

4 个答案: