如何在对象数组中搜索 - javascript
我在对象数组中搜索时遇到问题。基本上,我的页面需要做的是使用我输入的信息(例如全名、用户名、电子邮件和密码)创建一个新的“客户”。正如您在下面看到的,这些客户中的每一个都是数组中的对象。
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");
}
}
您的
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;
}
您需要将此
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;
}
}
您可以使用
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>