javascript - 如何循环遍历 JSON 数组直到满足条件？

Question

刚刚开始学习 JavaScript 并试图找出迭代数组来模拟登录过程的正确方法。

function validateLogin() {
  var userdata = {
    "users": [{
      "username": "james",
      "password": "pass1"
    }, {
      "username": "russel",
      "password": "pass2"
    }, {
      "username": "jane",
      "password": "pass3"
    }, {
      "username": "jeff",
      "password": "pass4"
    }]
  };
  var uname = document.getElementById("username");
  var pword = document.getElementById("password");

  var user = userdata.users;

  for (var item in user) {
    if (user[item].username == uname && user[item].password == pword) {
      alert("Correct Username and Password")
    } else {
      alert("Incorrect Username or Password");
    }
  }
}

问题是它存储所有数据“user[item].username”，而它的目的是存储数组的一部分，例如[0]，然后检查“uname”和“pword”是否相同，如果不继续，直到是的，如果不是，则身份验证详细信息不正确。

我确定我应该做类似 count = user[item].username; 的事情然后 count++ 到下一次迭代？

无论如何我都没有明白!有人可以帮忙吗？

Answer 1

你的循环很好；我怀疑您的代码的真正问题，正如 @squint 提到的，是您将字符串与 DOM 元素进行比较，而不是与这些元素中包含的值(大概)进行比较。

但是，有几种方法可以改进您的循环。首先，您提到如果找到了要查找的内容，您不希望循环继续下去。您可以使用 break statement 来完成此操作:

  for (var item in users) {
    if (users[item].username == uname && users[item].password == pword) {
      break;
    }
  }

当然，这只是让你脱离循环，但不会记录任何有关你如何脱离循环的信息。为此，您可以考虑初始化一个变量来保存您的 user 对象，并在循环之外引用它(请注意，在这里，我已将 userdata.users 保存在名为的变量中users 而不是 user，因为这听起来更好，并且允许我们使用 user 来存储我们正在查找的实际个人用户):

  var users = userdata.users;
  var user;

  for (var item in users) {
    if (users[item].username == uname && users[item].password == pword) {
      user = users[item];
      break;
    }
  }

  if (user) {
    console.log("Welcome " + user.username);
  } else {
    console.log("Invalid username or password");
  }

另请注意，JavaScript for .. in statement在很多方面都不是迭代数组的理想方式。最好用全新的for .. of statement如果可以的话，如果不能的话，一个好的 for 循环:

  var users = userdata.users;
  var user;

  for (var i = 0; i < users.length; i++) {
    if (users[i].username == uname && users[i].password == pword) {
      user = users[i];
      break;
    }
  }

  if (user) {
    console.log("Welcome " + user.username);
  } else {
    console.log("Invalid username or password");
  }

最后，如果您想要真正喜欢并且您正在使用 ES6(JavaScript 的最新稳定版本)，您可以使用全新的 Array.find方法:

var user = userdata.users.find(function (user) {
  return user.username === uname && user.password === pword;
});

function validateLogin() {
  var userdata = {
    "users": [
      {"username": "james", "password": "pass1"},
      {"username": "russel", "password": "pass2"},
      {"username": "jane", "password": "pass3"},
      {"username": "jeff", "password": "pass4"}
    ]
  };

  var uname = document.getElementById("username").value;
  var pword = document.getElementById("password").value;

  var users = userdata.users;
  var user;

  for (var i = 0; i < users.length; i++) {
    if (users[i].username == uname && users[i].password == pword) {
      user = users[i];
      break;
    }
  }

  if (user) {
    console.log("Welcome " + user.username);
  } else {
    console.log("Invalid username or password");
  }

  return false;
}

<form onSubmit="validateLogin()">
  <input type="text" id="username" />
  <input type="password" id="password" />
  <input type="submit" />
</form>