有没有办法在 JavaScript 中使用带有变量的 switch 语句来显示基于另一个变量的文本

Question

我正在尝试获取一个 switch 语句来使用名为“avg”的变量来表示五个成绩的平均值。将五个等级相加得到总分，然后除以 5 得到平均值。像这样：

avg = +grade_one + +grade_two + +grade_three + +grade_four + +grade_five;

开关需要显示五种情况，每个等级范围一种（即 90% 到 100% = A）。以及百分比本身。

我尝试过使用具有数值的案例，例如“案例 1”，然后打印两行文本，但这不起作用。

我应该在切换之前尝试使用 if-else 结构来确定字母中每个成绩百分比的相等值，还是行不通？

这是开关的代码。

switch (avg)
{
case 1:
letter = "A";
per = "90-100";
document.write("Based on your semester average, your grade 
falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 2:
letter = "B";
per = "80-89.9";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 3:
letter = "A";
per = "70-79.9";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 4:
letter = "D";
per = "60-69.9";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);
break;

case 5:
letter = "F";
per = "Below 60%";
document.write("Based on your semester average your grade falls between " + per + "%");
document.write("you earned a " + letter);

default:
document.write("Invalid Entry");
break; 
}  

Answer 1

您不应该为此使用 switch：每种情况的代码都太相似。区别仅在于几个值，您可以将它们存储在数组中。然后在该数组中找到平均值落在哪个段，并从中构建输出。

另外，不要为此使用 document.write 。相反，创建一个包含输出消息的元素（如 div）。

我不知道你的练习的背景是什么，但我想有一些 5 级的输入。将它们加载为数组（而不是 5 个不同的变量），并以通用方式计算平均值（不绑定到 5）。

以下是可运行片段中的一些建议代码：

let thresholds = [100.1, 90, 80, 70, 60, 0];
let inputs = document.querySelectorAll("input");
let output = document.querySelector("div");
let button = document.querySelector("button");

button.addEventListener("click", function () {
    let grades = Array.from(inputs, inp => +inp.value);
    let avg = grades.reduce((a, b) => a + b) / grades.length;
    let i = thresholds.findIndex(min => avg >= min);
    let letter = "-ABCDF"[i];
    let low = thresholds[i];
    let high = thresholds[i - 1] - 0.1;
    let msg = `Based on your semester average, your grade falls between ${low}-${high}%\nYou earned a ${letter}.`;
    output.textContent = msg;
});

Grades:
<ul>
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
<li><input type="number" min="0" max="100" value="80" size="4">
</ul>
<button>Get grade</button>
<div></div>