对对象使用 ... 运算符答案

【问题标题】：Using the ... operator on objects对对象使用 ... 运算符
【发布时间】：2017-03-30 18:53:29
【问题描述】：

我不知道如何使用展开运算符更深一层。我正在使用 Redux，我有这个用户状态：

const INITIAL_STATE = {
    token: null,
    progress: {
        hasSeenTutorial: false,
        hasSignedUp: false
    },
    information: {
        fullname: null,
        username: null,
        phone: null,
        verificationCode: null
    }
}

我正在尝试在我的操作中使用扩展运算符将hasSeenTutorial 更改为true：

case 'UPDATE_TUTORIAL_SEEN':
            return {...state, hasSeenTutorial: action.payload}

但这会在我的对象末尾添加一个新的hasSeenTutorial，所以显然我想使用这样的东西：

case 'UPDATE_TUTORIAL_SEEN':
            return {...state, progress.hasSeenTutorial: action.payload}

注意添加的progress.

但这不是您正确访问它的方式 - 它会引发错误，正确的方法是什么？

注意：关键是也不要修改 hasSignedUp - 我只想使用扩展运算符访问和修改 hasSeenTutorial。

编辑：这个问题是独一无二的——我想知道如何只使用扩展语法 ... 而不是使用 Object.create 或 Object.assign 来解决这个问题——如果我使用那些我可能不会混入的问题同时...。

【问题讨论】：

扩展语法，而不是运算符。
@squint 它是一个运算符。
@philipp 它是一个 like 运算符，但它不是表达式语法的一部分。它是一个语法元素，例如 { 或 ; 。
@ARMATAV MDN 是一个 Wiki，这是协作 wiki 需要持续监控和改进的一个很好的例子：) 如果您查看 the actual spec，它永远不会被称为“操作员”。跨度>
@philipp：这真的就像x = [a, b, c] 使用逗号的方式一样，但这不是逗号运算符（尽管有这样的运算符）。 ... 是 language grammar 的一部分，表示基于使用位置的行为。我确实看到 MDN 在其 operators 中包含它，但是 MDN 经常是错误的，所以我只快速搜索了规范并发现用作标点符号但与运算符无关。

标签： javascript redux

【解决方案1】：

case 'UPDATE_TUTORIAL_SEEN':
  return {
    ...state,
    progress: {
      ...state.progress,
      hasSeenTutorial: action.payload
    }
  };

【讨论】：

在这个演示中失败：jsfiddle.net/ase8t3Lc 不过不知道是不是实现问题。
它对我有用，正是我想要的——当定时器到时会接受——非常感谢，@chandlervdw
我现在看到这是 ES Next 的一部分，并且大多数当前版本还不支持它，至少不是没有标志。对于尝试使用它的人来说，这是一件好事。