将嵌套对象解构为函数参数

dan*_*y74 6 javascript destructuring ecmascript-6

在 ES6 中,我们可以这样做:

let myFunc = ({name}) => {
  console.log(name)
}

myFunc({name:'fred'}) // => logs 'fred'
Run Code Online (Sandbox Code Playgroud)

但是我该如何处理这样的嵌套属性:

myFunc({event:{target:{name:'fred'}}}) // => I want it to log 'fred'
Run Code Online (Sandbox Code Playgroud)

myFunc 应该是什么样子才能记录“fred”?

我无法更改传入的对象。我希望使用解构来实现这种或其他一些合适的 ES6 方法。

joh*_*ohn 6

你可以简单地这样做:

const myFunc = ({event: {target: {name}}}) => {
  console.log(name)
}

myFunc({event: {target: {name: 'fred'}}})
Run Code Online (Sandbox Code Playgroud)
.as-console-wrapper { max-height: 100% !important; top: 0; }
Run Code Online (Sandbox Code Playgroud)

这是另一个实现,两者都带有参数,但第二个完全是可选的:

const myFunc = (
      {name: name},
      {event: {target: {name: eventTargetName = ''} = ''} = ''} = ''
    ) => {
      console.log(name, eventTargetName)
    }

myFunc({name:'fred'})
myFunc({name:'papi'}, {event: {target: {name: 'fredo'}}})
Run Code Online (Sandbox Code Playgroud)
.as-console-wrapper { max-height: 100% !important; top: 0; }
Run Code Online (Sandbox Code Playgroud)