要素を配列にプッシュすると、前の要素が変更されます

Question

要素を配列にプッシュしていますが、新しい要素を押すたびに前の要素がすべて最後の要素に等しくなるという問題があります。 私はthis postに出くわしましたが、問題を解決する方法がまだわかりません。

このjsFiddleをご覧ください。投稿が示唆しているように、私はinstanceの宣言をfor-loopに移しましたが、私はまだ同じ問題を抱えています。すなわち、コードの出力は[46, 46]のようになります。しかし、私はそれが[23, 46]と期待します。

私は本当に狂っています。何か案は？？？

$(document).ready(function() { 
 
    var json = {'name': 'Anna', 'counter': 1} 
 
    var counters = [23, 46]; 
 
    var result = []; 
 
    $(counters).each(function() { 
 
    
 
     var instance = json; 
 
     instance.counter = this; 
 
     result.push(instance); 
 
    }); 
 
    
 
    $(result).each(function(){ 
 
     $('#test').append('<li>' + this.counter + '</li>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id = 'test'> 
 

 
</ul>

Answer 1

あなたはeach関数の内部でオブジェクトを移動し、すべてのオブジェクトに同じ参照を使用せずに、新しい参照を呼び出すために作成することができます。

$(document).ready(function() { 
 
    var counters = [23, 46]; 
 
    var result = []; 
 
    $(counters).each(function() { 
 
     var instance = { name: 'Anna', counter: 1 }; 
 
     instance.counter = this; 
 
     result.push(instance); 
 
    }); 
 
    
 
    $(result).each(function(){ 
 
     $('#test').append('<li>' + this.counter + '</li>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id = 'test'></ul>

代わりに、あなたはあなたが使用して深いコピーを行う必要がありますObject.create

$(document).ready(function() { 
 
    var json = {'name': 'Anna', 'counter': 1} 
 
    var counters = [23, 46]; 
 
    var result = []; 
 
    $(counters).each(function() { 
 
     var instance = Object.create(json); 
 
     instance.counter = this; 
 
     result.push(instance); 
 
    }); 
 
    
 
    $(result).each(function(){ 
 
     $('#test').append('<li>' + this.counter + '</li>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id = 'test'></ul>

Answer 2

を持つ新しいオブジェクトを作成することができvar instance = jQuery.extend(true,{},json);

$(document).ready(function() { 
 
    var json = {'name': 'Anna', 'counter': 1} 
 
    var counters = [23, 46]; 
 
    var result = []; 
 
    $(counters).each(function() { 
 
    
 
     var instance = jQuery.extend(true,{},json); 
 
     instance.counter = this; 
 
     result.push(instance); 
 
    }); 
 
    
 
    $(result).each(function(){ 
 
     $('#test').append('<li>' + this.counter + '</li>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id = 'test'> 
 

 
</ul>