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>

Answer 2

您可以移动$(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>

$(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>');
  });
});

作为替代方案，您可以使用Object.create

创建新对象

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

# systemctl status haproxy

● haproxy.service - SYSV: HA-Proxy is a TCP/HTTP reverse proxy which is particularly suited for high availability environments.
   Loaded: loaded (/etc/rc.d/init.d/haproxy; bad; vendor preset: disabled)
   Active: failed (Result: exit-code) since Fri 2017-11-03 03:34:04 EDT; 16s ago
     Docs: man:systemd-sysv-generator(8)
  Process: 6170 ExecStart=/etc/rc.d/init.d/haproxy start (code=exited, status=1/FAILURE)

Nov 03 03:34:04 server systemd[1]: Starting SYSV: HA-Proxy is a TCP/HTTP reverse proxy which is particularly suited for high availability environments....
Nov 03 03:34:04 server haproxy[6170]: /etc/rc.d/init.d/haproxy: line 26: [: =: unary operator expected
Nov 03 03:34:04 server haproxy[6170]: Starting haproxy: [WARNING] 306/033404 (6178) : config : frontend 'GLOBAL' has no 'bind' directive. Please declare it... intended.
Nov 03 03:34:04 server haproxy[6170]: [ALERT] 306/033404 (6178) : Starting frontend http_front: cannot bind socket [0.0.0.0:80]
Nov 03 03:34:04 server haproxy[6170]: [FAILED]
Nov 03 03:34:04 server systemd[1]: haproxy.service: control process exited, code=exited status=1
Nov 03 03:34:04 server systemd[1]: Failed to start SYSV: HA-Proxy is a TCP/HTTP reverse proxy which is particularly suited for high availability environments..
Nov 03 03:34:04 server systemd[1]: Unit haproxy.service entered failed state.
Nov 03 03:34:04 server systemd[1]: haproxy.service failed.
Hint: Some lines were ellipsized, use -l to show in full.

将元素推入数组会导致修改前面的元素

2 个答案: