ネストされたforループのプロパティを追加すると、各ループのforループと同じ値になります

Question

トランプの情報（cardInfo）を含む配列があります。配列のサンプルが以下のコードに追加されています。各カードに重複がある可能性があるので、この情報を使用して、そのタイプの各カード（プロパティ 'frequency1'）の新しい配列（drawPile）にその情報をプッシュすることでデッキを作成します。

var common = 4; 
var uncommon = 3; 
var rare = 2; 
var cardInfo = [ 
    {name:'Card A',frequency1:common,frequency2:rare,frequency3:0}, 
    {name:'Card B',frequency1:common,frequency2:uncommon,frequency3:0}, 
    {name:'Card C',frequency1:uncommon,frequency2:uncommon,frequency3:0} 
]; 

var drawPile = []; 
for (var cType = 0; cType < cardInfo.length; cType++) { 
    for (var freq = 0; freq < cardInfo[cType].frequency1; freq++) { 
     drawPile.push(cardInfo[cType]); 
     console.log(drawPile.length - 1); 
     drawPile[(drawPile.length - 1)].id = (drawPile.length - 1); 
     console.log(drawPile[(drawPile.length - 1)]); 
    } 
} 

得コンソールログは、しかし、すべての4「カードA」カードは、IDプロパティ3を有することを示す、すべての4「カードB」カードは、IDプロパティ7を有し、すべての3「カードC」カードidプロパティ10を持つ。これは、idプロパティを追加する前にすべての.push（）コマンドに対してネストされた（freq）ループが実行されているかのようである。

他のstrangeness：jsfiddleでこのコードを実行すると、最初に実行してコンソールログを開くと、これらの結果をレプリケートできますが、コンソールlofが開いた後に実行すると、意図した通りに動作します。

各カードに一意の識別子が割り当てられるようにするにはどうすればよいですか？

EDIT：完全に新しいforループを作成して、特にidプロパティを追加する場合は全く同じ結果が得られますが、これはまったく見知らぬものです。this code。

Answer 1

cardInfoコレクションをループするときに、cardInfoインスタンスごとに、周波数をループします。技術的には、cardInfoの同じインスタンスを取得する各周波数に対して、技術的には、各周波数繰り返しに対して同じcardInfoインスタンスを更新しています。今度はあなたの次の声明が出ますが、私はそれぞれの反復に対してconsole.logと書いています。しかし、コードをデバッグするときには、console.logが正しく出力されますが、デバッグなしで実行される場合は、このような場合には不安です。では、どうすればこの問題を解決できますか？

関連する頻度の繰り返しごとに同じインスタンスが変更されていると判断した後、私はカードを複製することにしました（これは素晴らしいアイデアだとは言えませんが、概念を証明しています）。

JSON.parse(JSON.stringify(cardInfo[cType])); 

これもこれを達成する最も効果的な方法ではありませんが、問題があると思われる箇所を強調しています。

私はこの変更をfiddleに適用しました（コードも少し簡略化しました）。クローンを削除すると、現在のように動作しますが、クローニングと同じように動作します。

私はそれはあなたがループ内drawPile配列へのオブジェクト参照を推進している

Answer 2

に役立ちます願っています。そのため、「カードA」のカードはすべて、同じIDを持つ配列と同じIDを持っています。ループにプッシュする前にオブジェクトをクローンする必要があります。以下のコードをコードに変更することができます。

for (var freq = 0; freq < cardInfo[cType].frequency1; freq++) { 
      drawPile.push(JSON.parse(JSON.stringify(cardInfo[cType]))); 
      console.log(drawPile.length - 1); 
      drawPile[(drawPile.length - 1)].id = (drawPile.length - 1); 
      console.log(drawPile[(drawPile.length - 1)]); 
     }