javascript - 将元素插入数组会导致前面的元素被修改

Question

我正在将元素插入数组，问题是每次我插入一个新元素时，所有先前的元素都会等于最后一个元素。 我遇到过this post ，但我仍然不知道如何解决该问题

请参阅这个 jsFiddle。正如帖子所建议的，我将 instance 的声明移至 for 循环，但我仍然遇到同样的问题。也就是说，代码的输出如下所示:[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

您应该使用 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>