JS array.push 不断覆盖[重复]答案

【问题标题】：JS array.push keeps overwriting [duplicate]JS array.push 不断覆盖[重复]
【发布时间】：2022-01-05 16:03:09
【问题描述】：

我正在尝试将对象传递到 for 循环中的数组中。该值不断被覆盖。

const files = require("./getFiles")();

module.exports = function templating() {
  let design = JSON.parse(files[1]),
    data = JSON.parse(files[2]),
    count = Object.keys(data).length,
    x = [];
  for (let i = 0; i < count; i++) {
    let tempDesign = design,
      tempData = data;
    tempDesign.columns[0].items[0]["url"] = tempData[i].url;
    tempDesign.columns[1].items[0]["text"] = tempData[i].name;
    tempDesign.columns[1].items[1]["text"] = tempData[i].desc;
    tempDesign.columns[1].items[2]["facts"][0]["value"] = tempData[i].priceText;
    tempDesign.columns[1].items[3]["actions"][0]["data"] = tempData[i].price;
    x.push(tempDesign);
  }
  return x;
};

我希望我的输出看起来像这样：

sample= [
    {
     "x":"data",
     "y":"data"
    },
    {
     "a":"data",
     "b":"data"
    },
    {
     "c":"data",
     "d":"data"
    },
    {
     "e":"data",
     "f":"data"
    },
   ]

相反，我得到了这个：

sample= [
    {
     "e":"data",
     "f":"data"
    },
    {
     "e":"data",
     "f":"data"
    },
    {
     "e":"data",
     "f":"data"
    },
    {
     "e":"data",
     "f":"data"
    }
   ]

循环仅将最后一个对象推入数组，但计数正确。

【问题讨论】：

let tempdesign = design 不会创建副本，而只会创建一个引用。因此，它指向同一个对象。所以你一遍又一遍地推送（和修改）同一个对象......
我是编码新手。你能帮我改一下语法吗？
感谢您的帮助。已更正。

标签： javascript node.js arrays for-loop javascript-objects

【解决方案1】：

这里的这一行：

let tempDesign = design,

将创建一个对变量design 的引用。（如果您不知道引用是什么，请将其视为现有变量的替代名称）。稍后，修改tempDesign 的内容后，将其推送到数组中。新的数组元素包含对design 的引用。

现在，如果我们查看 for 循环的下一次（可能）迭代，新变量 tempDesign 是对同一变量 design 的另一个引用，该变量已被数组中的第一个元素引用x，即被推送到数组中！因此，for 循环的每次下一次迭代都会推送另一个对数组 x 的重复引用，所有这些都引用同一个变量 design。

解决方法是制作变量design 的副本，以避免创建展示的参考“迷宫”。在 JavaScript 中有多种克隆对象的方法，但是这个简单而有效的方法应该可以在您的用例中解决问题：

let tempDesign = JSON.parse(JSON.stringify(design));

这将创建一个新变量tempDesign，它本身就是一个对象，因此不再是对design 的引用，同时保留了最初包含在design 中的所有数据。

【讨论】：

这很有帮助，非常感谢。