Javascript，将对象推入 for 循环会导致重复值答案

【问题标题】：Javascript, pushing object in for loop result in duplicated valueJavascript，将对象推入 for 循环会导致重复值
【发布时间】：2021-05-12 09:08:24
【问题描述】：

我在将对象推入 for 循环内的另一个对象时遇到问题。它导致具有重复值。我认为问题是关于references:

var controllers = ["Patrick","Alain"];
var steval = {"name":null,"prix":{max: 5, min: 3},"comments":null};

var evals = [];
for (index = 0; index < controllers.length; ++index) {
      var name = controllers[index];
      var eval = steval;
      eval.name = name;
      console.log(eval);
      evals.push(eval);
}
console.log(evals);
$("#json").html(JSON.stringify(evals));

结果如下：

[{"name":"Alain","prix":{"max":5,"min":3},"comments":null},{"name":"Alain","prix":{"max":5,"min":3},"comments":null}]

我不明白的是，我的 console.log(eval) 返回了正确的值，但显然 evals.push(eval) 总是推送相同的值。

【问题讨论】：

标签： javascript jquery object

【解决方案1】：

总是推送相同的值

因为您的代码中只有一个对象：steval。您只需更改该对象的name 属性即可。

如果要创建多个对象，则在循环内创建对象：

var controllers = ["Patrick","Alain"];
    
var evals = [];
for (index = 0; index < controllers.length; ++index) {
      var name = controllers[index];
      var eval = {"name": name,"prix":{max: 5, min: 3},"comments":null};
      evals.push(eval);
}
console.log(evals);

稍微紧凑：

var controllers = ["Patrick","Alain"];
        
var evals = controllers.map(name => {
  return {"name": name,"prix":{max: 5, min: 3},"comments":null};
});

console.log(evals);

【讨论】：

谢谢。我确实想过，但感觉那样做不太好。无论如何要“克隆”该对象而不是简单地引用它？
如果您正在使用嵌套对象，则没有一种简单的方法。我也看不出这样做有什么好处。 “漂亮”是相对的。例如。如果相关代码保持更紧密，我喜欢它，所以我更愿意看到需要它的对象文字而不是一些不太清楚的 clone(someObject) 调用，我首先必须找出 someObject 是什么。
你说得对，看起来更合乎逻辑
将数据与逻辑分开存储是一种常见的做法，将steval 放在方法中可能会使其难以维护（而上面的评论认为它就在那里更容易维护）。此外，如果您碰巧想在不止一次的地方使用它，那么在一个地方定义它是有意义的。取决于场景/偏好，在问题中的小 sn-p 中，它可能更容易放入代码中。
@freedomn-m：当然，上下文就是一切。我们不知道数据到底是什么，什么是动态与静态等。这都是权衡。最终，一个合适的class 可能是最好的解决方案。

【解决方案2】：

正如另一个答案（信用到期）中所述，只有一个 steval 实例被更改和推送。

您可以使用 jquery 的 $.extend（标记为 jquery）“克隆”steval，并将 deep 设置为 true（因为您有嵌套对象）：

let eval = $.extend(true, {}, steval);

或者，您可以使用 JSON 字符串化/解析来进行克隆（或将原始数据存储为 JSON 以跳过字符串化部分）——但这并不理想。

var controllers = ["Patrick","Alain"];
var steval = {"name":null,"prix":{max: 5, min: 3},"comments":null};

var evals = [];
for (index = 0; index < controllers.length; index++) {
      var name = controllers[index];
      let eval = $.extend(true, {}, steval);
      eval.name = name;
      console.log(eval);
      evals.push(eval);
}
console.log(evals);
//console.log(JSON.stringify(evals));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：