Вложенные циклы 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, браузер должен запускать полное дерево элемента, на котором вы его используете.и построить строку в памяти с HTML-представлением этого дерева DOM;каждый раз, когда вы назначаете ему, браузер должен разрушать старое дерево, анализировать новый HTML и создавать новые элементы DOM для замены старого дерева.+= читает, добавляет еще, а затем присваивает.

Когда я пишу это (уже написав фрагмент кода ниже), jsFiddle, в который я поместил ваш исходный код, все еще работает иработает с тех пор, как я начал этот ответ.:-) (Редактировать: он наконец остановился и показал полный список.)

Вместо этого создайте свой новый узел и добавьте его.В вашем случае вы даже можете добавить все li к 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>