innerHTML修改整個數組

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

當fill通過一個對象時，它將復制引用，並使用對該對象的引用填充數組。

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。

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);