對象push（）放入數組

Question

我希望了解將對象推入數組時的以下行為。

（1）創建一個對象，創建該對象的屬性，然后將其推入數組。

var array = [];
var obj = {};

obj.x = 1;
array.push(obj); 
console.log(array); //Output [{x: 1}]

考慮兩種選擇：

（2a）：我更改了對象的屬性，因此更改了數組中引用的對象：

obj.x = 2;
console.log(array); //Output [{x: 2}] ... it has been changed

（2b 而不是2a ）我使對象引用引用一個新對象並創建屬性，數組中引用的原始對象未更改：

obj = {}; //Change reference to new object
obj.x = 2;
console.log(array); //Output [{x: 1}] ... it is unchanged

為什么會這樣呢？

PS：我注意到這里討論了這種區別（ 對象是用javascript深度復制還是淺表復制放入數組中？ ），但並不能令人滿意地解釋它。

Answer 1

JavaScript對象通過對象引用被推到數組上，也就是說，如果您將對象推到數組中，然后再操作該對象，則數組的內容也會發生變化，因為數組引用了同一對象。

通過初始化或克隆步驟創建新對象可以解決此問題，在數組中有兩個完全不同的對象。

可以這樣考慮：當您在對象上調用push時，對象本身不會進入數組，而對對象的引用（指針）則會進入數組。 像數字這樣的原始類型會被復制 ，而對象則不會。

Answer 2

1. 當您推動對象時，您添加了第一個對象的引用，因此這就是將其更新為2的原因。

2. 您正在創建新對象並分配給obj並更改該對象不會更改數組值，因為它指向不同的引用。

Answer 3

我不知道我較差的ASCII圖表繪制技能是否會有所幫助，但是嘗試一下：

-----------------------------------------
(1)
-----------------------------------------

array = []

  [ ]    'array'
   ^--------/

obj = {}

  [ ]    'array'   { }     'obj'
   ^--------/       ^-------/

obj.x = 1

  [ ]    'array'   {x: 1}    'obj'
   ^--------/        ^---------/

array.push(obj)

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'
   ^------------/        ^---------/

-----------------------------------------
(2a)
-----------------------------------------

obj.x = 2

       ,-----------------v
  [0: * ]    'array'   {x: 2}    'obj'
   ^------------/        ^---------/


-----------------------------------------
(2b)
-----------------------------------------

obj = {}

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'    { }
   ^------------/                  `-------^ 


obj.x = 2

       ,-----------------v
  [0: * ]    'array'   {x: 1}    'obj'    {x: 2}
   ^------------/                  `--------^