如何在对象数组中搜索 - javascript

Question

我在搜索对象数组时遇到问题。基本上我的页面需要做的是使用我输入的信息创建一个新的“客户端”，例如全名、用户名、电子邮件和密码。这些客户端中的每一个都是数组中的对象，如下所示。

var clientlist = [{"username":"John","fullname":"John Doe",
"email":"john.doe@hotmail.com","type":"client","password":"jdoe2"},

这个客户端已经在我的 js 文件中创建了，我需要做的是创建一个新对象以添加到这个具有相同结构的数组中。例如，

var clientlist = [{"username":"Peter","fullname":"Peter Jones",
"email":"peter.jones@hotmail.com","type":"client","password":"pjones1"},

我已经编写了代码，但它不能正常工作，我似乎无法搜索用户名来查看我添加的用户名是否已经存在，这可能是语法错误。我将在下面留下我的完整代码，并提前感谢您的帮助！

var clientlist = [{"username":"John","fullname":"John Doe",
"email":"john.doe@hotmail.com","type":"client","password":"jdoe2"},

var Client = {};

function NewClient(){
    var found;
    var user = $("#username").val();

    for (var i = 0; i < clientlist.length; i++) {
        if (clientlist[i] == user) {
            found = true;
        }else{
            found = false;
        }
    }

    if (found == true){
        $("#msj").html("User already exists!");
    }
    else if(found == false){
        Client["fullname"] = $("#fullname").val();
        Client["username"] = user;
        Client["email"] = $("#email").val();
        Client["type"] = "client";
        Client["password"] = $("#password").val();

        clientlist[clientlist.length] = Client;

        $("#msj").html("New client has been created");
    }
}

Answer 1

for 循环存在几个问题。

for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i] == user) {
    found = true;
}else{
    found = false;
}

那么我们在处理什么？ clientlist 是数组，所以 clientlist[i] 是该数组的一个元素...恰好是一个对象。

user 值是一个字符串，因此无法将字符串等同于 if 中的对象。

更正需要检查对象中的正确属性值：

if (clientlist[i].username == user) {

下一个问题是即使找到匹配项，循环也会继续进行。随着循环的继续，found 将针对每次迭代进行更新。因此，found 将仅根据数组中的最后一个对象设置，无论是否已经确定匹配。

要纠正这个问题，可以将 for 循环放入一个函数中，以便在找到匹配项时通过返回 true 来中断循环。替代方法是使用其他数组方法，如Array.prototype.some()，它根据回调中的条件返回一个布尔值。或者，如果找到匹配项，则使用 break 以防止循环继续。

break 将是最简单的代码插件，因此 final 将是

for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i].username == user) {
    found = true;
    break;// quit loop since we found a match
}else{
    found = false;
}

Answer 2

你需要改变这个

for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i] == user) {
        found = true;
    }else{
       found = false;
    }
}

到

var found = false;
for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i].username == user) {
        found = true;
        break;
    }
}

Answer 3

您可以为此使用Array#some：它允许您对数组中的每个条目运行回调并确定它是否匹配条件。 some 停止并在您第一次从回调返回真值时返回 true，如果没有调用回调返回真值，则返回 false。

所以：

if (clientlist.some(function(entry) { return entry.username === user; })) {
    $("#msj").html("User already exists");
} else {
    // ...add the user...
}

使用 ES2015+ 箭头函数更简洁：

if (clientlist.some(entry => entry.username === user)) {
    $("#msj").html("User already exists");
} else {
    // ...add the user...
}

还请注意，您不想每次都重复使用相同的Client 对象，因为在下一次添加时，您只需更改现有对象的属性。相反，每次都创建一个新对象：

clientlist.push({
    username: user,
    fullname: $("#fullname").val(),
    email: $("#email").val(),
    type: "client",
    password: $("#password").val()
});

var clientlist = [{"username":"John","fullname":"John Doe",
"email":"john.doe@hotmail.com","type":"client","password":"jdoe2"}];

function NewClient() {
    var user = $("#username").val();
    if (clientlist.some(function(entry) { return entry.username === user; })) {
        $("#msj").html("User already exists");
    } else {
      clientlist.push({
        username: user,
        fullname: $("#fullname").val(),
        email: $("#email").val(),
        type: "client",
        password: $("#password").val()
      });
      $("#username, #fullname, #email, #password").val("");
      $("#msj").html("New client has been created");
    }
}
$("#btn").on("click", NewClient);

<div>
  <label>
    Username: <input type="text" id="username">
  </label>
</div>
<div>
  <label>
    Fullname: <input type="text" id="fullname">
  </label>
</div>
<div>
  <label>
    Email: <input type="text" id="email">
  </label>
</div>
<div>
  <label>
    Password: <input type="password" id="password">
  </label>
</div>
<div><input type="button" id="btn" value="Add"></div>
<div id="msj"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>