如何使用变量进行推送？

Question

您好，我在 JavaScript 中使用 push 方法时遇到问题。 我正在推动一个对象，在每次推动中我只更改对象的一些属性。 我的问题是，当我查看数组时，它给了我一个对象数组，其中包含最后一次分配的属性。

当我此时查看变量 Panel 时，我得到了一个包含两个相同值的位置的数组。 这个值是我最后一次赋值的对象。

 var ARGS = { "var-Instalation":"vi"}; var Panel = new Array(); var ParamsSingleStat = { "datasource": "influxdb", "targets": [{ "groupBy": [], "measurement": "mqtt_consumer", "select": [ [{ "params": [ "value" ], "type": "field" }] ], "tags": [{ "key": "topic", "operator": "=", "value": "" }] }], "title": "", "type": "singlestat", } var PanelConfStatus = ParamsSingleStat; var PanelAppStatus = ParamsSingleStat; PanelAppStatus.targets[0].tags[0].value = "Instalacion/" + ARGS["var-Instalation"] + "/ECCE/EstadoApp" PanelAppStatus.title = "Estado Aplicacion" Panel.push(PanelAppStatus); console.log(Panel) PanelConfStatus.targets[0].tags[0].value = "Instalacion/" + ARGS["var-Instalation"] + "/ECCE/EstadoConfiguracion" PanelConfStatus.title = "Estado Configuracion" Panel.push(PanelConfStatus);

Answer 1

你得到最后一个赋值的原因是因为在 JavaScript 中，对象是通过引用传递的。 您可以克隆它并将克隆推送到阵列。 您可以使用Object.assign()进行克隆，但考虑到对象的复杂性，我认为这还不够，因为Object.assign()只会浅层克隆您的对象。 我只能建议使用 lodash 进行深度克隆

Object.assign()

Answer 2

您已将相同的变量ParamsSingleStat分配给PanelConfStatus和PanelAppStatus 。 由于 JS 是通过引用调用的，因此您实际上是在两次更新相同的变量。 您必须使用 JSON.parse 或类似文件来创建副本。 例如：

var PanelConfStatus = JSON.parse(JSON.stringify(ParamsSingleStat));
var PanelAppStatus = JSON.parse(JSON.stringify(ParamsSingleStat));

这将为您提供不同的值。

Answer 3

问题是你在最后改变了值，因此 prev 值也改变了。

可以使用 object spread 来获取 ParamsSingleStat 的新对象，然后对其进行变异

 var PanelConfStatus = {...ParamsSingleStat};
 var PanelAppStatus = {...ParamsSingleStat};

Answer 4

您需要克隆 ParamsSingleStat 对象，否则 PanelConfStatus 和 PanelAppStatus 将成为指向同一对象的引用，因此当您更改一个对象时，您也会更改“另一个”。 var 赋值应该是这样的：

var PanelConfStatus = Object.assign({}, ParamsSingleStat);
var PanelAppStatus = Object.assign({}, ParamsSingleStat);

我敢肯定还有很多其他方法可以做到这一点，这是我当场想到的，但是您可以搜索对象克隆。

另外，值得注意的是，建议使用 let 而不是 var （除非您不打算转译您的代码；尽管大多数现代浏览器都接受 let，但我希望）

Answer 5

那是因为您使用对象引用，您需要使用以下内容：

 var PanelConfStatus = Object.assign({}, ParamsSingleStat);
 var PanelAppStatus =  Object.assign({}, ParamsSingleStat);

Answer 6

您的变量PanelConfStatus和PanelAppStatus指向来自ParamsSingleStat的相同值实例。 这是从以下几行完成的：

var PanelConfStatus = ParamsSingleStat;
var PanelAppStatus = ParamsSingleStat;

而不是上面的代码。 创建ParamsSingleStat的副本/克隆。 例如，使用Object.assign({}, yourObjectToCopy) 。 用这个替换上面的两行：

var PanelConfStatus = Object.assign({}, ParamsSingleStat);
var PanelAppStatus = Object.assign({}, ParamsSingleStat);

这样，您的变量将拥有自己的对象副本，并且可以独立修改。