Co robią nawiasy klamrowe w instrukcjach `var {…} =…`?

117

Nie jestem pewien, czy jest to składnia JS specyficzna dla Mozilli, ale często znajdowałem zmienne deklarowane w ten sposób, na przykład w dokumentach SDK dodatków :

var { Hotkey } = require("sdk/hotkeys");

i w różnych chrome JavaScript ( letoświadczenie jest używane zamiast var),

let { classes: Cc, interfaces: Ci, results: Cr, utils: Cu }  = Components;

Wydało mi się to bardzo zagmatwane, ale nie jestem w stanie znaleźć żadnej dokumentacji na temat obu składni, nawet na MDN .

timdream
źródło
@Blender Jak szukałbyś tej struktury na symbolhound.com?
trusktr
1
@trusktr: Trochę późno: symbolhound.com/…
Blender,
Krótka odpowiedź jest tutaj: stackoverflow.com/a/45909752/203704
Cliff Hall
Radzę sobie z podstawową dekonstrukcją. Jednak w tym przykładzie przypisujemy również wartość do innej nazwy właściwości, a składnia ta jest bardzo myląca. Jest to przeciwieństwo składni tworzenia obiektów, co powoduje jeszcze większe zamieszanie.
Sol

Odpowiedzi:

72

Obie są funkcjami JavaScript 1.7. Pierwsza to zmienne blokowe :

letumożliwia deklarowanie zmiennych, ograniczając ich zakres do bloku, instrukcji lub wyrażenia, w którym jest używany. W przeciwieństwie do varsłowa kluczowego, które definiuje zmienną globalnie lub lokalnie dla całej funkcji, niezależnie od zakresu blokowego.

Drugi nazywa się destrukturyzacją :

Przypisanie niszczące umożliwia wyodrębnienie danych z tablic lub obiektów przy użyciu składni, która odzwierciedla konstrukcję tablic i literałów obiektów.
...
Jedną ze szczególnie przydatnych rzeczy, które można zrobić przy przypisywaniu destrukcji, jest przeczytanie całej struktury w jednej instrukcji, chociaż można z nimi zrobić wiele interesujących rzeczy, jak pokazano w sekcji pełnej przykładów poniżej.

Dla osób zaznajomionych z Pythonem składnia jest podobna do tej:

>>> a, (b, c) = (1, (2, 3))
>>> a, b, c
(1, 2, 3)

Pierwsza porcja kodu jest skrótem dla:

var {Hotkey: Hotkey} = require("sdk/hotkeys");
// Or
var Hotkey = require("sdk/hotkeys").Hotkey;

Możesz przepisać drugi fragment kodu jako:

let Cc = Components.classes;
let Ci = Components.interfaces;
let Cr = Components.results;
let Cu = Components.utils;
Mikser
źródło
2
Z mojego eksperymentu wygląda na var { Hotkey }to , że jest odpowiednikiem var { Hotkey: Hotkey }. Dziękujemy za znalezienie dokumentacji!
timdream
@timdream: Miałem wrażenie, że to coś takiego, ale czym się to różni var Hotkey = require(...).Hotkey? Czy to po prostu zapisywanie naciśnięć klawiszy?
Blender
wygląda tak: - / (hehehe, ci leniwi programiści ...)
timdream
2
Poza tym użycie tak niezwykłej składni sprawia, że ​​wszystko jest bardziej tajemnicze.
trusktr
Drugi to "Object
Destruifying
80

To, na co patrzysz, to destrukcyjne zadanie. To forma dopasowywania wzorców jak w Haskell.

Za pomocą przypisania destrukturyzującego można wyodrębnić wartości z obiektów i tablic oraz przypisać je do nowo zadeklarowanych zmiennych przy użyciu składni obiektu i literału tablicowego. Dzięki temu kod jest znacznie bardziej zwięzły.

Na przykład:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a, b, c} = ascii;

Powyższy kod jest równoważny z:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var a = ascii.a;
var b = ascii.b;
var c = ascii.c;

Podobnie dla tablic:

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

Jest to równoważne z:

var ascii = [97, 98, 99];

var a = ascii[0];
var b = ascii[1];
var c = ascii[2];

Możesz także wyodrębnić i zmienić nazwę właściwości obiektu w następujący sposób:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a: A, b: B, c: C} = ascii;

Jest to równoważne z:

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var A = ascii.a;
var B = ascii.b;
var C = ascii.c;

To wszystko.

Aadit M Shah
źródło
12
+1 za przykłady niszczenia obiektów, są naprawdę pomocne. Do przykładów MDN wykazują tylko tablicy rozpad.
Blender
@Blender - zawierają przykłady niszczenia obiektów. Przyjrzyj się pętlom między wartościami w tablicy obiektów .
Aadit M Shah
Miałem na myśli var {a, b, c} = ascii;składnię.
Blender
Ten ostatni przykład jest naprawdę dziwny, ponieważ zwykle to, co znajduje się po lewej stronie okrężnicy, jest przypisywane.
Curtis
1

Jest to destrukcyjne zadanie w Javascript i jest częścią standardu ES2015. Rozpakowuje lub wyodrębnia wartości z tablic lub właściwości z obiektów do odrębnych zmiennych. Np .: Zniszczenie macierzy

var foo = ["one", "two", "three"];
//without destructuring
var one = foo[0];
var two = foo[1];
var three = foo[2];

// z destrukturyzacją var [jeden, dwa, trzy] = foo

Np .: Destrukturyzacja obiektów

var o = {p: 42, q: true}; var {p, q} = o;

console.log (p); // 42 console.log (q); // prawdziwe

// Przypisz nowe nazwy zmiennych var {p: foo, q: bar} = o;

console.log (foo); // 42 console.log (bar); // prawdziwe

Deeksha Sharma
źródło
0

Dokumentacja do letoświadczenia znajduje się na MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let

letjest podobny do vartego, że ogranicza zakres deklarowanej zmiennej. Pozwala zadeklarować zmienną wewnątrz if(){}bloku (lub innego bloku) i mieć tę zmienną „widoczną” tylko wewnątrz tego bloku (JavaScript, do tej pory, ma zakres funkcji, a nie zakres blokowy, jak większość innych języków). Jest to więc w letzasadzie „poprawka” czegoś, z czym wiele osób ma problemy. Zauważ, że tihs to funkcja JavaScript 1.7.

Nie znalazłem nic na {Foo}.

Jan Hančič
źródło
Przepraszam, myślałem, że pytasz o jedno i drugie ... Moje google-fu zawodzi mnie, jeśli chodzi o {Foo}: /
Jan Hančič
Ja też: - / Google nie indeksuje {i }.
timdream