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 元素来替换旧树。 += 正在阅读、添加更多内容，然后进行分配。

在我写这篇文章时（已经写了下面的 sn-p），我将原始代码放入的 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>