函數看不到 Object 屬性，但 console.log 看不到

Question

我正在做一個圖書館。

let myLibrary = []; //to store my Book Objects

function Book(title, author, onPage, totalPages) { //constructor function
  this.title = title;
  this.author = author;
  this.onPage = onPage;
  this.totalPages = totalPages;
  this.info = function() {
    return this;
  }
}

現在我創建了一個函數，它將生成一個 Book 對象並將用戶輸入作為屬性值：

function addBookToLibrary() {
  let a = document.getElementById('bookTitle').value;
  let b = document.getElementById('authorName').value;
  let c = document.getElementById('onPage').value;
  let d = document.getElementById('numOfPages').value;
  myLibrary.push(new Book(a, b, c, d));
}

我創建了一個函數，它將遍歷myLibrary數組並根據屬性值對它們進行排序。 例如：

function showBooks() {
  for (i = 0; i <= myLibrary.length; i++) {
    if (Number(myLibrary[i].onPage) < Number(myLibrary[i].totalPages)
      let newLi = document.createElement('li');
      newLi.innterText = myLibrary[i].title + ' by ' + myLibrary[i].author;
      inProgressBooks.prepend(newLi);
    }
  }
}

現在我將加載我的頁面並使用 addBookToLibrary 函數添加一個對象。 現在 myLibrary[0].onPage 返回一個由 addBookToLibrary 從輸入中獲取的數字。 那么為什么函數 showBooks 會失敗呢？ 它說它無法讀取未定義的 onPage 屬性。

Answer 1

正如@ASDFGerte 所說，你的循環是錯誤的。 如果使用 <=，則會遇到最后一個條目不存在的問題。

您的示例數組的長度為 5，這意味着填充了 0 到 4 的索引。 如果您從 i = 0 開始，那么您嘗試尋址的最后一個索引將為 5 (array.length = 5)。 所以如果你想使用<=，你需要在array.length - 1處停止。

或者，就像@ASDFGerte 所說的那樣，只需使用 < 循環將在最后一個填充的條目處停止，因為 4 < 5。