如何比较两个不同长度的物体？

Question

我试图创建一个登录功能，当用户输入vaild名称和密码时，它将打印“欢迎用户”或“无效用户”。

在我的代码中，它接受一个用户名和密码，并显示另一个用户名和密码无效...我不明白为什么它像这样显示...

法典：

<script>

     let userName=document.getElementById("input1");

     let mailId=document.getElementById("input2");

     var out=[{Name:"dhanam",mail:"[e-mail]"}, 

              {Name:"alamelu",mail:"[e-mail]"}];

     function input()

     {

         var input=userName.value;

         var output=mailId.value;

         var created=[{Name:input,mail:output}];

         return created

     }

     function output()

     {

          var inp=input();

         for(var i=0;i<inp.length;i++)

         {

             for(var j=0;j<out.length;j++)

             {

                  console.log(inp[i].Name+inp[i].mail);

                  console.log(out[j].Name+out[j].mail);

              if((inp[i].Name== out[j].Name)&& 

                  (inp[i].mail==out[j].mail))

               {

              document.getElementById("out1").innerText="welcome

                                                         user";

                }

             else{

               document.getElementById("out1").innerText="Invalid 

                                                          user";

                }

             }

           }

       }

      var but=document.getElementById("out");

      but.addEventListener("click",output);

  </script>

在这里找到小提琴：

https://jsfiddle.net/xp1Lrbdh/#&togetherjs=d0wTznLFgu

Answer 1

The issue is because of the iteration you are doing even after finding if entered user is valid user. In simple terms, putting a break statement solves your problem.See the snippet below:&nbsp; &nbsp; let userName=document.getElementById("input1");&nbsp; &nbsp; let mailId=document.getElementById("input2");&nbsp; &nbsp; var out=[{Name:"dhanam",mail:"[e-mail]"},&nbsp;&nbsp; &nbsp; {Name:"alamelu",mail:"[e-mail]"}];&nbsp; &nbsp; function input()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var input=userName.value;&nbsp; &nbsp; &nbsp; &nbsp; var output=mailId.value;&nbsp; &nbsp; &nbsp; &nbsp; var created=[{Name:input,mail:output}];&nbsp; &nbsp; &nbsp; &nbsp; return created&nbsp; &nbsp; }&nbsp; &nbsp; function output()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var inp=input();&nbsp; &nbsp; &nbsp; &nbsp; for(var i=0;i<inp.length;i++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var j=0;j<out.length;j++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(inp[i].Name, inp[i].mail);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(out[j].Name, out[j].mail);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if((inp[i].Name== out[j].Name)&&(inp[i].mail==out[j].mail))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("out1").innerText="welcome user";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("out1").innerText="Invalid user";&nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; }&nbsp; var but=document.getElementById("out");&nbsp; but.addEventListener("click",output);注意：这不是验证凭据的最佳实践，也避免使用 var，使用 let，const 代替

Answer 2

const accounts = [&nbsp; {&nbsp; &nbsp; name:"dhanam",&nbsp; &nbsp; mail:"[e-mail]"&nbsp; },&nbsp; {&nbsp; &nbsp; name:"alamelu",&nbsp; &nbsp; mail:"[e-mail]"&nbsp; }]function output() {&nbsp; &nbsp;const nameNode = document.getElementById("input1")&nbsp; &nbsp; &nbsp;const mailNode = document.getElementById("input2")&nbsp; &nbsp; &nbsp;const name = nameNode.value&nbsp; &nbsp;const mail = mailNode.value&nbsp; &nbsp;const found = accounts.find(a => a.name === name && a.mail === mail)&nbsp; &nbsp;if (found) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("out1").innerText="welcome user";&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("out1").innerText="Invalid user";&nbsp; &nbsp; &nbsp;}&nbsp;&nbsp;}var but=document.getElementById("out");but.addEventListener("click",output);