JS array.push 不断覆盖

Question

我正在尝试将对象传递到 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"
    }
   ]

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

Answer 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 的引用，同时保存了最初包含在 [=12] 中的所有数据=].

JS array.push 不断覆盖

JS array.push keeps overwriting

javascript

arrays

for-loop

node.js

javascript-objects