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

Question

在ES6中我们可以做到：

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

myFunc({name:'fred'}) // => logs 'fred'

但是如何对嵌套属性执行此操作：

myFunc({event:{target:{name:'fred'}}}) // => I want it to log 'fred'

myFunc应该是什么样的，以便记录'fred'？

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

Answer 1

你可以这样做：

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

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

这是另一个实现，两个参数都有，但第二个完全是optionnal：

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

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

试试这个：

 let myFunc = ({ event: { target: { name } } }) => { console.log(name); }; myFunc({ event: { target: { name:'fred' } } }); // => logs 'fred' 

另请参阅MDN上的示例 。

Answer 3

你可以做：

 let myFunc = ( obj ) => { console.log(obj.event.target.name); }; myFunc({ event: { target: { name: 'fred' } } }); 

要么：

 let myFunc = ( {event: {target: { name } } } ) => { console.log(name); }; myFunc({ event: { target: { name: 'fred' } } });