爲什麼當我在數組中推入另一個值時，JavaScript對象值發生了變化？

Question

這裏是我的代碼：

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

 
(function() { 
 
    for(let i = 1; i <= 10; i++) { 
 
    arr.push(i); 
 
    obj[i] = arr; 
 
    } 
 
})();

此代碼給了我這樣的輸出：

{ 
    '1': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '2': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '3': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '4': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '5': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '6': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '7': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '8': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '9': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], 
    '10': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 
} 

爲什麼不給這樣的輸出？

{ 
    '1': [ 1 ], 
    '2': [ 1, 2 ], 
    '3': [ 1, 2, 3 ], 
    '4': [ 1, 2, 3, 4 ], 
    '5': [ 1, 2, 3, 4, 5 ], 
    '6': [ 1, 2, 3, 4, 5, 6 ], 
    '7': [ 1, 2, 3, 4, 5, 6, 7 ], 
    '8': [ 1, 2, 3, 4, 5, 6, 7, 8 ], 
    '9': [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ], 
    '10': [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 
} 

Answer 1

當您按下時，您每次都將該引用推送到同一個數組。你真正想要的是每次創建一個新的數組，而不是引用同一個數組。

看看這個蘇答案更多信息Javascript by reference vs. by value

您可以通過使用arr.slice或Array#from推副本arr做到這一點。最後arr將包含全部10個數字，但obj將看起來完全像您的輸出。

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

 
(function() { 
 
    for(let i = 1; i <= 10; i++) { 
 
    arr.push(i); 
 
    obj[i] = arr.slice(); 
 
    } 
 
    console.log(obj); 
 
})();