Javascript 对象和数组引用的行为因深度而异答案

【问题标题】：Javascript objects and arrays references behaving different deppending on the depthJavascript 对象和数组引用的行为因深度而异
【发布时间】：2016-04-13 08:42:50
【问题描述】：

只是想了解为什么会这样。

我正在尝试使用 javascript 数组、对象和对对象的引用。然后我到了一个我不再理解的地步。

我创建了一个包含对象的数组；然后当我引用该对象并更改属性时；原始值和参考值会自动更改。显然是因为它是参考而不是复制。

当我创建一个包含一个对象的数组并与另一个对象一起创建数组时，我期待同样的结果，但不知何故，在这种情况下，原始对象保持不变。

可能它有一个我现在不知道的非常简单的解释。谁能给我解释一下？

谢谢！

var foo = [ 
  { 
    "bar": "bar" 
  } 
];

var ref = foo[0];
ref.bar = "new bar";

console.info(foo[0].bar);                // output: new bar
console.info(ref.bar);                   // output: new bar
console.info(foo[0].bar === ref.bar);    // output: true

var foo2 = [ 
  { 
    "bar2": [
       { "nested": "nested" }
    ] 
  } 
];

var ref2 = foo2[0].bar2;
ref2.nested = "nested 2";

console.info(foo2[0].bar2[0].nested);                 // output: nested
console.info(ref2.nested);                             // output: nested 2
console.info(foo2[0].bar2[0].nested === ref2.nested);  // output: false

【问题讨论】：

标签： javascript arrays object reference

【解决方案1】：

一切都很顺利。什么也没有变。你理解得很好。只是你把 foo2[0].bar2 放在了 var ref2 中。

var ref2 = foo2[0].bar2;

你看到 foo2[0].bar2 在这里是一个数组。当你这样做的时候

*ref2.nested = "nested 2";*

它向 ref2 添加了一个新对象。你想做的是

*var ref2 = foo2[0].bar2[0];*

或其他任何微妙的东西。 Javascript是同一个朋友。只是我们失去了参考。

【讨论】：