Javascript嵌套循环不显示完整矩阵

Question

我正在尝试打印一个坐标列表,我认为嵌套循环是适当的方法,所以我编写了以下代码(非常简单):

var x = 23;
var y = 34;
var z = 28;

var div = document.getElementById("coordinates");

div.innerHTML += "<ul>";

for (var i = 1; i <= x; i++) {
    for (var j = 1; j <= y; j++) {
        for (var k = 1; k <= z; k++) {
            div.innerHTML += "<li>X: " + i + " Y: " + j + " Z: " + k + "</li>";
        }
    }
}

div.innerHTML += "</ul>";

当我这样做时,我期待一个非常大量的元素(在这种情况下23*34*28元),但我得到这个:

X: 1 Y: 1 Z: 1
X: 1 Y: 1 Z: 2
X: 1 Y: 1 Z: 3
X: 1 Y: 1 Z: 4
X: 1 Y: 1 Z: 5
X: 1 Y: 1 Z: 6
X: 1 Y: 1 Z: 7
X: 1 Y: 1 Z: 8
X: 1 Y: 1 Z: 9
X: 1 Y: 1 Z: 10
X: 1 Y: 1 Z: 11
X: 1 Y: 1 Z: 12
X: 1 Y: 1 Z: 13
X: 1 Y: 1 Z: 14
X: 1 Y: 1 Z: 15
X: 1 Y: 1 Z: 16
X: 1 Y: 1 Z: 17
X: 1 Y: 1 Z: 18
X: 1 Y: 1 Z: 19
X: 1 Y: 1 Z: 20
X: 1 Y: 1 Z: 21
X: 1 Y: 1 Z: 22
X: 1 Y: 1 Z: 23
X: 1 Y: 1 Z: 24
X: 1 Y: 1 Z: 25
X: 1 Y: 1 Z: 26
X: 1 Y: 1 Z: 27
X: 1 Y: 1 Z: 28

当我期望它继续下面这样的事情时:

X: 1 Y: 2 Z: 1
X: 1 Y: 2 Z: 2
X: 1 Y: 2 Z: 3
X: 1 Y: 2 Z: 4
...

它就像它只通过两个第一个循环一次循环.

我想我正在尝试做一些非常简单的事情,所以我做错了什么？

PD:现在我不需要保存内存或任何类型的优化,我知道如果x,y,z值很高,这样的循环可能会很大.

Answer 1

现在我不需要保存内存或任何类型的优化,我知道如果x,y,z值很高,这样的循环可能会很大.

你确实需要,因为你要求浏览器做大量不必要的工作,并且可能达到极限; 否则代码就好了.

x.innerHTML += ...是反模式.每次读取时innerHTML,浏览器都必须遍历您使用它的元素的完整树,并使用该DOM树的HTML表示在内存中构建一个字符串; 每次分配给它时,浏览器都必须拆除旧树,解析新的HTML,并构建新的DOM元素以替换旧树.+=正在阅读,添加更多,然后分配.

当我写这篇文章时(已经编写了下面的代码片段),jsFiddle我把你的原始代码放到了仍在运行并且在我开始这个答案之前一直在运行.:-)(编辑:它终于停止了,并且显示了完整列表.)

而是创建新节点并追加它.在您的情况下,您甚至可以在将其添加到文档之前将所有lis ul添加到文档中,然后通过单个操作将其添加到文档中.如果我这样做,它的工作原理很快:

var x = 23;
var y = 34;
var z = 28;

var div = document.getElementById("coordinates");

var ul = document.createElement("ul");

for (var i = 1; i <= x; i++) {
    for (var j = 1; j <= y; j++) {
        for (var k = 1; k <= z; k++) {
          var li = document.createElement("li");
          li.appendChild(
            document.createTextNode(
              "X: " + i + " Y: " + j + " Z: " + k
            )
          );
          ul.appendChild(li);
        }
    }
}

div.appendChild(ul);

<div id="coordinates"></div>