开发者问题收集

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

2016-05-29
593

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

var clientlist = [{"username":"John","fullname":"John Doe",
"email":"[email protected]","type":"client","password":"jdoe2"},

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

var clientlist = [{"username":"Peter","fullname":"Peter Jones",
"email":"[email protected]","type":"client","password":"pjones1"},

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

var clientlist = [{"username":"John","fullname":"John Doe",
"email":"[email protected]","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");
    }
}
3个回答

您的 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 最容易插入到代码中,因此最终将是

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;
}
charlietfl
2016-05-29

您需要将此

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;
    }
}
Alastair Brown
2016-05-29

您可以使用 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":"[email protected]","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>
T.J. Crowder
2017-05-08