Apa yang dilakukan tanda kurung kurawal dalam pernyataan `var {…} =…`?

117

Tidak yakin apakah ini sintaks JS khusus Mozilla, tetapi saya sering menemukan variabel yang dideklarasikan dengan cara ini, misalnya, dalam dokumen SDK add-on :

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

dan di berbagai Chrome Javascript ( letpernyataan digunakan sebagai pengganti var),

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

Saya merasa sangat membingungkan tetapi saya tidak dapat menemukan dokumentasi apa pun tentang kedua sintaks, bahkan di MDN .

timdream
sumber
@ Blender Bagaimana Anda mencari struktur ini di symbolhound.com?
trusktr
1
@trusktr: Sedikit terlambat: symbolhound.com/…
Blender
Jawaban singkatnya ada di sini: stackoverflow.com/a/45909752/203704
Cliff Hall
Saya baik-baik saja dengan dekonstruksi dasar. Namun, dalam contoh ini kami juga menetapkan nilai ke nama properti yang berbeda dan sintaks itu sangat membingungkan. Ini berlawanan dengan sintaks pembuatan objek dan itu menambahkan lebih banyak kebingungan.
Sol

Jawaban:

72

Keduanya adalah fitur JavaScript 1.7. Yang pertama adalah variabel level blok :

letmemungkinkan Anda untuk mendeklarasikan variabel, membatasi ruang lingkupnya ke blok, pernyataan, atau ekspresi yang digunakan. Ini tidak seperti varkata kunci, yang mendefinisikan variabel secara global, atau secara lokal ke seluruh fungsi terlepas dari cakupan blok.

Yang kedua disebut penghancuran :

Destructuring assignment memungkinkan untuk mengekstrak data dari array atau objek menggunakan sintaks yang mencerminkan konstruksi array dan literal objek.
...
Satu hal yang sangat berguna yang dapat Anda lakukan dengan tugas penghancuran adalah membaca seluruh struktur dalam satu pernyataan, meskipun ada sejumlah hal menarik yang dapat Anda lakukan dengannya, seperti yang ditunjukkan di bagian penuh contoh berikut.

Bagi mereka yang akrab dengan Python, ini mirip dengan sintaks ini:

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

Potongan kode pertama adalah singkatan dari:

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

Anda dapat menulis ulang potongan kode kedua sebagai:

let Cc = Components.classes;
let Ci = Components.interfaces;
let Cr = Components.results;
let Cu = Components.utils;
Blender
sumber
2
Dari percobaan saya, sepertinya var { Hotkey }setara dengan var { Hotkey: Hotkey }. Terima kasih telah menemukan dokumentasinya!
timdream
@timdream: Saya merasa seperti itu, tapi apa bedanya var Hotkey = require(...).Hotkey? Atau hanya menyimpan penekanan tombol?
Blender
terlihat seperti ini: - / (hehehe, programmer yang malas ini ...)
timdream
2
Ditambah itu membuat segalanya lebih samar untuk menggunakan sintaks yang tidak umum.
trusktr
Yang kedua adalah "Object Destructuring", mengacu pada developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
IcyBrk
80

Apa yang Anda lihat adalah tugas yang merusak. Ini adalah bentuk pencocokan pola seperti di Haskell.

Dengan menggunakan tugas destrukturisasi, Anda dapat mengekstrak nilai dari objek dan array dan menetapkannya ke variabel yang baru dideklarasikan menggunakan sintaks literal objek dan array. Ini membuat kode jauh lebih ringkas.

Sebagai contoh:

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

var {a, b, c} = ascii;

Kode di atas sama dengan:

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

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

Demikian pula untuk array:

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

Ini sama dengan:

var ascii = [97, 98, 99];

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

Anda juga dapat mengekstrak dan mengganti nama properti objek sebagai berikut:

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

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

Ini sama dengan:

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

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

Hanya itu yang ada untuk itu.

Aadit M Shah
sumber
12
1 untuk contoh penghancuran objek, mereka sangat membantu. The MDN contoh hanya menampilkan berbagai destructuring.
Blender
@ Blender - Mereka menyediakan contoh perusakan objek. Lihat Pendauran melintasi nilai dalam larik objek .
Aadit M Shah
Maksud saya var {a, b, c} = ascii;sintaksnya.
Blender
Contoh terakhir itu sangat aneh karena biasanya apa yang ada di sebelah kiri titik dua adalah apa yang ditugaskan.
Curtis
1

Ini adalah tugas yang merusak dalam Javascript dan merupakan bagian dari standar ES2015. Ini membongkar atau mengekstrak nilai dari array atau properti dari objek menjadi variabel yang berbeda. Misalnya: Array Destructuring

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

// dengan destructuring var [one, two, three] = foo

Misalnya: Perusakan Objek

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

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

// Tetapkan nama variabel baru var {p: foo, q: bar} = o;

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

Deeksha Sharma
sumber
0

Ada dokumentasi untuk letpernyataan di MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let

letmirip dengan varyang membatasi ruang lingkup variabel yang dideklarasikan. Ini memungkinkan Anda untuk mendeklarasikan variabel di dalam if(){}blok (atau beberapa blok lain) dan variabel itu hanya "terlihat" di dalam blok itu (JavaScript, sampai sekarang, memiliki ruang lingkup fungsi dan bukan cakupan blok seperti kebanyakan bahasa lain). Jadi pada letdasarnya ini adalah "perbaikan" untuk sesuatu yang banyak orang memiliki masalah. Perhatikan bahwa tihs adalah fitur JavaScript 1.7.

Belum menemukan apa pun {Foo}.

Jan Hančič
sumber
Maaf, saya pikir Anda bertanya tentang keduanya ... Google-fu saya {Foo}
mengecewakan
Saya juga: - / Google tidak mengindeks {dan }.
timdream