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

时间:2017-03-20 20:21:34

标签: javascript arrays splice

我想创建一个小程序,你输入书名和它的isbn代码,以及其他一些东西,它工作得很好,直到我想创建一个提示,询问我要删除哪本书(按照它的ISBN)。它实际上工作正常;当我写出我存储在数组中的书的isbn时,它删除了那本书并且它是isbn,但是警报告诉我这本书不存在于每本书的数据库中(以前没有添加)我已存储。

例如,我有5本书存储,一个是(数组中的第四个对象),其中" 12121" ISBN代码,我想从数组中删除那个。对于数组中的前3个对象,函数返回false(alert(" Book with the ISBN并不存在于我们的数据库中。")),然后它返回第4个对象的true然后返回对于数组中的最后一个对象,我也是假的。

如何创建仅选择(然后删除)带有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/>");
    }
}

4 个答案:

答案 0 :(得分:1)

如果您选择随机使用元素数组,那么无需浏览每个元素。您的另一个选择是使用哈希映射或对数组进行排序并使用二进制搜索算法。就个人而言,除非你的数组非常大(十万元素的数量级),否则我不会为这种过早的优化而烦恼。

另外,如果您使用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.

答案 1 :(得分:0)

您的示例最简单的方法是使用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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

类似的东西:

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

答案 2 :(得分:0)

您可以在找到您的图书时立即从for语句返回。问题是当book位于数组的末尾时,在这种情况下,无论如何你都会通过整个数组。

排序数组可以帮助你一点点(你会知道在哪里寻找这本书),但最好的办法是抛弃数组并选择某种哈希表。

易于实施:

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

然后您可以使用delete直接删除它;

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

答案 3 :(得分:0)

如果您在阵列上filter,则可以返回所有不匹配的图书。在此过程中,如果找到该书,则可以存储布尔值。使用该布尔值,您可以执行其他操作(例如从数据库中删除它)。

您可以在filter内执行这些数据库操作,但为了使代码更易于遵循和维护,将其分开是很好的。这就是if之后的filter - 阻止的原因。

以下示例演示了上述概念。它还使用textarea进行日志记录,而不是控制台。这是为了演示如何使用textContent属性输出到HTML元素。

示例:

&#13;
&#13;
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);
}
&#13;
textarea {
  height: 20em;
  width: 80%;
  display: block;
}

.block {
  display: block;
}
&#13;
<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>
&#13;
&#13;
&#13;