javascript - JS for 循环不起作用

Question

我有一个如下所示的 for 循环:

for (var i = 0; i < list.length; i++) {

它循环访问数据库中的 Firebase 数据并返回数据库中的所有数据。

但是，我希望它只显示前 10 个数据库项目。所以我将循环更改为:

for (var i = 0; i < 9; i++) {

但是当数据库中的数据少于10条时，无法显示任何结果。但是，如果我将数字设置为数据库中拥有的对象数量，例如 10，因为我有 10 个对象，它会显示所有对象。但如果小于这个数字，我只会得到一个空白网页。

这是当我的 Firebase 数据库中有 10 个对象时的网页:

这是当我删除其中一个对象时的情况:

我不知道为什么会发生这种情况 - 逻辑是正确的 - 如果 i 小于 9 则显示数据 - 但它只在等于 9 时显示数据。

这是完整的 JS:

function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';
var lis4 = '';
    for (var i = 0; i <= 9; i++) {
        lis += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>';
        lis2 += genLinks(list[i].key, list[i].book)
      };
      for (var i = 10; i < list.length; i++) {
        lis3 += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>';
        lis4 += genLinks(list[i].key, list[i].book)
      };
        document.getElementById('bookList').innerHTML = lis;
        document.getElementById('bookList2').innerHTML = lis2;
        document.getElementById('bookList3').innerHTML = lis3;
        document.getElementById('bookList4').innerHTML = lis4;
    };

function genLinks(key, bkName) {
var links = '';
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><img src="images/bin.png" style="width: 24px; height: 24px; transform: translateY(-7px); opacity: .4;"></img></a> ';
return links;
};

function del(key, bkName) {
var response = confirm("Are certain about removing \"" + bkName + "\" from the list?");
    if (response == true) {
        // build the FB endpoint to the item in movies collection
        var deleteBookRef = buildEndPoint(key);
        deleteBookRef.remove();
        }
    }

function buildEndPoint (key) {
return new Firebase('https://project04-167712.firebaseio.com/books/' + key);
}
// this will get fired on inital load as well as when ever there is a change in the data
bookList.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            book = data[key].book ? data[key].book : '';
        if (book.trim().length > 0) {
            list.push({
            book: book,
            key: key
            })
        }
    }
}
// refresh the UI
refreshUI(list);
});

如果有人有任何帮助，我将不胜感激!

Answer 1

当列表大小小于 10 时，您将在循环中收到错误，因为您最终将寻址 list[i] 上不存在的属性(如 key) (因为它是未定义)。如果您检查控制台，您会发现报告了此错误。

要解决此问题，请更改第一个 for 循环的条件，如下所示:

for (var i = 0; i < Math.min(10, list.length); i++) {

这样，循环将永远不会迭代到不存在的条目。它将在 9 或 list.length-1 之后停止，以先到者为准。

或者，您可以将两个条件与 && 运算符放在一起:

for (var i = 0; i < 10 && i < list.length; i++) {