javascript - 解构函数参数子属性

Question

我有一个函数，我希望能够以两种方式调用它 - 并且它的行为应该相同。

是否有 ES6 语法允许我使用两种方式调用下面的函数 doBar 并获得相同的结果？

考虑这样的函数:

const doBar = ({ foo = 'bar' }) => {
  console.log(foo) // should log 'baz'
}

我正在使用一个绑定(bind)事件的框架，如下所示:

<x-component on-some-event="doBar"></x-component>

这基本上会导致像这样的调用:

// where e = { detail: { foo: 'baz' } }
doBar(e)

..但我希望能够显式地调用我的函数，尽管使用正确的调用签名，如下所示:

doBar({ foo: 'baz' })

Answer 1

您可以使用 default parameter 。如果未找到 foo，它将使用 detail.foo 的值。

const doBar = ({ detail = {}, foo = detail.foo }) => {
  console.log(foo) // should log 'baz'
}

doBar({ foo: 'baz' })


doBar({
  detail: {
    foo: 'baz'
  }
});