javascript - 使用 JavaScript 的前 10 个分数

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