2016-02-07 8 views
6

Ich habe den Code anderer Leute überprüft, und während ES2015 im Großen und Ganzen etwas gewöhnungsbedürftig ist, bleibe ich bei Destrukturierung stecken.Den Zusammenhang von Curly Brackets verstehen '{012}

Zuvor wurden in Javascript die Curly Brackets {} entweder für Blöcke oder Objekte verwendet. z.B.

// Curly Brackets Block 
If() { 
    ... 
} 

// Curly Brackets in Obj 
var obj = { 
    a : 1, 
    ... 
} 

jedoch in Destrukturierung, sehen wir immer wieder die folgende Syntax:

let a = ({ a, b }) => { 
} 

Meine Frage ist die Argumente Behälter ein tatsächliches Objekt oder nur ein Block? Bitte erläutern Sie, ob die folgenden die gleiche wie die oben stehenden Code sein:

let a = (a, b) => { 
} 

EDIT: Mein Verständnis (bisher) von Axel Rauschmayers Artikel über Destruturing lesen ist, dass wir nur die Requisiten zuordnen. in einen neuen Obj immer? Ie:

let a = { first : a, second : b } = AnObj; 
=== 
a.a === AnObj.first; 
a.b === AnObj.second; 

Ist das obige korrekt? Wird ein Objekt immer instanziiert? Das macht jedoch keinen Sinn, da in der obigen Funktion das so für die Requisiten geschaffene Objekt ein anonymer Gegenstand wäre, richtig?

Vielen Dank,

+1

diese ein Lesen, wird Ihnen helfen, eine Menge [Destrukturierung] (https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond /ch2.md#destructuring) – Vardius

+0

Wenn Sie wirklich wissen wollen, was passiert, wenn eine Destrukturierungsaufgabe bearbeitet wird, sehen Sie sich die Spezifikation an: http://www.ecma-international.org/ecma-262/6.0/#sec -destrukturierung-Zuordnung –

Antwort

2

Nein, die geschweiften Klammern in der Destrukturierung bilden weder einen Block noch ein Objektliteral.

Sie sind definitiv kein Block, weil sie keine Anweisung sind (und keine Anweisungsliste enthalten), sie sind ein Ausdruck wie ein Objektliteral. Tatsächlich haben sie sogar die gleiche Syntax wie ein Objektliteral, der einzige Unterschied besteht darin, dass sie sich in der Position eines Zuweisungsziels (linke Seite eines Zuweisungsoperators) oder eines Funktionsparameters befinden.

Ist let a = ({ a, b }) => {…} die gleiche wie let a = (a, b) => {…}?

Nein, wirklich nicht. Beide Parameterlisten deklarieren die Variablen a und b für den Funktionsumfang, aber die erste Funktion erwartet ein Objekt mit den Eigenschaften .a und .b, während die zweite Funktion zwei Argumente erwartet.

Mein Verständnis ist, dass wir nur die Eigenschaften in ein neues Objekt mappen?

Nein. Es wurde kein neues Objekt erstellt/instanziiert. Es gibt nur das Objekt, an dem du vorbeikommst (die rechte Seite). Und es ist Destrukturierte - "auseinander gezogen" - in Stücke, die dann den verschiedenen Unterzielen (Variablen, Eigenschaftsreferenzen) zugewiesen werden.

Um

a.b = anObj.first; 
a.c = anObj.second; 

mit einer Destrukturierung Zuweisung schreiben Sie

verwenden würden
({first: a.b, second: a.c}) = anObj; 

(die Klammern sind notwendig, um die Expression von einem Block zu unterscheiden).

Der häufigere Anwendungsfall ist jedoch für variable Initialisierungen. Sie können

let {first: b, second: c} = anObj; 

let b = anObj.first, 
    c = anObj.second; 

verkürzen und auch gibt es eine Abkürzung, wenn die Variable den gleichen Namen wie die Eigenschaft hat, so

let first = anObj.first, 
    second = anObj.second; 

entspricht

let {first, second} = anObj; 

Ist let a = { first : a, second : b } = anObj; korrekt?

Nein, das macht nicht viel Sinn. Es wäre desugar zu

let a; 
a = anObj.first; 
b = anObj.second; 
a = anObj; 
+0

Eine wunderbare Antwort, die die Verwirrung in meinem Kopf beseitigt und eine Menge Fragen über die geschweiften Klammern in meinem Kopf verursacht :) Danke @Bergi – Kayote

0

Es ist für Destrukturierung ist:

var obj = {a: 1, b: 2}, 
    add = ({a, b}) => a + b; 

console.log(add(obj)); //3 

Also im Grunde auf die Aussagen innerhalb der Funktion es gibt es zwei Argumente erscheinen würde, aber wenn man es so nennen Sie nur ein Objekt übergeben.

+0

Danke für die Antwort, aber es beantwortet nicht die Frage/n. Ich versuche den Kontext zu verstehen und was während der Zerstörung passiert. – Kayote