堆栈内存溢出
  简体   繁体   English

如何将我的 if 语句转换为 for 循环

[英]how to turn my if statements in to a foor loop

 原文  2020-12-15 14:06:42  4   5    javascript/ json/ loops

问题描述

its not really a problem at the moment, its just that im after another solution.目前这并不是真正的问题，只是我在寻求另一种解决方案。 Surely there must be a smarter way for me then to write every student with an if questions as I have done here to get their grades.当然，我必须有一种更聪明的方法来给每个学生写一个 if 问题，就像我在这里所做的那样来获得他们的成绩。

If I want to get the same result but with a for loop?如果我想获得相同的结果但使用 for 循环？ how would I go on doing that?我将如何 go 这样做？ any smart suggestions?有什么明智的建议吗？ 

 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>

Any help is much appreciated!任何帮助深表感谢！

Cheers!干杯! //macgajver //macgajver

5 个解决方案

解决方案1
 2 已采纳  2020-12-15 14:11:45

You want to get that object from array of students whose names matches with the name given in the input.您想从名称与输入中给出的名称匹配的学生数组中获取 object。

  • Store the value of input in variable.将输入的值存储在变量中。
  • Use find() on nameandgrades.students and check if object name property matches which input value.在nameandgrades.students上使用find()并检查 object name属性是否与哪个输入值匹配。
  • After you get that object get its grade and output it.在你得到 object 之后得到它的等级和 output 它。

Some other tips are:其他一些提示是：

  • Declare the html elements in global scope so that you don't get them every time the button is clicked.在全局 scope 中声明 html 元素，这样就不会在每次单击按钮时都得到它们。
  • Use const for the objects and html elements delaration.对对象和 html 元素使用const声明。
  • Before accessing grade check if object is found or not otherwise it will result in an error.在访问grade之前检查是否找到 object 否则将导致错误。 

 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
 0  2020-12-15 14:14:27

You can use forEach to iterate over your students and compare the name with the one from your input.您可以使用forEach遍历您的学生并将名称与您输入的名称进行比较。

if they are equal write out the grade如果他们相等，写出成绩

 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>

Also you can use the old fashioned way and maybe the beginners friendlyst way for(let i = 0; i<array.length; i++)你也可以使用老式的方式，也许是初学者最友好的方式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>

解决方案3
 0  2020-12-15 14:15:36

You can update your getGrade function as follows:您可以按如下方式更新您的getGrade function：

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>

解决方案4
 0  2020-12-15 14:18:10

You can use a for loop and save the index of the found student, or you can use for (var student of nameandgrades.students)您可以使用 for 循环并保存找到的学生的索引，也可以使用for (var student of nameandgrades.students)

Please don't name your variables in non-english names.请不要用非英文名称命名您的变量。 Took me a minute to see that you use "namn" instead of "name" as properties for the name花了我一分钟才看到您使用“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>

解决方案5
 0  2020-12-15 14:20:59

Other answers are great, but thought it nice to add some extra sanity checks, like allowing klara or Klara , and if a name is not found check.其他答案很好，但认为添加一些额外的健全性检查很好，比如允许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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 不能让我的foor循环工作 - Cant get my foor loop working i+=i 如何在 foo 循环中工作？ - how i+=i works in a foor loop? 如何将“for”循环变成“for of”循环？ - How do I turn my "for" loop into a "for of" loop? 使用鼠标循环创建的菜单的onmouseover - onmouseover for menu created with foor loop XSL无法解析foor循环 - XSL unable to parse foor loop 如何使用 Javascript 中的 if 语句修复我的 while 循环 - How to fix my while loop with if statements in Javascript JavaScript, JSON - 如何在特定时间内运行 foo 循环？ - JavaScript, JSON - How Can I run a foor loop a specific ammount of time? 赛普拉斯等待一个元素被加载到一个 foo 循环中 - Cypress wait for an element to be loaded inside a foor loop 与Node js同步循环中的多个请求 - Synchronous Multiple Requests in foor loop with Node js 如何将两个语句转换成三元 - how can I turn two statements into a ternary
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM