更新 javascript 二维数组中的一个对象会更新每个对象答案

【问题标题】：Updating one object in javascript 2d array updates every single object更新 javascript 二维数组中的一个对象会更新每个对象
【发布时间】：2016-04-25 13:05:50
【问题描述】：

我在javascript中声明一个二维数组如下：

cell = {visited:false, left:true, top:true, right:true, bottom:true}

cells = new Array(10);

for (i = 0; i < 10; i++) //Initiate 2d cells array.
{
    cells[i] = new Array(cell,cell,cell,cell,cell,cell,cell,cell,cell,cell);
}

稍后在代码中我更新了数组中的一个对象：

cells[0][0].visited = true;

但是，在我这样做之后，数组中每个对象的每个访问属性都被标记为 true。

【问题讨论】：

您只有一个单元格，在数组中重复引用。您要么需要克隆它们，要么在循环中创建每个单元格。
您的代码将完全相同的对象放入数组中 10 次。该数组将包含对同一个对象的 10 个引用。
如何创建一个单独的单元格对象数组？
通过自己创建每个单元格，或克隆初始状态。
你能举个例子吗？

标签： javascript arrays object multidimensional-array

【解决方案1】：

正如@Pointy 所说，您的代码有这个参考问题。您可以通过 Object.create() 构建对象的“克隆”来解决此问题：

cell = {visited:false, left:true, top:true, right:true, bottom:true}

cells = new Array(10);

for (i = 0; i < 10; i++) //Initiate 2d cells array.
{
    cells[i] = new Array(
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell)
    );
}

cells[0][0].visited = true;

另见Clone Object without reference javascript [duplicate]

【讨论】：

【解决方案2】：

对不起，我需要用不同的“单元格”不同的对象来启动数组：

for (i = 0; i < 10; i++) //Initiate 2d cells array.
{
cells[i] = new Array({visited:false, left:true, top:true, right:true,                     bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true});
}

【讨论】：