ループのためのjavascriptここで新しい配列に

Question

を置くが、私が持っているコードです：

let testp = { 
    value: '' 
} 
let data = []; 
for (let i = 0; i < 5; i++) { 
    testp.value = i; 
    data.push(testp); 
} 

console.log(data) 

データリターンがある：

[ { value: 4 }, 
    { value: 4 }, 
    { value: 4 }, 
    { value: 4 }, 
    { value: 4 } ] 

なぜですか？私は結果は次のようにだと思う：あなたが行うことができ、ループ内testp.value割り当て

[ { value: 0 }, 
    { value: 1 }, 
    { value: 2 }, 
    { value: 3 }, 
    { value: 4 } ] 

Answer 1

がproblem.Insteadを引き起こした

let testp = { 
 
    value: '' 
 
} 
 
let data = []; 
 
for (let i = 0; i < 5; i++) { 
 
    data.push({ 
 
    value: i 
 
    }); 
 
} 
 

 
console.log(data)

Answer 2

あなたが参照をプッシュしています毎回valueの値を編集して、配列にオブジェクトtestpを5回追加します。ここで

は別の例です：

let foo = { 'a': 1 }; 
let bar = [foo, foo, foo]; 
foo.a = 2; 
console.log(foo[2]); 
// 2 

配列barは3つの参照fooからが含まれています。オブジェクトの内容を変更すると、参照されているオブジェクトの内容が変更されます。

新しいオブジェクトが必要な場合は、それらをどこかに作成する必要があります。例：ループ内testp.valueを割り当てる

// Function that constructs the new objects 
let foo = (value) => { return { "value": value } }; 
let data = []; 

for (let i = 0; i < 5; i++) { 
    data.push(foo(i)); 
}