解构嵌套对象作为功能参数

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的样子，这样它会记录什么“弗来德”？

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

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

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

参见：

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

试试这个。

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' } } });