javascript - 如果具有相同属性值的对象已存在，则插入时跳过

标签 javascript object for-loop

所以，我认为这应该很容易，但我已经研究了几个小时，但无法找到解决方案。

我创建了一个注册；注册按钮有一个函数，它获取电子邮件地址的值并在所有对象上运行 for 循环以检查该值是否已存在。如果它存在，它应该说“你已经有一个帐户”并停止，如果它不存在，它应该继续并将数组插入对象中。

但是，它目前会检查每个数组元素，而不是仅检查键入的值。

代码如下:

let usersObj = [
{
    firstName: "James",
    age: 22,
    username: "James@gmail.com",
    password: "codity"
},
{
    firstName: "Ellen",
    age: 32,
    username: "Ellen@gmail.com",
    password: "laura" 
},
{
    firstName: "Lynn",
    age: 16,
    username: "Lynn@gmail.com",
    password: "chicken"   
},

];

$('#signUpSubmitBtn').on('click', function() {
    getUserSignUpData();
})
;
function getUserSignUpData() {
    let signUserName = $('#signUserName').val()
    let signUserAge = $('#signUserAge').val()
    let signUserEmail = $('#signUserEmail').val()
    let signUserPassword = $('#signUserPassword').val()

    for(i = 0; i < usersObj.length; i++) {
       if(signUserEmail == usersObj[i].username) {
        console.log('You already have an account!')
       } else{
        usersObj.push(
            {firstName: signUserName, age: signUserAge, username: signUserEmail, password: signUserPassword});
        console.log(usersObj);
       }


// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );

let usersObj = [
    {
        firstName: "James",
        age: 22,
        username: "James@gmail.com",
        password: "codity"
    },
    {
        firstName: "Ellen",
        age: 32,
        username: "Ellen@gmail.com",
        password: "laura" 
    },
    {
        firstName: "Lynn",
        age: 16,
        username: "Lynn@gmail.com",
        password: "chicken"   
    },
];

console.log(usersObj)

// Log in

$('#loginSubmitBtn').on('click', function() {
    getUserLogin();
});


function getUserLogin() {
let username = $('#userEmail').val()
let password = $('#userPassword').val()

for(i = 0; i < usersObj.length; i++) {
    if(username == usersObj[i].username && password == usersObj[i].password) {
        console.log("Hi " + usersObj[i].firstName + ',' + ' You have succesfully logged in!');
        return
    } else if(username == usersObj[i].username && password !== usersObj[i].password) {
           console.log('Invalid user information');
           $('#loginErrorText').text('Invalid user information');
           return
           };
  }
  console.log("You don't have an account.");
  $('#loginErrorText').text("You don't have an account.");
};

// END Log in

// Sign Up

$('#signUpSubmitBtn').on('click', function() {
    getUserSignUpData();
});

function getUserSignUpData() {
    let signUserName = $('#signUserName').val()
    let signUserAge = $('#signUserAge').val()
    let signUserEmail = $('#signUserEmail').val()
    let signUserPassword = $('#signUserPassword').val()
    

    for(i = 0; i < usersObj.length; i++) {
       if(signUserEmail == usersObj[i].username) {
        console.log('You already have an account!');
       } else{
        usersObj.push(
            {firstName: signUserName, age: signUserAge, username: signUserEmail, password: signUserPassword});
        console.log(usersObj)
       };
    } ;
};



// console.log('You already have an account!');
//         $('#existingEmailWarningText').text('Account already exists!')


// Show / Hide Forms 

logInForm
signupForm

// Btn:
loginRef
signupRef

$('#logInForm').hide();

$('#loginRef').on('click', function() {
  $('#logInForm').show();
  $('#signupForm').hide();
});

$('#signupRef').on('click', function() {
    $('#logInForm').hide();
    $('#signupForm').show();
  });









// The END
});
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">

    <!-- Link to style.css sheet -->
    <link rel="stylesheet" href="style.css">

    <title>Hello, world!</title>
</head>

<body>

    <section class="mt-4">
        <div class="container">
            <div class="jumbotron">
                <div>
                    <h3 class="text-primary">
                        Login
                    </h3>
                </div>
            </div>
        </div>
    </section>

    <section class="text-center">



        <div class="container">
            <!-- ROW 1 -->
            <div class="row">
                <!-- COL 1 -->
                <div class="col">

                </div>
                <!-- COL 2 -->
                <div class="col">
                    <div id="logInForm">
                        <h3>Log in</h3>
                        <hr>
                        <form action="">
                            <!-- User Email -->
                            <div class="form-group">
                                <label for="userEmail">Your email</label>
                                <input id="userEmail" class="form-control" type="email">
                            </div>
                            <!-- User Password -->
                            <div class="form-group">
                                <label for="userPassword">Your password</label>
                                <input id="userPassword" class="form-control" type="password">
                            </div>
                            <!-- Login button -->
                            <div class="form-group">
                                <button type="button" id="loginSubmitBtn" class="btn btn-primary form-control">Login</button>
                            </div>
                            <span class="text-danger mt-1" id=""><small id="loginErrorText"></small></span>
                            <small class="d-block">No account? <a id="signupRef" href="#">Signup Now</a></small>
                        </form>
                    </div>
                </div>
                <!-- COL 3 -->
                <div class="col">

                </div>
            </div>

            <!-- ROW 2 -->
            <div class="row">
                <!-- COL 1 -->
                <div class="col">

                </div>
                <!-- COL 2 -->
                <div class="col">
                    <div id="signupForm">
                        <h3>Sign up</h3>
                        <hr>
                        <form action="">
                            <!-- User name -->
                            <div class="form-group">
                                <label for="signUserName">Your name</label>
                                <input id="signUserName" class="form-control" type="text">
                            </div>
                            <!-- User age -->
                            <div class="form-group">
                                <label for="signUserAge">Your birth date</label>
                                <input id="signUserAge" class="form-control" type="date">
                            </div>
                            <!-- User Email -->
                            <div class="form-group">
                                <label for="signUserEmail">Your email</label>
                                <input id="signUserEmail" class="form-control" type="email">
                                <span class="text-danger" id=""><small id="existingEmailWarningText"></small></span>
                            </div>
                            <!-- User Password -->
                            <div class="form-group">
                                <label for="signUserPassword">Your password</label>
                                <input id="signUserPassword" class="form-control" type="password">
                            </div>
                            <!-- Login button -->
                            <div class="form-group">
                                <button type="button" id="signUpSubmitBtn" class="btn btn-primary form-control">Sign up</button>
                            </div>
                            <small>Already have an account? <a id="loginRef" href="#">Log in</a></small>
                        </form>
                    </div>
                </div>
                <!-- COL 3 -->
                <div class="col">

                </div>
            </div>
        </div>

    </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>

    <!-- Link to function.js sheet -->
    <script src="function.js"></script>
</body>

</html>

最佳答案

您的 for(... 循环应遍历您的帐户数组以检查目标电子邮件是否存在，然后之后(如果不存在重复项)将对象插入数组中。

所以，你的代码宁愿看起来像:

let duplicateExists = false
for(i = 0; i < usersObj.length; i++) {
       if(signUserEmail == usersObj[i].username) {
         duplicateExists = true
         break
       }
}
if(!duplicateExists) usersObj.push({firstName: signUserName, age: signUserAge, username: signUserEmail, password: signUserPassword})

但是，我建议采用相反的方式 - 使用 Array.prototype.some() (检查某些条目是否有重复的用户名)和 shortcircuited condition check在将表单数据插入结果数组之前:

const usersObj = [{firstName:"James",age:22,username:"James@gmail.com",password:"codity"},{firstName:"Ellen",age:32,username:"Ellen@gmail.com",password:"laura"},{firstName:"Lynn",age:16,username:"Lynn@gmail.com",password:"chicken"}],
      dup = {firstName: 'Bill', age:48, username: 'Ellen@gmail.com', password: 'password'},
      nodup = {firstName: 'Bill', age: 48, username: 'Bill@gmail.com', password: 'password'},
      result = []

      const getUserSignUpData = (signupUserData) => {
        !usersObj.some(({username}) => 
          username == signupUserData.username) && result.push(signupUserData)
      }
      
getUserSignUpData(dup) // no entries are inserted due to duplicate username
getUserSignUpData(nodup) // nodup object is inserted as username is unique

console.log(result)
.as-console-wrapper{min-height:100%;}

<小时/>

关于javascript - 如果具有相同属性值的对象已存在，则插入时跳过，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60907670/

上一篇：javascript - Reactjs 中是否尊重多个 setState() 的顺序？

下一篇：javascript - 如何在 React Native View 中加载 <Script>

相关文章：

javascript - 为什么将数字设置为对象值时会转换为字符串，以及如何避免它

javascript - 两个 div 彼此相邻，内容从第二个 div 换行

java - Java 中的实例到底是什么？

java - 使用线程作为对象

javascript - 在使用 forEach 然后过滤查询后，通过 JavaScript 中的下拉列表进行过滤不会抛出任何结果

javascript - 可搜索的下拉列表

javascript - 如何在 Svelte 中使用 Web 组件？

Javascript 数组索引无法正常工作

python - 仅用于列表列表中第二项的循环。 (Python)

java - 基于文本的圆点和十字

©2024 IT工具网  联系我们