在填充的情况下，Javascript矩阵赋值的行为与使用循环创建矩阵的情况不同。为什么？

Question

在Javascript（数组数组）中创建矩阵时，我使用了两种不同的方式 -

1。使用Array.fill

// Create a matrix using .fill
var aMatrix = new Array(5).fill(new Array(5));
aMatrix[0][0] = 'X';
// 'X' gets copied to all the 0th elements of each row
console.log(aMatrix);


function visualize(aArray, title) {
  // Utility method to visualize value
  var oTable = document.createElement("table");
  var oTh = document.createElement("th");
  oTh.setAttribute('colspan', 5);
  oTh.innerHTML = "<td>" + title + "</td>";
  oTable.appendChild(oTh);
  for (var iIndex = 0; iIndex < 5; iIndex++) {
    var oRow = document.createElement("tr");
    for (var jIndex = 0; jIndex < 5; jIndex++) {
      var oColumn = document.createElement("td");
      oColumn.innerHTML = aArray[iIndex][jIndex] ? aArray[iIndex][jIndex] : '';
      oRow.appendChild(oColumn);
    }
    oTable.appendChild(oRow);
  }
  document.body.appendChild(oTable);
}

visualize(aMatrix, "Matrix created Using Fill");

body{
  font-family: Helvetica;
}

table {
  border: 1px solid black;
  margin: 20px;
}

table th {
  text-align: center;
}


table td{
  border: 1px solid #efefef;
  width: 40px;
  height: 40px; 
  background: #3399FF;
  text-align: center;
}

table td:empty{
  background: #efefef;
}

<center><h3>
While calling aMatrix[0]0] = 'X';
</h3>
</center>

2。使用良好的旧循环

// Create a matrix using loop
var bMatrix = new Array(5);
for (var iRow = 0; iRow < 5; iRow++) {
  bMatrix[iRow] = new Array(5);
}

bMatrix[0][0] = 'X';


function visualize(aArray, title) {
  // Utility method to visualize value
  var oTable = document.createElement("table");
  var oTh = document.createElement("th");
  oTh.setAttribute('colspan', 5);
  oTh.innerHTML = "<td>" + title + "</td>";
  oTable.appendChild(oTh);
  for (var iIndex = 0; iIndex < 5; iIndex++) {
    var oRow = document.createElement("tr");
    for (var jIndex = 0; jIndex < 5; jIndex++) {
      var oColumn = document.createElement("td");
      oColumn.innerHTML = aArray[iIndex][jIndex] ? aArray[iIndex][jIndex] : '';
      oRow.appendChild(oColumn);
    }
    oTable.appendChild(oRow);
  }
  document.body.appendChild(oTable);
}

visualize(bMatrix, "Matrix created Using Loop");

body{
  font-family: Helvetica;
}

table {
  border: 1px solid black;
  margin: 20px;
}

table th {
  text-align: center;
}


table td{
  border: 1px solid #efefef;
  width: 40px;
  height: 40px; 
  background: #3399FF;
  text-align: center;
}

table td:empty{
  background: #efefef;
}

<center><h3>
While calling aMatrix[0]0] = 'X';
</h3>
</center>

在调用matrix [0] [0] ='X'时，我的期望是只有第一行的第一个元素被设置为'X'。

但是，在第一种情况下，为aMatrix [0] [0]赋值会最终将其分配给所有行的整个第1列。

为什么会这样？

Answer 1

  

在第一种情况下，为aMatrix [0] [0]赋值会最终将其分配给所有行的整个第1列。

因为当你.fill时，如果.fill的参数是一个对象，那么对象就不会被复制。 （aMatrix[0] === aMatrix[1] - 它们都引用相同的内存地址。）

＆＃13;

＆＃13;

const arr = new Array(5).fill({});
console.log(arr[1] === arr[2]);

＆＃13;

＆＃13;

＆＃13;

但如果你这样做：

for (var iRow = 0; iRow < 5; iRow++) {
  bMatrix[iRow] = new Array(5);
}

然后new Array(5)运行5次，每次都创建一个新数组。