Destrukturieren Sie eine Funktionsparameter Untereigenschaft

Question

Ich habe eine Function, die ich in der Lage sein möchte, auf 2 Arten zu rufen - und es sollte das gleiche Verhalten.

Gibt es eine ES6-Syntax, die es mir ermöglicht, die Funktion doBar unter Verwendung von beide Wege mit dem gleichen Ergebnis aufzurufen?

Betrachten Sie eine Funktion wie folgt aus:

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

ich einen Rahmen bin mit, die Ereignisse wie so bindet:

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

, die wie so ein Aufruf wird im Wesentlichen verursachen:

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

.. aber ich würde gerne in der Lage sein, beide meine Functionex anrufen plizit auch, wenn auch mit einem richtigen Anruf Signatur wie folgt:

doBar({ foo: 'baz' }) 

Answer 1

können Sie ein default parameter verwenden. Wenn foo nicht gefunden wird, wird der Wert detail.foo verwendet.

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

 
doBar({ foo: 'baz' }) 
 

 

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

Answer 2

Nein, nicht, es sei denn Sie halten dies für eine angemessene Alternative sein:

const thing = { 
    detail: { 
    foo: 'baz' 
    } 
}; 

doBar(thing.detail); 

Answer 3

Sie das nicht richtig in der Parameterdeklaration tun können. setzen Sie Ihre Destrukturierung Zuordnung nur in der Funktionskörper:

function doBar(e) { 
    const { foo = "bar", qux } = e.detail || e; 
    consoel.log(foo, qux); 
} 

Ich möchte in der Lage sein, sowohl meine Funktion aufzurufen explizit als auch

Ich würde empfehlen, dass nicht zu tun. Eine Funktion sollte nur eine Signatur haben und nicht auf verschiedene Arten von Argumenten überladen werden. Seien Sie nur klar, wann Sie was verwenden sollten:

function doBar({ foo = "bar", qux }) { 
    console.log(foo); 
} 
function withDetail(fn) { 
    return e => fn(e.detail) 
} 

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

doBar({ foo: 'baz' })