Was machen geschweifte Klammern in Funktionsparameterlisten in es6?

120

Ich sehe immer wieder Funktionen, die so aussehen, in einer Codebasis, an der ich arbeite:

const func = ({ param1, param2 }) => {
  //do stuff
}

Was genau macht das? Es fällt mir schwer, es bei Google zu finden, da ich nicht einmal sicher bin, wie das heißt oder wie ich es in einer Google-Suche beschreiben soll.

javascript ecmascript-6 Nathan
quelle
Mögliches Duplikat der Objektparametersyntax für Javascript-Funktionen?
Bergi

Antworten:

116

Es ist destrukturierend , aber in den Parametern enthalten. Das Äquivalent ohne die Destrukturierung wäre:

const func = o => {
    var param1 = o.param1;
    var param2 = o.param2;
    //do stuff
}
James Thorpe
quelle
11
Um sicherzugehen, dass ich alles richtig verstehe, bedeutet dies im Grunde, dass ein Objekt, das diese Eigenschaften enthält, an die Funktion übergeben wird. Innerhalb der Funktion kann dann automatisch auf die Eigenschaften zugegriffen werden, indem nur ihr Name verwendet wird.
Nathan
7
@ Nathan Ja, siehe speziell den Abschnitt über Objektzerstörung . Beachten Sie jedoch, dass Aktualisierungen der Variablen die ursprünglichen Objekteigenschaften nicht aktualisieren. Es ist nicht so, als würde ein Verweis auf den ursprünglichen Wert erstellt.
James Thorpe
@ JamesThorpe es wäre besser, auf developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
lsborg
11

Dadurch wird ein Objekt als Eigenschaft übergeben.

Es ist im Grunde eine Abkürzung für

let param1 = someObject.param1
let param2 = someObject.param2

Eine andere Möglichkeit, diese Technik ohne Parameter zu verwenden, ist die folgende. Betrachten wir für eine Sekunde, dass someObject diese Eigenschaften enthält.

let {param1, param2} = someObject;
Oz Lodriguez
quelle
3

Es ist eine Objektzerstörungsaufgabe. Wie ich haben Sie es vielleicht überraschend gefunden, weil die Syntax zur ES6-Objektzerstörung aussieht, sich aber NICHT wie eine Objektliteralkonstruktion verhält.

Es unterstützt die sehr knappe Form, in die Sie geraten sind, sowie das Umbenennen der Felder und Standardargumente:

Im Wesentlichen ist es {oldkeyname: newkeyname = defaultvalue, ...}. ':' ist NICHT das Schlüssel / Wert-Trennzeichen; '=' ist.

Einige Folgen dieser Entscheidung zum Sprachdesign sind, dass Sie möglicherweise Dinge wie tun müssen

; ({a, b} = some_object);

Die zusätzlichen Parens verhindern, dass die linken geschweiften Klammern als Block analysiert werden, und das führende Semikolon verhindert, dass die Parens als Funktionsaufruf für eine Funktion in der vorherigen Zeile analysiert werden.

Weitere Informationen finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Beachten Sie, dass Schlüsselfehler während der Objektzerstörungszuweisung NICHT ausgelöst werden. Sie erhalten nur "undefinierte" Werte, unabhängig davon, ob es sich um einen Schlüsselfehler oder einen anderen Fehler handelt, der stillschweigend als "undefiniert" weitergegeben wurde.

> var {rsienstr: foo, q: bar} = {p:1, q:undefined};
undefined
> foo
undefined
> bar
undefined
>
Andrew Wagner
quelle