如何使用變量進行推送？

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);

這樣，您的變量將擁有自己的對象副本，並且可以獨立修改。