有人可以向我解释此es6语法吗？

Question

Can someone explain the following statement?

  return state.map(todo =>
    (todo.id === action.id)
      ? {...todo, completed: !todo.completed}
      : todo
  )

More specifically this line

{...todo, completed: !todo.completed}

Why is there two arguments in the true portion of the ternary operation?

What is ?

...

Answer 1

The ...todo , is the spread syntax, meaning the completed: !todo.completed property will be added to the existing todo object along with the previous properties. Using it you don't have to manually copy over the existing properties.

Treat it as expanding the 'todo' object.

Also (todo.id === action.id) is checking whether the id is same in both objects and then adding the completed: !todo.completed property else keeping the old object as it is.

Please check out this reference guide:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 2

{
  ...todo,
  completed: !todo.completed
}

is simply making a copy of todo but with a new completed property. In this case, it's equivalent to the inverse of todo 's completed property. It is a plain JS Object.