为什么作为函数参数的内联解构不能按预期工作

Question

假设我的代码需要访问如下所示的状态对象

const store = {
  getState: () => ({
    a: "test",
    b: 1,
    c: 23,
  })
}

还有一个看起来像这样的辅助函数，rest 是为了说明这样一个事实，即它的输出将不仅仅是我传入的解构参数。

function printState ({a, b, ...rest}) {
  console.log(a, b, rest)
}

所以如果我尝试使用内联解构

printState({ a, b } = store.getState())

上面的输出是

"test" 1 Object {
  c: 23
}

我原以为只有 a 和 b 会被传入，而不是对象的其余部分。有谁知道为什么会这样吗？

Answer 1

{ a, b } = store.getState() 是一个赋值表达式，它返回的值始终是右侧的表达式，即 store.getState().

如果你只想要 a 和 b 那么你可以使用和 IIFE。

const store = {
  getState: () => ({
    a: "test",
    b: 1,
    c: 23,
  })
}
function printState ({a, b, ...rest}) {
  console.log(a, b, rest)
}

printState((({a,b}) => ({a,b}))(store.getState()))

Answer 2

printState({ a, b } = store.getState())
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^

因为它是一个赋值表达式，returns 右边的值，所以你的这个函数调用实际上是这样计算的

function printState(_ref) {
  var a = _ref.a,
      b = _ref.b,
      rest = _objectWithoutProperties(_ref, ["a", "b"]);

  console.log(a, b, rest);
}

printState((_store$getState = store.getState(),
             a = _store$getState.a,
             b = _store$getState.b, 
             _store$getState)
);

所以你最终得到的是 printState(store.getState())

您可以在此处粘贴您的代码并查看 Babel

为什么作为函数参数的内联解构不能按预期工作

Why does inline destructuring as a function argument not work as expected

javascript

destructuring