JS遍历数组判断重复失效 如何防止表单提交新增重复对象

你现在的重复校验逻辑有两个核心问题，直接导致拦截失效：

• forEach方法的回调里写return只会终止当前这一次循环的回调执行，不会中断整个遍历流程，也没法阻止后续代码运行
• 你把push新增图书的逻辑写在了forEach的遍历分支里：只要遍历到某一本存书和新书title不相等，就会立刻把新书塞进数组，根本不会等遍历完所有存书完成全量校验。比如数组里已经有两本书，第一本和新书重名、第二本不重名，遍历第一本时会弹出重复提示，但遍历到第二本时就会直接执行push把重复书加进去。
• 单独判断myLibrary.length === 0的特殊分支完全多余，统一做重复校验就能覆盖空数组场景，不用单独处理第一本图书的录入。

不要在遍历过程中执行新增操作，先完成全量重复校验，确认title唯一之后再执行新增、提示、重置表单的逻辑。推荐直接用数组内置的some()方法做重复判断，写法更简洁也不容易出错：

• some()会遍历数组检查是否有元素满足匹配条件，只要找到一个匹配项就会立刻返回true并终止遍历，刚好符合查重复的需求
• 拿到重复校验的布尔结果后再分支处理：重复就弹提示、重置表单；不重复就创建对象push进数组，再弹成功提示、重置表单

JavaScript 部分 #

let myLibrary = [];

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

const addBook = function() {
    const titleInput = document.getElementById("title");
    const authorInput = document.getElementById("author");
    const pagesInput = document.getElementById("pages");
    const genreInput = document.getElementById("genre");
    const form = document.querySelector('form');

    document.getElementById("Submit").addEventListener('click', (e) => {
        e.preventDefault();
        const newBook = new BookInfo(
            titleInput.value.trim(), // 去掉首尾空格，避免用户输空格绕过重复校验
            authorInput.value.trim(),
            pagesInput.value,
            genreInput.value.trim()
        );

        // 检查是否已有同名图书
        const isTitleDuplicated = myLibrary.some(book => book.title === newBook.title);
        if (isTitleDuplicated) {
            alert(`${newBook.title} 已经存在于你的书库中。`);
            form.reset();
            return;
        }

        // 校验通过才执行新增
        myLibrary.push(newBook);
        alert(`${newBook.title} 已成功添加到你的书库！`);
        form.reset();
    });
};

addBook();

HTML 部分 #

<form>
    <input type="text" id="title" placeholder="书名">
    <input type="text" id="author" placeholder="作者">
    <input type="number" id="pages" placeholder="页数">
    <input type="text" id="genre" placeholder="分类">
    <input type="button" value="提交" id="Submit">
</form>

小提示：给输入值加.trim()处理是为了避免用户不小心输入首尾空格（比如输入"三体"和"三体 "）绕过重复校验，是前端表单处理很常用的归一化技巧。

内容的提问来源于stack exchange，提问作者Niko17x