javascript - 我有一个表单，它接受用户输入，创建一个新对象并推送到一个数组中。如何防止创建重复的对象？

Question

我基本上试图通过迭代 myLibrary 数组来防止创建重复的对象。如果用户输入是唯一的标题，则添加到数组中。如果不是，则拒绝进入。

无论我尝试什么，我的代码都会告诉我存在重复对象，但仍然添加重复对象。

我显然对此很陌生。预先感谢您的帮助。

let myLibrary = [];

class BookInfo {
    constructor(title, author, pages, genre) {
        this.title = title,
        this.author = author,
        this.pages = pages,
        this.genre = genre
    };
};

// Add new book to library array:
const addBook = function() {
    let title = document.getElementById("title");
    let author = document.getElementById("author");
    let pages = document.getElementById("pages");
    let genre = document.getElementById("genre");
    document.getElementById("Submit").addEventListener('click', (e) => {
        e.preventDefault();
        const newBook = new BookInfo(title.value, author.value, pages.value, genre.value);
        if (myLibrary.length === 0) {
            myLibrary.push(newBook); // Add first book to library.
            alert(`${title.value} has been added to your library!`);
            document.querySelector('form').reset(); // clear form after submit.
        } else {
            myLibrary.forEach(book => {
                console.log(newBook.title);
                if (book.title === newBook.title) { // Dup exists.
                    alert(`${title.value} already exists in your library.`);
                    document.querySelector('form').reset(); // clear form after submit.
                    return;
                } else {
                    myLibrary.push(newBook);
                    alert(`${title.value} has been added to your library.`);
                    document.querySelector('form').reset(); // clear form after submit.
                    return;
                }
            })
        };
    });
};

addBook();

    <form>
    <input type="text" id="title">
    <input type="text" id="author">
    <input type="number" id="pages">
    <input type="text" id="genre">
    <input type="button" value="Submit" id="Submit">
    </form>

Answer 1

Array.prototype 中的内置“forEach”方法不会因“break”或“return”而中断 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach (看第一个蓝色注释框)

在您的情况下，您可以使用 for 循环进行迭代

for (let i = 0; i < myLibrary.length; i++) {
   if (myLibrary[i].title === book.title) {
     break;
   } else if (i == myLibrary.length - 1) {
     myLibrary.push(book);
   }
}

(而不是“myLibrary.forEach”)

或者您可以始终添加并清除重复项:

myLibrary = myLibrary.filter(
  (i, idx) => myLibrary.findIndex((j) => i.title === j.title) === idx
);