verschachtelte Objekte als Funktion Destrukturierung Parameter

Question

In ES6 wir tun können:

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

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

Aber wie mache ich es für verschachtelte Eigenschaften wie folgt aus:

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

Was wie myFunc aussehen sollte, so dass es protokolliert "Fred"?

Ich kann das übergebene Objekt nicht ändern. Ich möchte die Destrukturierung verwenden, um diesen oder einen anderen geeigneten ES6-Ansatz zu erreichen.

Answer 1

Sie können einfach tun, wie folgt:

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

 
myFunc({event: {target: {name: 'fred'}}})

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

Hier ist eine andere Implementierung, sowohl in den Parametern, aber der zweite ist ganz 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

Versuchen Sie folgendes:

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

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

Siehe auch examples on MDN.

Answer 3

Sie tun können:

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

 
myFunc({ event: { target: { name: 'fred' } } });

Oder:

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

 
myFunc({ event: { target: { name: 'fred' } } });