在 Javascript 中创建和遍历 200x200 网格是否有更快的方法？

Question

我是 Javascript 的新手，出于简单游戏的目的，我需要在页面上显示一个 200x200 的网格，每个单元格包含一个布尔值。我目前的方法是这样的：我动态创建一个 HTML table，分配 ID 并在每个单元格上添加一个复选框。

以下是我如何创建 table：

    const a = 200;
    var resultTable = '<table name = "mytab" id = "abc">';
    for (var i = 0; i < a; i++) {
        resultTable += '<tr>';
        for (var j = 0; j < a; j++) {
            var uid = i + '.' + j;
            resultTable += '<td class="container"><input type="checkbox" id="' 
            + uid + '" class="regular-checkbox"><\/td>';
        }
    }

这就是我收集价值的方式：

    for (var i = 0; i < a; i++) {
            for (var j = 0; j < a; j++) {
                var yy = i + '.' + j;
               /* if (document.getElementById(yy).checked) do something */
            }
    }

它可以工作，但存在一些严重的性能问题。有没有不同的方法可以更快地做到这一点？感谢任何帮助。

Answer 1

性能增强将是 selecting 元素。当前，您从一个字符串创建整个 table，然后 select 每个输入使用 document.getElementById()。您可以通过在创建元素时创建对每个输入的引用来改进这一点，这样您以后就不必再找到它了。

使用 document.createElement()，您可以在 JavaScript 中创建元素实例。函数 returns 对已创建元素的引用，您可以将其存储以供日后使用。

例如，您可以用它创建一个输入元素。

const input = document.createElement('input');
input.type = 'checkbox';
input.checked = true;

现在您有一个输入元素已保存在 input 常量中。现在你没有找到元素，因为你已经有了对它的引用，使得循环必须为每个输入少执行 1 个任务，从而导致 200 x 200 个任务 .

下面的示例使用前面提到的 createElement 方法来创建一个 <table> 元素。在第二个循环中，创建 <input> 元素并将对该元素的引用存储在数组中。遍历此数组现在是 n(0)，它允许您在单个循环中遍历每个输入。

const amount = 200;
const inputCollection = [];

const table = document.createElement('table');
table.name = 'mytab';
table.id = 'abc';

for (let i = 0; i < amount.length; i++) {
  const row = table.insertRow();

  for (let j = 0; j < amount.length; j++) {
    const input = document.createElement('input');
    input.classList.add('regular-checkbox');
    input.type = 'checkbox';

    // Add the input reference to the collection.
    inputCollection.push(input);

    const cell = row.insertCell();
    cell.append(input);
  }
}

document.body.append(table);

inputCollection.forEach(input => {
  if (input.checked) {
    // Do something.
  }
});

在 Javascript 中创建和遍历 200x200 网格是否有更快的方法？

Is there a faster way of creating and iterating over a 200x200 grid in Javascript?

html

javascript

grid