Question

我有一个for循环，看起来像这样：

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

它循环遍历数据库中的Firebase数据并返回数据库中的所有数据。

但是，我希望它只能达到前10个数据库项目。所以我把循环改为：

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

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

以下是我的Firebase数据库中有10个对象时的网页：

这是我删除其中一个对象的时候：

我不知道为什么会发生这种情况 - 逻辑是正确的 - 如果我小于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时，您将在循环中收到错误，因为您最终将解决key上不存在的属性（如list[i]）（因为它是{ {1}}）。如果要检查控制台，您会注意到报告了此错误。

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

for

这样，循环永远不会迭代到不存在的条目。它将在9之后或for (var i = 0; i < Math.min(10, list.length); i++) {之后停止，以先到者为准。

或者，您可以使用list.length-1运算符放置这两个条件：

&&

JS for循环不起作用

1 个答案: