forループ内のオブジェクト値を設定して配列にプッシュすると、最終的な配列項目の値はすべて同じになります

Question

基本的にオブジェクトをパラメータとして受け取り、値を追加して配列にプッシュする単純な関数があります。

var objectFruits = { 
 
    name: 'apple' 
 
} 
 

 
var fruits = [] 
 

 
function pushToArray(parameters) { 
 
    var newObject; 
 
    newObject = Object.assign({}, parameters) 
 

 
    for (var i = 0; i < 3; i++) { 
 
    newObject.value = i 
 
    fruits.push(newObject) 
 
    console.log(newObject) 
 
    } 
 
} 
 

 
pushToArray(objectFruits) 
 

 
console.log(fruits)

これは私の結果得られます。

0: {name: "apple", value: 2} 
1: {name: "apple", value: 2} 
2: {name: "apple", value: 2} 

それがあるべきよう：

0: {name: "apple", value: 0} 
1: {name: "apple", value: 1} 
2: {name: "apple", value: 2} 

なぜそれが最終的に配列fruitsショーということですが各項目のvalueは0123です？

Answer 1

ループの繰り返しごとに同じオブジェクトの値を更新する場合は、新しいオブジェクトを作成する必要があります。

ちょうどあなたのコードの問題は、あなたのトンであるため、ループ

デモ

var objectFruits = { 
 
    name: 'apple' 
 
}; 
 
var fruits = []; 
 

 
function pushToArray(parameters) { 
 
    for (var i = 0; i < 3; i++) { 
 
    var newObject = Object.assign({}, parameters) 
 
    newObject.value = i 
 
    fruits.push(newObject); 
 
    } 
 
} 
 

 
pushToArray(objectFruits); 
 

 
console.log(fruits);

Answer 2

の内側に、このライン

newObject = Object.assign({}, parameters) 

を置きます同じオブジェクトの値を変更するために嘘をつく。newObject。ループの終わりには、すべてnewObjectの値が最後の値で更新されます。

ループ内にlet newObject = Object.assign({},parameters);を移動して、オブジェクトごとに新しいオブジェクト参照があるようにしてください。別のvalue値を追加することができます。

var objectFruits = { 
 
name:'apple' 
 
} 
 

 
var fruits = [] 
 

 
function pushToArray(parameters) { 
 
    //var newObject = Object.assign({},parameters); 
 

 
    for(var i=0; i<3; i++) { 
 
    let newObject = Object.assign({},parameters); 
 
    newObject.value = i; 
 
    fruits.push(newObject); 
 
    console.log(newObject); 
 
    } 
 
} 
 

 
pushToArray(objectFruits) 
 

 
console.log(fruits)