从数组中删除特定元素-JavaScript

Question

我想创建一个小程序，在其中输入``书名''和isbn代码以及其他内容，在我想创建一个提示询问我要删除哪本书（通过ISBN）之前，它工作得很好。 实际上工作正常； 当我写我以阵列形式存储的书的isbn时，它将删除该书，它就是isbn，但是警报通知我该书不存在于我已存储的每一本书的数据库中（之前未添加）。

例如，我存储了5本书，其中一本书是（数组中的第4个对象）带有“ 12121” ISBN代码，我想从数组中删除该本书。 函数对数组中的前3个对象返回false（alert（“在我们的数据库中不存在带有该ISBN的书。”）），然后对第四个对象返回true，然后对其中的最后一个对象返回false。数组。

如何制作仅选择（然后删除）带有ISBN的对象的函数，该对象放在提示框中，而无需检查数组中的每个对象？

    var book = [];
book.push({
    bookName: "GameOfThrones",
    isbn: "12345",
});
function deleteBook(){
    var book1 = prompt("Enter the ISBN of the book you want to delete");
    for var(i=0; i<book.length; i++){
        if (book[i].isbn == book1){
            book.splice(i, 1);
            alert("Book is successfully deleted");
        }
        else{
            alert("Book with that ISBN doesn't exist in our database.");
        }
    }
    for (var i=0; i<book.length; i++){
        document.write(book[i].isbn + " - " + book[i].bookName + "<br/>");
    }
}

Answer 1

如果您选择随机使用元素数组，那么遍历每个元素将无处可寻。 您的另一个选择是使用哈希图或对数组进行排序，然后使用二进制搜索算法。 就个人而言，除非您的Array非常大（十万个元素的数量级），否则我不会为这样的过早优化而烦恼。

顺便说一句，如果您使用Array过滤器功能，则可以以更简洁的方式编写原始代码。

    var books = [];
    books.push({
        bookName: "GameOfThrones",
        isbn: "12345",
    });

    var ISBNToDelete = prompt("Enter the ISBN of the book you want to delete");

    function deleteBookByISBN(isbn, books) {
        var newBooks = books.filter(function(book) {
           return book.isbn !== isbn;
        });
        if (newBooks.length != books.length) {
             alert("Book successfully deleted")  
        } else {
             alert("Book with that ISBN doesn't exist in our database.");
        }
        return newBooks;
    }
    books = deleteBookByISBN(ISBNToDelete, books); // reassign the new set of books to books.

Answer 2

您的示例最简单的方法是找到项目后，使用break语句停止处理for循环：

 function deleteBook(){
     var book1 = prompt("Enter the ISBN of the book you want to delete");
     for (var i=0,count=book.length; i<count; i++){
         if (book[i].isbn == book1){
             book.splice(i, 1);
             alert("Book is successfully deleted");
             break;
         }
         else{
             alert("Book with that ISBN doesn't exist in our database.");
         }
     }
     for (var i=0; i<book.length; i++){
         document.write(book[i].isbn + " - " + book[i].bookName + "<br/>");
     } 
}

我不知道您要定位的浏览器，但是如果不是IE，则可以消除for循环并改用Array.findIndex ： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/参考/ Global_Objects / Array / findIndex

就像是：

var index = book.findIndex(function (element) { return element.isbn == book1 });

Answer 3

找到书后，您可以简单地从for语句返回。 问题是当书在数组的末尾时，在这种情况下，您无论如何都要遍历整个数组。

排序数组可以为您提供一些帮助（您大概会知道在哪里找书），但是最好的办法是抛开数组并选择某种哈希表。

容易实现的是：

var books = {};
books['UniqueISBN'] = {name: "Where is the sun", author: "Unknown"};

然后，您可以使用delete直接将其删除；

var id = 'UniqueISBN';
delete books[id];

Answer 4

如果您对数组进行filter ，则可以返回所有不匹配的书。 在此过程中，如果找到了书，则可以存储一个布尔值。 使用该布尔值，您可以执行其他操作（例如，从数据库中删除它）。

您可以在filter执行这些数据库操作，但是为了使代码更易于跟踪和维护，最好将它们分开。 这就是为什么在filter之后有一个if -block的原因。

下面的示例演示了上述概念。 与控制台相反，它也使用textarea进行日志记录。 这旨在作为演示如何使用textContent属性输出到HTML元素。

例：

 document.addEventListener("DOMContentLoaded", onLoad); var books = [{ bookName: "GameOfThrones", isbn: "12345" }, { bookName: "Jurrasic Park", isbn: "98765" }, { bookName: "Westworld", isbn: "33333" }]; function deleteBook(isbn) { // use isbn passed in, or look it up isbn = isbn || document.getElementById('isbn').value; var book_found = false; books = books.filter((book, i) => { if (book.isbn == isbn) { book_found = true; debug.textContent += `Deleting "${book.bookName} from database...\\n`; return false; } else return isbn != book.isbn; }); // handle any follow-up actions if (book_found) { debug.textContent += `New List (w/o ${isbn}):\\n`; outputBooks(books); } else debug.textContent += `Book (isnb:${isbn}) could not be found!\\n\\n`; } // Used for Logging Output (in place of console) function outputBooks(books) { books.forEach(book => { debug.textContent += [' ' + book.isbn, book.bookName].join(': ') + '\\n' }); debug.textContent += '\\n'; } // Ensures the debug element is on the page function onLoad(event) { // Default window.debug = document.getElementById('debug'); debug.textContent += 'Starting List:\\n'; outputBooks(books); } 

 textarea { height: 20em; width: 80%; display: block; } .block { display: block; } 

 <label>ISBN: <input id="isbn" type="text" /> </label> <button type="button" class="delete" onclick="deleteBook()">Delete</button> <label><span class="block">Debug:</span> <textarea id="debug" disabled></textarea> </label>