javascript - 为什么我的差价操作符会出现这种行为？

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

一步一步简单地对表达式进行脱糖

{...item, name }

第一个 {name} 是 {name: name} 的快捷方式

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

结合两者得到 Object.assign({}, obj, {name: name})

给定 obj = {name: 'Stratford'} 只有一个属性 name 它将简单地创建新对象并用新对象替换 name。

你可以阅读关于Object.assign here