Cosa significano {parentesi graffe} intorno al nome della variabile javascript

EDIT Dopo aver guardato JSHint ho scoperto che questa ‘ espressione destrutturante’ è disponibile in ES6 (usa l’opzione esnext) o nelle estensioni Mozilla JS (usa moz) e questo però dopo averlo letto non capisco ancora perché venga usato

Ho trovato il seguente codice su MDN

var ui = require("sdk/ui"); var { ActionButton } = require("sdk/ui/button/action"); 

Cosa fanno le parentesi graffe sulla seconda linea e perché vengono utilizzate? Perché non ci sono parentesi sulla prima riga?

Questo è ciò che è noto come un compito destrutturante , ed è una nuova funzionalità di JavaScript 1.7 (e ECMAScript 6 ) (Attualmente disponibile solo nel motore JavaScript di FireFox.) In pratica, si tradurrebbe in questo:

 var ActionButton = require("sdk/ui/button/action").ActionButton; 

In questo esempio sembra sciocco, poiché è stato assegnato un solo articolo. Tuttavia, potresti utilizzare questo modello per assegnare più variabili contemporaneamente:

 {x, y} = foo; 

È l’equivalente di:

 x = foo.x; y = foo.y; 

Questo può essere utilizzato anche per gli array. Ad esempio, puoi facilmente scambiare due valori senza utilizzare una variabile temporanea:

 var a = 1; var b = 3; [a, b] = [b, a]; 

Il supporto del browser può essere monitorato usando la tabella di compatibilità ES6 di kangax .