javascript - 返回值中的传播运算符错误，解析错误

Question

尝试直接返回包含扩展运算符的项目时，出现解析错误。如果我在返回它之前将它分配给一个对象，则没有解析错误。我想知道为什么。

当我看到指向扩展运算符的解析错误时，我首先怀疑没有 ES2018，但通过一些实验，我发现扩展运算符正在工作。

第一个 WorkoutSet 是这样定义的。 workoutSets: [ { id: 0, group: 0, repeat: 0, dist: 25, rest: 20, speed: "Easy", total: 0, notes: "" } ]

这显示了一个解析错误点... this.state.workoutSets.map( item => { ...item, repeat: e.target.value } )})

这成功了： this.state.workoutSets.map( item => item = { ...item, repeat: e.target.value } )})

这也成功了： this.state.workoutSets.map( item => item.group === 0 ? { ...item, repeat: e.target.value} : item)})

我只是好奇为什么第一个例子失败了。

score 0 · Accepted Answer

我猜在您的第一次尝试中您打开括号{}，因此 javascript 认为它是一个代码块，并且在代码块.中被解析为“十进制”或“对象实例属性访问器”。

因此，如果您想使用第一种样式编写代码，您可以执行类似的操作

set.map(item => {return{...item, foo: 'bar'}})

是的，你需要两对括号return

在其他 2 次尝试中，您从分配开始，因此 js 明白您正在返回值。

score 0 · Accepted Answer

您有一个解析错误，因为 javascript 将{}箭头后的括号=>视为函数的主体。不作为返回对象。

item =>  { ...item, repeat: e.target.value }

您可以将这部分代码视为

function (item) {
  ...item
  repeat: e.target.value
}

此代码不正确。

因此，如果您需要在箭头函数中返回一个对象，则需要将其包装在括号中()：

item => ({ ...item, repeat: e.target.value })

score 0 · Accepted Answer

map需要为每个元素返回一个值的函数是WorkoutSets数组，第一个示例失败，因为您刚刚进行了分配并且您没有返回任何内容。另一方面，第二个和第三个示例成功了，因为您返回了item

3 回答 3