Javascript:切片和附加 keyValue 后重复数组不正确

Question

我很难弄清楚为什么 persons 数组包含新的 age 键值对。
我想通过切片(并因此创建一个独立的副本)我可以只在 newArray 上工作并且只将 age 附加到它......但它似乎正在更新 人还有??
提前致谢

const persons = [
  { first: 'Albert', last: 'Einstein', birthYear: 1879, deathYear: 1955 },
  { first: 'Isaac', last: 'Newton', birthYear: 1643, deathYear: 1727 },
  { first: 'Galileo', last: 'Galilei', birthYear: 1564, deathYear: 1642 },
  ];

function appendAge(originalArray) {
  var newArray = originalArray.slice(0);

  newArray.forEach(item => {
    item['age'] = item.deathYear - item.birthYear;
  })
  return newArray
}
console.info(persons)
var newPersons = appendAge(persons)
console.info(newPersons)

Answer 1

slice 进行浅拷贝，这意味着它只复制顶层的值，包括引用，实际上并不复制引用的值本身。

这意味着两个数组中的每个人对象都是同一个对象。

一个简单的解决方案是为您的 person 对象创建自定义复制函数，并将其与 map 一起使用以复制数组。

const people = [
  { first: 'Albert', last: 'Einstein', birthYear: 1879, deathYear: 1955 },
  { first: 'Isaac', last: 'Newton', birthYear: 1643, deathYear: 1727 },
  { first: 'Galileo', last: 'Galilei', birthYear: 1564, deathYear: 1642 },
  ];

function copyPerson(person) {
  return Object.assign({}, person);
}

function copyPeople(people) {
  return people.map(copyPerson);
}

function appendAge(people) {
  const newArray = copyPeople(people);

  newArray.forEach(item => {
    item['age'] = item.deathYear - item.birthYear;
  });

  return newArray;
}

console.info('----------------------------------------');
console.info('Old People');
console.log(people)
console.info('----------------------------------------');
console.info('New People');
console.log(appendAge(people));

您还可以查看 How do I correctly clone an object in JavaScript用于其他解决方案。