javascript - forEach 工作不正确，帮助理解原因

Question

请尝试理解哪里出了错误。

我有一个数组table和两个函数appendRow和appendCol。

如果我首先执行appendCol，它会正确工作，并且在表“y”元素的每个数组中附加。

但是，如果我先执行 'appendRow'，然后 appendCol 'y' 会在表中的第一个和最后一个数组中添加两次。

我不明白为什么。

我的代码如下:

var table = [
  ['x', 'x', 'x', 'x'],
  ['x', 'x', 'x', 'x'],
  ['x', 'x', 'x', 'x'],
  ['x', 'x', 'x', 'x'],
  ['x', 'x', 'x', 'x']
]

var appendRow = () => {
  var newTable = table;
  newTable.push(newTable[0])
  table = newTable

  console.log(table)
}

var appendCol = () => {
  var newTable = table;
  newTable.forEach((element) => {
    element.push("y")
  })
  table = newTable;
  console.log(table);
}

appendRow();
appendCol();

链接到jsfiddle

执行后可以看到控制台。

尝试注释第一个函数，第二个函数正确

Answer 1

当您运行 newTable.push(newTable[0]) 时，您不是推送第一个子数组的副本，而是推送对该子数组的引用，所以现在newTable 包含对该子数组的两个单独引用，这意味着您将对其进行迭代两次，然后将 "y" 推送到它两次。

为了解决此问题，您可以确保实际复制 appendRow() 中的子数组，而不是仅仅引用它:

newTable.push(newTable[0].slice())

不带任何参数的 slice() 方法将返回数组的副本。

另一方面，由于引用了数组(和其他对象类型)，因此在 newTable 和 table 之间重新分配并没有真正完成任何任务。