javascript - 映射有条件改变的嵌套字段

Question

给定一个数组，例如:

people = [
    {
        name: 'Bob',
        sex: 'male',
        address:{
          street: 'Elm Street',
          zip: '12893'
        }
    },
    {
        name: 'Susan',
        sex: 'female',
        address:{
          street: 'Hickory Street',
          zip: '00000'
        }
    }
]

我正在尝试编写一个函数，它将嵌套字段“zip”中的“00000”的特定实例更改为字符串“12893”，并返回一个与初始数组相同的新数组，除了with 修正值。到目前为止，我对一个功能的尝试是:

function zipFix (initialArray) {
    return initialArray.map(function(person) {
        if(person.address.zip === '00000')
          person.address.zip = "12893"
        return person
    });
}

我知道这个函数正在改变“initialArray”中的值，这是不应该发生的。我该如何着手编写我的函数，以便我可以有效地使用 map 函数来创建一个新的、更正的数组？谢谢。

Answer 1

在对值进行映射时，您需要为每个对象创建一个副本。最简单的方法是使用 object spread syntax ({...obj})。

这会将所有值(name、address 等)“传播”到一个新对象中。所以任何改变都不会改变它。但是，它是“浅”的，这意味着它 将是一个新对象，但它的值 是相同的。因此，由于 address 也是一个对象，我们也需要复制它，这也是 address 值嵌套传播的原因。

people = [{
    name: 'Bob',
    sex: 'male',
    address: {
      street: 'Elm Street',
      zip: '12893'
    }
  },
  {
    name: 'Susan',
    sex: 'female',
    address: {
      street: 'Hickory Street',
      zip: '00000'
    }
  }
]

function zipFix(initialArray) {
  return initialArray.map(function(person) {
    // Create a new "copy" of the person. Using object spread
    // will create a "shallow" copy, so since address is also an
    // object it will have to be spread (same for other objects that might
    // be mutated).
    const newValue = { ...person, address: { ...person.address }}

    if (newValue.address.zip === '00000') {
      newValue.address.zip = "12893";
    }

    return newValue
  });
}

console.log(zipFix(people))
console.log(people) // unchanged