javascript - 根据另一个数组的值设置数组中键的值

Question

我已经附上了我想要完成的工作概念的代码笔( http://codepen.io/anon/pen/PGkQmq )。此工作代码根据 defaultNameArray 中的相应位置，将名称分配给 JSON 对象中名称键的空值。

我的问题是在代码中尝试在代码中生成长度等于defaultNameArray 的defaultObj 数组。

var defaultNameArray = ["Bob", "Alice", "Joe"];

var defaultObj = [
  {
    "name": null,
    "age": "32",
    "height": "175",
    "etc": "someData",
  },
];

for (var i = 0; i < defaultNameArray.length -1; i++) {
    defaultObj.push(defaultObj[0]);
}

for (var i = 0; i < defaultObj.length; i++) {
    defaultObj[i].name = defaultNameArray[i];
    console.log("defaultObj[i].name: " + defaultObj[i].name);
    console.log("defaultNameArray[i]" + defaultNameArray[i]);
};

var str = JSON.stringify(defaultObj);
console.log('defaultObj: ' + str);

此代码生成一个通用数组，然后我应该能够迭代该数组，以相对于另一个数组(名称)中的位置为键分配值。最终结果是所有名称都是“Joe”，即名称数组中的最后一个位置。为什么迭代生成的 JSON 数组的行为与使用代码中定义的数组(如附加的 codepen)的行为不同，我缺少什么？

Answer 1

您一次又一次地将同一个对象 defaultObj[0] 推送到数组中。如果您改变该对象，无论您从哪个数组索引查看它，都会看到该更改。它是同一个、单一的对象。如果更改 defaultObj[0].name，则更改 defaultObj[1].name:这是同一件事。

因此，您需要复制(克隆)您的对象。为此，您可以使用 Object.assign ，它执行浅复制——足以满足您的情况:

更改:

defaultObj.push(defaultObj[0]);

至:

defaultObj.push(Object.assign({}, defaultObj[0]));

var defaultNameArray = ["Bob", "Alice", "Joe"];

var defaultObj = [
  {
    "name": null,
    "age": "32",
    "height": "175",
    "etc": "someData",
  },
];

for (var i = 0; i < defaultNameArray.length -1; i++) {
    defaultObj.push(Object.assign({}, defaultObj[0]));
}

for (var i = 0; i < defaultObj.length; i++) {
    defaultObj[i].name = defaultNameArray[i];
    console.log("defaultObj[i].name: " + defaultObj[i].name);
    console.log("defaultNameArray[i]" + defaultNameArray[i]);
};

var str = JSON.stringify(defaultObj);
console.log('defaultObj: ' + str);