Assegnamento di destrutturazione

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

La sintassi di assegnamento di destrutturazione è un'espressione JavaScript che rende possibile estrarre informazioni da array o oggetti in variabili distinte.

Sintassi

var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2

// ES7 - non implementato in Firefox 47a01
({a, b, ...rest} = {a:1, b:2, c:3, d:4}); 

Descrizione

Le espressioni lettali degli oggetti e degli array forniscono un modo facile per creare ad hoc pacchetti di data.

var x = [1, 2, 3, 4, 5];

L'assegnamento di destrutturazione utilizza una sintassi simile, ma a sinistra dell'assegnamento sono definiti quali elementi estrarre dalla variabile sorgente (array o oggetti).

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Questa capacità è simile alle caratteristiche presenti in linguaggi come Perl e Python.

Destrutturazione di array

Assegnamento semplice di variabile

var foo = ["one", "two", "three"];

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

Assegnamento separato dalla dichiarazione

Il valore di una variabile può essere assegnato (sempre con la destrutturazione) in modo separato dalla dichiarazione della variabile stessa.

var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Valori default

Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'array sia undefined.

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

Scambio di variabili

Due valori di variabili possono essere scambiati in un assegnamento di destrutturazione.

Senza l'assegnamento di destrutturazione, scambiare due valori richiede una variabile momentanea (o, in alcuni linguaggi low-level, il XOR-swap trick).

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

Fare il parsing di un array ritornato da una funzione

È sempre stato possibile ritornare un array da una funzione. La destrutturazione può rendere più conciso lavorare con il valore di ritorno di un array

In questo esempio, f() ritorna i valori [1, 2] come output, e questi possono essere analizzati in una singola linea con la destrutturazione.

function f() {
  return [1, 2];
}

var a, b; 
// puoi fare questo grazie alla destrutturazione 
[a, b] = f(); 

// invece di questo
a = f()[0];
b = f()[1];

// è la stessa identica cosa, però c'è un enorme differenza in termini
//di leggibilità e concisione

console.log(a); // 1
console.log(b); // 2

Ignorare alcuni valori ritornati

Puoi ignorare i valori ritornati nei quali non sei interessato:

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

Puoi anche ignorare tutti i valori ritornati:

[,,] = f();

Assegnare il resto di un array ad una variabile

Quando si destruttura un array, puoi assegnare la sua parte rimanente ad una variabile usando l'operatore rest (i 3 puntini):

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

Estrarre valori da un match con un'espressione regolare

Quando il metodo exec() trova un match, ritorna un array contenente come 1° elemento l'intera porzione della stringa e poi le porzioni della stringa che hanno fatto match con ognuno dei gruppi in parentesi dell'espressione regolare. L'assegnamento di destrutturazione ti permetti di estrarre le parti di questo array facilmente, ignorando l'intero match se non ne hai bisogno.

var url = "https://developer.mozilla.org/en-US/Web/JavaScript";

var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

var [, protocol, fullhost, fullpath] = parsedURL;

console.log(protocol); // "https"

Destrutturazione degli oggetti

Assegnamento base

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

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

Assegnamento senza dichiarazione

Il valore di una variabile può essere assegnato senza destrutturazione separatamente dalla sua dichiarazione.

var a, b;

({a, b} = {a:1, b:2});

Le ( ) attorno l'assegnamento di destrutturazione sono obbligatorie quando si usa la destrutturazione degli oggetti letterali senza una dichiarazione.

{a, b} = {a:1, b:2} non è sintassi valida, dato che {a, b} sulla sinistra è considerato un blocco e non un oggetto letterale.

Tuttavia, ({a, b} = {a:1, b:2}) è valida, dato che var {a, b} = {a:1, b:2}

Assegnamento a nuovi nomi di variabili 

Una variabile può essere estratta da un oggetto e assegnata ad una variabile con un nome diverso da quello della proprietà dell'oggetto.

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
 
console.log(foo); // 42 
console.log(bar); // true  

Valori default

Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'oggetto sia undefined.

var {a=10, b=5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

Impostare i valore default dei parametri di una funzione

Versione ES5

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // now finally do some chart drawing
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

Versione ES6

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES6Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

Oggetti annidati e destrutturazione array

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

Iterazione con for...of e destrutturazione

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (var {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

Estrarre campi dagli oggetti passati come parametri delle funzioni

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

Questo estrae  id, displayNamefirstName da l'oggetto user e li stampa.

Proprietà calcolate degli oggetti e destrutturazione

I nomi delle proprietà calcolate degli oggetti, come sugli object literals, possono anche essere usate con la destrutturazione.

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

Specificazioni

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Destructuring assignment' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Destructuring assignment' in that specification.
Draft  

Compatibilità browser

Caratteristica Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Supporto base 49.0 2.0 (1.8.1) 14 No support No support 7.1
Nomi delle proprietà calcolate 49.0 34 (34) 14 No support No support No support
Operatore spread 49.0 34 (34) 12[1] ? ? ?
Caratteristica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Supporto base No support 49.0 1.0 (1.0) No support No support 8 49.0
Nomi delle proprietà calcolate No support 49.0 34.0 (34) No support No support No support 49.0
Operatore spread No support 49.0 34.0 (34) ? ? ? 49.0

[1] Richiede "Attiva le caratteristiche sperimentali di JavaScript" per essere abilitato sotto `about:flags`

Note specifiche a Firefox

  • Firefox fornisce un'estensione del linguaggio non standard in JS1.7 per
  • la destrutturazione. Questa estensione è stata rimossa in Gecko 40 (Firefox 40 / Thunderbird 40 / SeaMonkey 2.37). Vedi bug 1083498.
  • Partendo con Gecko 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) e per soddisfare le specifiche ES6, gli schemi di destrutturazioni con le parentesi come ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 } sono ora considerate invalide e quindi lanceranno un errore SyntaxError. Vedi Jeff Walden's blog post e bug 1146136 per ulteriori dettagli.

Vedi anche

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: Giuseppe37
 Ultima modifica di: Giuseppe37,