Question

let schools = [
{ name: "Yorktown"},
{ name: "Stratford" },
{ name: "Washington & Lee"},
{ name: "Wakefield"}
]

let updatedSchools = editName("Stratford", "HB Woodlawn", schools)
console.log( updatedSchools[1] ) // { name: "HB Woodlawn" }


    const editName = (oldName, name, arr) =>
      arr.map(item => {
        if (item.name === oldName) {
          // what is happening below!?
          return {
            ...item,
            name
          }
        } else {
          return item
        }
      })

首先，我很抱歉，如果这个问题对您来说很容易，但我无法理解代码段的返回声明是如何运作的，并且非常感谢您的帮助。

return { ...item, name }

所以我希望updatedSchool成为（即使语法无效）：

[
  {name: "Yorktown"},
  { name: "Yorktown", "HB Woodlawn"},  
  { name: "Washington & Lee"},  
  { name: "Wakefield"}  
]

为什么会产生{ name: "HB Woodlawn" }？

Answer 1

一步一步的desugar表达

{...item, name }

首先{name}是{name: name}

的捷径

然后{...obj}与Object.assign({}, obj)

相同

两者结合会产生Object.assign({}, obj, {name: name})

鉴于obj = {name: 'Stratford'}只有一个属性name，它只会创建新对象并用新名称替换名称。

您可以阅读Object.assign here

Answer 2

＆＃13;

return {    // the spread operator assigns existing properties of item
  ...item,  // to the new returned object
  name      // similar to return Object.assign(item, {name: name})
}

＆＃13;

Answer 3

rest参数可以在对象以及支持它的浏览器中的数组上工作。如果您想了解代码，最好通过它。

editSchools是一个需要oldName，name和array的函数。它将映射的结果从array返回到新数组。新数组中的每个元素由map执行的回调函数确定。如果item的{{1}}属性等于name，则会创建一个新对象，代替oldName。这就是混乱所在。

它做了一些奇怪的事情。新对象接收{...item, name}对象的所有键，然后它将item属性定义（或重新定义）为name提供给name的值。< / p>

因此，本质上，此代码查找具有editSchools键的对象，其值为name，并将其替换为具有已更改oldName属性的相同新对象到新{ {1}}值。

为什么我的传播操作员会显示这种行为？

3 个答案: