Question

我需要显示一个阵列中最高的测试分数，以及从另一个阵列中获得该分数的人。这是到目前为止的代码：

var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88, 98, 77, 88];
var textDisplay;

var $ = function(id) {
  return document.getElementById(id);
}

var listArray = function() {
  $("results").value = "";
  for (var i = 0; i < names.length; i++) {
    $("results").value += names[i] + ", " + scores[i] + "\n";
  }
}

var showBest = function() {
  $("results").value = "";
  $("results").value += "High Score = " + Math.max.apply(null, scores) + "\n";
  $("results").value += "The highest scoring student is = " //here is where I need help
}
var addElement = function() {
  $("results").value = "";
  // get user entries
  var name = $("name").value;
  var score = parseInt($("score").value);

  // check entries for validity
  if (name == "" || isNaN(score) || score < 0 || score > 100) {
    alert("You must enter a name and a valid score");
  } else {
    names[names.length] = $("name").value;
    scores[scores.length] = parseInt($("score").value);
    $("name").value = "";
    $("score").value = "";
  }
  $("name").focus();
}
window.onload = function() {
  $("list_array").onclick = listArray;
  $("add").onclick = addElement;
  $("show_best").onclick = showBest;
  $("name").focus();
}

<section>
  <label for="name">Name:</label>
  <input type="text" id="name"><br>

  <label for="score">Score:</label>
  <input type="text" id="score"><br>

  <label>&nbsp;</label>
  <input type="button" id="add" value="Add to Array"><br>

  <h2>Results</h2>
  <textarea id="results">&nbsp;</textarea><br>
  <input type="button" id="list_array" value="List Array"><br>
  <input type="button" id="show_best" value="Show Best Score"><br>
</section>

有什么方法可以合并数组，使它们彼此关联？即使那样，我也不知道如何与分数分开显示学生。理想情况下，点击“ show_best”按钮将显示最高分数和获得该分数的学生的姓名。

Answer 1

尝试一下：

var showBest = function() {
  const max = Math.max.apply(null, scores);
  $("results").value = "";
  $("results").value += "High Score = " + max + "\n";
  $("results").value += "The highest scoring student is = " + names[scores.indexOf(max)] //here is where I need help
}

Answer 2

这是使用您的数据结构的解决方案：

var names = ["Ben", "Joel", "Judy", "Anne"];
var scores = [88, 98, 77, 88];
var textDisplay;

var $ = function(id) {
  return document.getElementById(id);
}

var listArray = function() {
  $("results").value = "";
  for (var i = 0; i < names.length; i++) {
    $("results").value += names[i] + ", " + scores[i] + "\n";
  }
}

var showBest = function() {
  $("results").value = "";
  var max = Math.max.apply(null, scores);
  $("results").value += "High Score = " + max + "\n";
  $("results").value += "The highest scoring student is = " + names[scores.indexOf(max)];
}
var addElement = function() {
  $("results").value = "";
  // get user entries
  var name = $("name").value;
  var score = parseInt($("score").value);

  // check entries for validity
  if (name == "" || isNaN(score) || score < 0 || score > 100) {
    alert("You must enter a name and a valid score");
  } else {
    names[names.length] = $("name").value;
    scores[scores.length] = parseInt($("score").value);
    $("name").value = "";
    $("score").value = "";
  }
  $("name").focus();
}
window.onload = function() {
  $("list_array").onclick = listArray;
  $("add").onclick = addElement;
  $("show_best").onclick = showBest;
  $("name").focus();
}

<!DOCTYPE html>
    <html>
    <head>
<meta charset="utf-8">
<title>Test Score Array</title>
<link rel="stylesheet" href="styles.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<script src="test_scores.js"></script>
</head>
<body>
<section>

<label for="name">Name:</label>
<input type="text" id="name"><br>

<label for="score">Score:</label>
<input type="text" id="score"><br>

<label>&nbsp;</label>
<input type="button" id="add" value="Add to Array"><br>

<h2>Results</h2>
<textarea id="results">&nbsp;</textarea><br>
<input type="button" id="list_array" value="List Array"><br>
<input type="button" id="show_best" value="Show Best Score"><br>
</section>
</body>
</html>

我建议您按照注释中的建议，以以下形式传递给对象结构：

{ 
  name: "example"
  score: 10
}

var testResults = [
  {
    name: "Ben", 
    score: 88
  },{
    name: "Joel", 
    score: 98
  },{
    name: "Judy", 
    score: 77
  },{
    name: "Anne", 
    score: 88
  }
];
    
var textDisplay;

var $ = function(id) {
  return document.getElementById(id);
}

var listArray = function() {
  $("results").value = "";
  for (var i = 0; i < testResults.length; i++) {
    $("results").value += testResults[i].name + ", " + testResults[i].score + "\n";
  }
}

var showBest = function() {
  $("results").value = "";
  var scores = testResults.map(function(res) { return res.score;});
  var max = Math.max.apply(null, scores)
  var name = testResults.filter(function(res) { return res.score === max;}).pop().name;
  ;
  $("results").value += "High Score = " + max + "\n";
  $("results").value += "The highest scoring student is = " + name;
}
var addElement = function() {
  $("results").value = "";
  // get user entries
  var name = $("name").value;
  var score = parseInt($("score").value);

  // check entries for validity
  if (name == "" || isNaN(score) || score < 0 || score > 100) {
    alert("You must enter a name and a valid score");
  } else {
    testResults.push({
      name: $("name").value,
      score: parseInt($("score").value)
    });
    $("name").value = "";
    $("score").value = "";
  }
  $("name").focus();
}
window.onload = function() {
  $("list_array").onclick = listArray;
  $("add").onclick = addElement;
  $("show_best").onclick = showBest;
  $("name").focus();
}

<!DOCTYPE html>
    <html>
    <head>
<meta charset="utf-8">
<title>Test Score Array</title>
<link rel="stylesheet" href="styles.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<script src="test_scores.js"></script>
</head>
<body>
<section>

<label for="name">Name:</label>
<input type="text" id="name"><br>

<label for="score">Score:</label>
<input type="text" id="score"><br>

<label>&nbsp;</label>
<input type="button" id="add" value="Add to Array"><br>

<h2>Results</h2>
<textarea id="results">&nbsp;</textarea><br>
<input type="button" id="list_array" value="List Array"><br>
<input type="button" id="show_best" value="Show Best Score"><br>
</section>
</body>
</html>

Answer 3

以下是如何组合两个数组并找到分数最高的学生的示例：

var scores = [
  {name: "ben", score: 88},
  {name: "Joel", score: 98},
  {name: "Judy", score: 77},
  {name: "Anne", score: 88}
];

var getHighScoreStudent = function(scores) {
  return scores.reduce(function(acc, item) {
    if (item.score > acc.score) {
      return item;
    } else {
      return acc;
    }
  });
};

var ans = getHighScoreStudent(scores);
console.log(ans);

显示来自两个不同数组的两个值

3 个答案: