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())
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^

因为它是一个赋值表达式，它返回右侧值，所以您的this函数调用实际上是像这样计算的

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

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

2 个答案: