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

Question

I wanted to create small program where you enter the Book name and it's isbn code, with some other stuff, and it worked just fine until I wanted to create a prompt that asks me which book i want to delete (by it's ISBN). It actually works fine; when I write the isbn of the book that i stored in array, it deletes that book and it's isbn, but the alert is notifying me that the book does not exist in the database (not added previously) for every book I have stored.

For example, I have 5 books stored, one is (4th object in array) with "12121" ISBN code and I want to delete that one from the array. Function returns me false for first 3 objects in array (alert("Book with that ISBN doesn't exist in our database.")), then it returns true for the 4th object and then it returns me false also for the last object in array.

How do I make the function that only selects (and then deletes) object with ISBN that I put there in prompt box without checking every one of the objects inside the array?

    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

If you choose to use an array of elements at random, then there is no getting around looking through each element. Your other option is to use a hash map or sort your array and use the binary search algorithm. Personally, I wouldn't bother with such premature optimization unless your Array is very very big (an order of a hundred thousand elements).

As an aside, your original code can be written in a much cleaner manner if you make use of the Array filter function .

    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

Easiest way with your example is to use break statement to stop processing of the for loop once you've found item:

 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/>");
     } 
}

I don't know what browsers you're targeting, but if it's not IE you can eliminate the for loop and use Array.findIndex instead: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

Something like:

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

Answer 3

You could simply return from for statement at the moment you have found your book. The problem is when book is at the end of an array, in that case you would go trough whole array anyway.

Sorted array could help you a little bit (you would know approximately where to look for the book), but the best thing to do is to ditch the array and choose some kind of Hash table.

Easy implementation would be:

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

Then you can delete it directly using delete;

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

Answer 4

If you filter on the array, you can return all the books that didn't match. During that process, you can store a boolean if the book was found. Using that boolean, you can perform other actions (like deleting it from the database).

You could perform those database actions inside the filter , but to keep code easier to follow and maintain, it's good to separate it. Which is why there's an if -block after the filter .

This following example demonstrates this concept above. It also uses a textarea for the logging, as opposed to the console. This is meant to serve as a demonstration on how to output to an HTML element using the textContent property.

Example:

 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>