如何将我的 if 语句变成 for 循环答案

【问题标题】：how to turn my if statements in to a foor loop如何将我的 if 语句变成 for 循环
【发布时间】：2021-03-26 04:26:15
【问题描述】：

目前这不是真正的问题，只是我在寻求另一种解决方案。当然，我必须有一种更聪明的方法来给每个学生写一个 if 问题，就像我在这里所做的那样来获得他们的成绩。

如果我想获得相同的结果但使用 for 循环？我将如何继续这样做？有什么明智的建议吗？

var nameandgrades = {
    "students": [{
            "namn": "Klara",
            "grade": "A"
        },
        {
            "namn": "Andrea",
            "grade": "B"
        },
        {
            "namn": "Emil",
            "grade": "C"
        }
    ]
};

var klara = "Klara";
var andrea = "Andrea";
var emil = "Emil";

function getGrade() {
    var studentname = document.getElementById("studentname").value;

    if (studentname == klara) {
        document.getElementById("output").innerHTML = nameandgrades.students[0].grade + ' ';
    }

    if (studentname == andrea) {
        document.getElementById("output").innerHTML = nameandgrades.students[1].grade + ' ';
    }

    if (studentname == emil) {
        document.getElementById("output").innerHTML = nameandgrades.students[1].grade + ' ';
    }
}

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

<head>
    <meta charset="utf-8">
    <title>json javascript</title>
</head>

<body>
    <h1> Write the students name and see what grade he/she has! </h1>
    <form>
    
        <!-- textbox -->
        <input type="text" id="studentname" value="Klara" placeholder="name of the student" />
        <br />
        <br>

        <!-- mouseclick -->
        <input type="button" value="visa" onclick="getGrade();" />
        <br />
        <br>

    </form>

    <div id="output"> </div>


</body>

</html>

非常感谢任何帮助！

干杯！ //macgajver

【问题讨论】：

标签： javascript json loops

【解决方案1】：

您想从名称与输入中给出的名称匹配的学生数组中获取该对象。

将输入值存储在变量中。
在nameandgrades.students 上使用find() 并检查对象name 属性是否与哪个输入值匹配。
获得该对象后，获取其等级并输出。

其他一些提示是：

在全局范围内声明 html 元素，这样就不会在每次单击按钮时都得到它们。
使用const 声明对象和html 元素。
在访问grade之前检查是否找到对象，否则会导致错误。

const input = document.getElementById("studentname");
const output = document.getElementById("output")
const nameandgrades = { "students": [{ "name": "Klara", "grade": "A" }, { "name": "Andrea", "grade": "B" }, { "name": "Emil", "grade": "C" } ] };
function showGrade() {
  let name = input.value
  let object = nameandgrades.students.find(x => x.name === name);
  let grade;
  if(object){
    grade = object.grade
  }
  output.innerHTML = grade || "Sorry student not found"
}

<h1> Write the students name and see what grade he/she has! </h1>
<form>


    <!-- textbox -->
    <input type="text" id="studentname" value="Klara" placeholder="name of the student" />
    <br />
    <br>

    <!-- mouseclick -->
    <input type="button" value="visa" onclick="showGrade();" />
    <br />
    <br>

</form>

<div id="output"> </div>

【讨论】：

【解决方案2】：

您可以按如下方式更新您的getGrade 函数：

function getGrade() {
    var studentname = document.getElementById("studentname").value;

    for (var student of nameandgrades.students) {
      if (studentname == student.name) {
        document.getElementById("output").innerHTML = student.grade + ' ';
        return;
      }
    }
    
    document.getElementById("output").innerHTML = 'Student not found!';
}

var nameandgrades = {
    "students": [{
            "name": "Klara",
            "grade": "A"
        },
        {
            "name": "Andrea",
            "grade": "B"
        },
        {
            "name": "Emil",
            "grade": "C"
        }
    ]
};

var klara = "Klara";
var andrea = "Andrea";
var emil = "Emil";

function getGrade() {
    var studentname = document.getElementById("studentname").value;

    for (var student of nameandgrades.students) {
      if (studentname == student.name) {
        document.getElementById("output").innerHTML = student.grade + ' ';
        return;
      }
    }
    
    document.getElementById("output").innerHTML = 'Student not found!';
}

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

<head>
    <meta charset="utf-8">
    <title>json javascript</title>
</head>

<body>
    <h1> Write the students name and see what grade he/she has! </h1>
    <form>
    
        <!-- textbox -->
        <input type="text" id="studentname" value="Klara" placeholder="name of the student" />
        <br />
        <br>

        <!-- mouseclick -->
        <input type="button" value="visa" onclick="getGrade();" />
        <br />
        <br>

    </form>

    <div id="output"> </div>


</body>

</html>

【讨论】：

您可以删除学生姓名的声明。

【解决方案3】：

您可以使用for循环并保存找到的学生的索引，也可以使用for (var student of nameandgrades.students)

请不要用非英文名称命名您的变量。花了我一分钟的时间才发现您使用“namn”而不是“name”作为名称的属性

var nameandgrades = {
    "students": [{
            "namn": "Klara",
            "grade": "A"
        },
        {
            "namn": "Andrea",
            "grade": "B"
        },
        {
            "namn": "Emil",
            "grade": "C"
        }
    ]
};

var klara = "Klara";
var andrea = "Andrea";
var emil = "Emil";

function getGrade() {
    var studentname = document.getElementById("studentname").value;
    
    
    for (var student of nameandgrades.students) {
    console.log(student, studentname)
      if (student.namn == studentname) {
        document.getElementById("output").innerHTML = student.grade + ' ';
        break;
      }    
    }
}

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

<head>
    <meta charset="utf-8">
    <title>json javascript</title>
</head>

<body>
    <h1> Write the students name and see what grade he/she has! </h1>
    <form>
    
        <!-- textbox -->
        <input type="text" id="studentname" value="Klara" placeholder="name of the student" />
        <br />
        <br>

        <!-- mouseclick -->
        <input type="button" value="visa" onclick="getGrade();" />
        <br />
        <br>

    </form>

    <div id="output"> </div>


</body>

</html>

【讨论】：

【解决方案4】：

其他答案很好，但认为添加一些额外的健全性检查很好，例如允许klara 或Klara，如果找不到名称，请检查。

var nameandgrades = {
    "students": [{
        "namn": "Klara",
            "grade": "A"
        },
        {
            "namn": "Andrea",
            "grade": "B"
        },
        {
            "namn": "Emil",
            "grade": "C"
        }
    ]
};


function getGrade() {
  const name = document.getElementById("studentname")
    .value.toLowerCase();
  const student = nameandgrades.students
    .find(x => x.namn.toLowerCase() === name);
  document.getElementById('output').innerHTML = student
    ? student.grade
    : 'Student not found';
}

<h1> Write the students name and see what grade he/she has! </h1>
<form>
    <!-- textbox -->
    <input type="text" id="studentname" value="Klara" placeholder="name of the student" />
    <br />
    <br>
    <!-- mouseclick -->
    <input type="button" value="visa" onclick="getGrade();" />
    <br />
    <br>
</form>

<div id="output"> </div>

【讨论】：

【解决方案5】：

您可以使用forEach 遍历您的学生，并将姓名与您输入的姓名进行比较。

如果他们相等，写出成绩

var nameandgrades = {
    "students": [{
            "namn": "Klara",
            "grade": "A"
        },
        {
            "namn": "Andrea",
            "grade": "B"
        },
        {
            "namn": "Emil",
            "grade": "C"
        }
    ]
};

var klara = "Klara";
var andrea = "Andrea";
var emil = "Emil";

function getGrade() {


    var studentname = document.getElementById("studentname").value;

    nameandgrades.students.forEach((stud)=>{
       if(studentname === stud.namn){
        document.getElementById("output").innerHTML = stud.grade + ' ';
       }
    })
}

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

<head>
    <meta charset="utf-8">
    <title>json javascript</title>
</head>

<body>
    <h1> Write the students name and see what grade he/she has! </h1>
    <form>
    
        <!-- textbox -->
        <input type="text" id="studentname" value="Klara" placeholder="name of the student" />
        <br />
        <br>

        <!-- mouseclick -->
        <input type="button" value="visa" onclick="getGrade();" />
        <br />
        <br>

    </form>

    <div id="output"> </div>


</body>

</html>

您也可以使用老式方式，也许是对初学者最友好的方式for(let i = 0; i<array.length; i++)

var nameandgrades = {
    "students": [{
            "namn": "Klara",
            "grade": "A"
        },
        {
            "namn": "Andrea",
            "grade": "B"
        },
        {
            "namn": "Emil",
            "grade": "C"
        }
    ]
};

var klara = "Klara";
var andrea = "Andrea";
var emil = "Emil";

function getGrade() {


    var studentname = document.getElementById("studentname").value;

    for (let i = 0; i <nameandgrades.students.length; i++){
       if(studentname === nameandgrades.students[i].namn){
       document.getElementById("output").innerHTML = nameandgrades.students[i].grade + ' ';
       }
    }
}

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

<head>
    <meta charset="utf-8">
    <title>json javascript</title>
</head>

<body>
    <h1> Write the students name and see what grade he/she has! </h1>
    <form>
    
        <!-- textbox -->
        <input type="text" id="studentname" value="Klara" placeholder="name of the student" />
        <br />
        <br>

        <!-- mouseclick -->
        <input type="button" value="visa" onclick="getGrade();" />
        <br />
        <br>

    </form>

    <div id="output"> </div>


</body>

</html>

【讨论】：