Javascript innerHTML修改整个数组

我的Javascript代码中出现了意外行为。我正在用

document.createElement（“tr”）

创建一行表，并用该代码创建一个单元格数组： Cellle=新数组（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？

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

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

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

或

你的问题是：

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

这里您正在创建一个包含3个相同

td

元素的数组。因此，当您更改索引

0

处的一个时，您也在更改索引

1

和

2

处的一个，因为您正在引用内存中的相同元素

解决这个问题的一个简单方法是使用for循环手动创建一个数组，并将元素的唯一引用推送到

cellle

数组中

见下例：

var maTable=document.getElementById（“myTable”）；
var ligne=document.createElement（“tr”）；；
细胞变量=[]；
对于（变量i=0；i<3；i++）{
Cellle.push（document.createElement（“td”））；
}
Cellle[0]。textContent=“聊天室”//如果只添加文本，请使用textContent而不是innerHTML
Cellle[1]。textContent=“钱”；
cellule[2]。textContent=“鳄鱼”；
附生木质素（cellle[0]）；
附属物木质素（cellle[1]）；
附属物木质素（Cellle[2]）；
可匹配的子对象（ligne）

当fill传递给一个对象时，它将复制引用并填充
包含对该对象的引用的数组


这里有一个方法可以达到同样的效果


cellle=新数组（3）。填充（“”）
cellle.forEach（（el，index）=>cellle[index]=document.createElement（“td”））
Cellle[0]。textContent=“聊天室”；
Cellle[1]。textContent=“钱”；
cellule[2]。textContent=“鳄鱼”；
console.log（cellle[0].textContent）；
console.log（cellle[1].textContent）；
console.log（cellle[2].textContent）因为使用了“filll”，所以复制了相同的td，导致了问题。一种方法是创建一个独立的td

ligne = document.createElement("tr");
var datas = ['Chat', 'Chien', 'Alligator'];
for(var i=0; i<datas.length; i++) {
    var td = document.createElement("td");
    td.innerHTML = datas[i];
    ligne.appendChild(td);
}

maTable.appendChild(ligne);

ligne=document.createElement（“tr”）；
var数据=[“聊天”、“简”、“鳄鱼”]；
对于（var i=0；i因为这里只有一个
td
元素。您在数组中填充了对该元素的三个引用，但它仍然只有一个元素。
新数组（3）。填充（document.createElement（“td”））；
您在一个数组中的三个不同位置添加一个
元素。@VLAZ ooh，interisting，我应该在数组上循环以逐个填充它吗？我是通过循环填充来填充的，它工作了，谢谢您的帮助！这不工作-
cellule
是一个稀疏数组，因此
.map
将跳过空位置。您最后是一个有3个空位置的数组。
cellle.fill（0.map）（（）=>document.createElement（“td”））
嘿，HolyMoly，谢谢你的回答。请确保你解释了为什么与他的解决方案相比这是有效的。他一直在硬编码这一事实与实际问题无关。你为每个“数据”创建一个新的TD的事实是。
ligne = document.createElement("tr");
var datas = ['Chat', 'Chien', 'Alligator'];
for(var i=0; i<datas.length; i++) {
    var td = document.createElement("td");
    td.innerHTML = datas[i];
    ligne.appendChild(td);
}

maTable.appendChild(ligne);