Javascript 对我编程的数组进行排序

async function fetchMatchData(matchId) {
  const matchUrl = `https://api.henrikdev.xyz/valorant/v2/match/${matchId}`;
  const response = await fetch(matchUrl);
  const matchData = await response.json();
  return matchData.data;
}

async function fetchAndDisplayMatches() {
  const historyUrl = "https://api.henrikdev.xyz/valorant/v1/premier/70921669-f22e-4a59-9e26-f19664a1fa20/history";
  const response = await fetch(historyUrl);
  const historyData = await response.json();
  const leagueMatches = historyData.data.league_matches;

  // Sort the matches array based on points_before in descending order
  leagueMatches.sort((a, b) => b.points_before - a.points_before);

  const matchHistoryElement = document.getElementById("match-history");

  const resultPromises = leagueMatches.map(match => fetchMatchData(match.id));
  (await Promise.all(resultPromises)).forEach((matchData, i) => {

    let match = leagueMatches[i];
    const redTeamName = matchData.teams.red.roster.name;
    const blueTeamName = matchData.teams.blue.roster.name;
    const isJstCarry = redTeamName === "JstCarry";
    const displayTeamName = isJstCarry ? blueTeamName : redTeamName;

    const redRoundsWon = matchData.teams.red.rounds_won;
    const redRoundsLost = matchData.teams.red.rounds_lost;
    const blueRoundsWon = matchData.teams.blue.rounds_won;
    const blueRoundsLost = matchData.teams.blue.rounds_lost;
    const roundsWon = isJstCarry ? redRoundsWon : blueRoundsWon;
    const roundsLost = isJstCarry ? redRoundsLost : blueRoundsLost;
    const matchScore = `${roundsWon} : ${roundsLost}`;

    const matchBox = document.createElement("div");
    matchBox.classList.add("match-box");

    if ((isJstCarry && redRoundsWon > redRoundsLost) || (!isJstCarry && blueRoundsWon > blueRoundsLost)) {
      const victoryDefeatElement = document.createElement("div");
      victoryDefeatElement.classList.add("victory-defeat");
      victoryDefeatElement.textContent = "VICTORY";
      matchBox.appendChild(victoryDefeatElement);
    } else {
      const victoryDefeatElement = document.createElement("div");
      victoryDefeatElement.classList.add("victory-defeat");
      victoryDefeatElement.textContent = "DEFEAT";
      matchBox.appendChild(victoryDefeatElement);
    }

    const jstCarryTeamNameElement = document.createElement("div");
    jstCarryTeamNameElement.classList.add("team-name", "left");
    jstCarryTeamNameElement.textContent = "JstCarry";

    const displayTeamNameElement = document.createElement("div");
    displayTeamNameElement.classList.add("team-name", "right");
    displayTeamNameElement.textContent = displayTeamName;

    const scoreElement = document.createElement("div");
    scoreElement.classList.add("score");
    scoreElement.textContent = matchScore;

    const pointsBefore = match.points_before; // Get the points_after value

    const pointsAfter = match.points_after; // Get the points_after value
    const pointsElement = document.createElement("div");
    pointsElement.classList.add("points");
    pointsElement.textContent = `${pointsBefore} ➜ ${pointsAfter} points`;

    matchBox.appendChild(jstCarryTeamNameElement);
    matchBox.appendChild(scoreElement);

    matchBox.appendChild(displayTeamNameElement);

    matchHistoryElement.appendChild(matchBox);
    scoreElement.appendChild(pointsElement); // Add the points element to the match box
  });
}

fetchAndDisplayMatches();

body {
  min-width: 540px;
  font-family: 'Montserrat', sans-serif;
}

.match-box {
  background-color: #1B1C1E;
  border-radius: 25px;
  padding: 0;
  margin: 10px 0;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: white;
  padding: 0 20px;
  position: relative;
}

.victory-defeat {
  position: absolute;
  opacity: 0.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 25px;
}

.team-name {
  text-align: left;
}

.team-name.left {
  flex: 1;
}

.team-name.right {
  text-align: right;
  flex: 1;
}

.score {
  font-weight: bold;
  font-size: 50px;
  text-align: center;
  flex: 1;
}

.points {
  position: flex;
  text-align: center;
  font-size: 18px;
  opacity: 0.7;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Valorant Match History</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
</head>

<body>
  <div id="match-history"></div>

</body>

</html>