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

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:

    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";

                    break;

    }

    else{

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

    }

    }

  }

  }

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

  but.addEventListener("click",output);

注意：这不是验证凭据的最佳实践，也避免使用 var，使用 let，const 代替

Answer 2

const accounts = [

  {

    name:"dhanam",

    mail:"[e-mail]"

  },

  {

    name:"alamelu",

    mail:"[e-mail]"

  }

]

function output() {

   const nameNode = document.getElementById("input1")

     const mailNode = document.getElementById("input2")

     const name = nameNode.value

   const mail = mailNode.value

   const found = accounts.find(a => a.name === name && a.mail === mail)

   if (found) {

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

     } else {

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

     }  

}

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

but.addEventListener("click",output);