更新对象属性值并将它们推送到 for 循环中的数组中

Question

我正在尝试更新对象的属性，同时循环遍历新值并将它们推送到数组中，我对如何执行此操作有点困惑。我想从一个默认对象开始，只需要更改一些属性值。

我创建了 2 个带有新值的数组来更新默认对象，当我单独记录更新的人 console.log(defaultPerson) 时，我期望的输出被打印出来（更新了姓名和头发颜色的人）。我希望在循环结束时将更新的人员推送到数组中会推送记录时打印的值。

// the default object
const defaultPerson = {
  name: "default",
  address: "Some street",
  hair: {
    color: "default",
  }
}

// new values to update
const newNames = ["Alexander", "Hendrik", "Stephan"];
const newHairColors = ["brown", "brown", "black"];

const updatedPeople = []; // array for updated people

for(let i = 0; i < newNames.length; i++) {
  defaultPerson.name = newNames[i];
  defaultPerson.hair.color = newHairColors[i];
  
  console.log(defaultPerson); // logs the updated object
  updatedPeople.push(defaultPerson); // pushes last values 3 times
}

console.log("Print array");
updatedPeople.forEach(p => console.log(p));

情况似乎并非如此，而是数组中的值是使用新值数组（斯蒂芬，黑色）中的最后一个值更新的对象的 3 倍。

我认为在循环内创建一个新对象并将其设置为等于扩展默认对象，然后更新其值可能是一种解决方案。这样，每个循环都会创建一个新对象，并在将其推入数组之前更新其值。这有效，但仅在人的name 值上，hair.color 仍然保持不变，这可能是因为头发是另一个嵌套对象，所以它继续。

// the default object
const defaultPerson = {
  name: "default",
  address: "Some street",
  hair: {
    color: "default",
  }
}

// new values to update
const newNames = ["Alexander", "Hendrik", "Stephan"];
const newHairColors = ["brown", "brown", "black"];

const updatedPeople = []; // array for updated people

for (let i = 0; i < newNames.length; i++) {
  const newPerson = { ...defaultPerson }; // spread
  newPerson.name = newNames[i];
  newPerson.hair.color = newHairColors[i];

  updatedPeople.push(newPerson);
}

updatedPeople.forEach(p => console.log(p));

Answer 1

而不是推动，我只是将map 名称数组放入“人”对象数组中。请注意，这仅是因为 newHairColors 与 newNames 具有相同的长度。

// the default object
const defaultPerson = {
  name: "default",
  address: "Some street",
  hair: {
    color: "default",
  }
}

// new values to update
const newNames = ["Alexander", "Hendrik", "Stephan"];
const newHairColors = ["brown", "brown", "black"];

const updatedPeople = newNames.map((newName, i) => ({
   ...defaultPerson,
   name: newName,
   hair: {
      ...defaultPerson.hair,
      color: newHairColors[i]
   }
}));

updatedPeople.forEach(p => console.log(p));