Question

我的Javascript代码出现了意外的行为。我正在使用document.createElement("tr")和带有该代码的单元格数组创建一行表格： cellule = new Array(3).fill(document.createElement("td"));

但是当我使用 innerHTML 属性（视情况而定）填充值时，整个数组都会被修改。这是完整的代码：

ligne = document.createElement("tr");;
cellule = new Array(3).fill(document.createElement("td"));

cellule[0].innerHTML = "Chat";
cellule[1].innerHTML = "Chien";
cellule[2].innerHTML = "Alligator";

ligne.appendChild(cellule[0]);
ligne.appendChild(cellule[1]);
ligne.appendChild(cellule[2]);
maTable.appendChild(ligne);

结果是：

cellule[0] => "Alligator"
cellule[1] => "Alligator"
cellule[2] => "Alligator"

为什么我的整个数组中都填充了最后使用的innerHTML？

Answer 1

fill将相同的元素（具有相同的引用）添加到数组中。

您可以用另一种方式放置元素，例如

cellule = [];
for (let i = 3; i--;) {
  cellule.push(document.createElement("td"));
}

或

cellule = new Array(3);
for (let i = cellule.length; i--;) {
  cellule[i] = document.createElement("td");
}

Answer 2

您的问题在于：

cellule = new Array(3).fill(document.createElement("td"));

这里您要创建一个包含3个相同的td元素的数组。因此，当您在索引0处更改一个时，您也将在索引1和2处进行更改，因为您要引用内存中的同一元素。

解决此问题的一种简单方法是使用for循环手动创建数组，并将元素的唯一引用推入cellule数组中。

请参见以下示例：

var maTable = document.getElementById("myTable");
var ligne = document.createElement("tr");;

var cellule = [];
for(var i = 0; i < 3; i++) {
  cellule.push(document.createElement("td"));
}

cellule[0].textContent = "Chat"; // use textContent instead of innerHTML if only adding text
cellule[1].textContent = "Chien";
cellule[2].textContent = "Alligator";

ligne.appendChild(cellule[0]);
ligne.appendChild(cellule[1]);
ligne.appendChild(cellule[2]);
maTable.appendChild(ligne);

<table id="myTable" border="1"></table>

Answer 3

当填充传递给对象时，它将复制引用并填充对该对象的引用的数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#Description

这是您达到相同目标的方法之一。

    cellule = new Array(3).fill("")
    cellule.forEach((el,index) => cellule[index] = document.createElement("td"))
    cellule[0].textContent = "Chat"; 
    cellule[1].textContent = "Chien";
    cellule[2].textContent = "Alligator";
    console.log(cellule[0].textContent);
    console.log(cellule[1].textContent);
    console.log(cellule[2].textContent);

Answer 4

因为使用了'filll'，所以复制了相同的td，导致出现问题。一种方法是创建一个独立的td。

my_lm <- function(df, var) lm(var~., data = df)

my_lm(diamonds, price)

innerHTML修改整个数组

4 个答案: