initial commit

1 files changed, 451 insertions, 0 deletions

diff --git a/files/it/web/javascript/reference/operators/destructuring_assignment/index.html b/files/it/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..12a790e45c
--- /dev/null
+++ b/files/it/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,451 @@
+---
+title: Assegnamento di destrutturazione
+slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La sintassi di <strong>assegnamento di destrutturazione </strong>è un'espressione JavaScript che rende possibile estrarre informazioni da array o oggetti in variabili distinte.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="brush:js">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
+
+// ES2016 - non implementato in Firefox 47a01
+({a, b, ...rest} = {a:1, b:2, c:3, d:4});
+</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>Le espressioni lettali degli oggetti e degli array forniscono un modo facile per creare <em>ad hoc</em> pacchetti di data.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>
+
+<p>L'assegnamento di destrutturazione utilizza una sintassi simile, ma a sinistra dell'assegnamento sono definiti quali elementi estrarre dalla variabile sorgente (array o oggetti).</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>Questa capacità è simile alle caratteristiche presenti in linguaggi come Perl e Python.</p>
+
+<h2 id="Destrutturazione_di_array">Destrutturazione di array</h2>
+
+<h3 id="Assegnamento_semplice_di_variabile">Assegnamento semplice di variabile</h3>
+
+<pre class="brush: js">var foo = ["one", "two", "three"];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+</pre>
+
+<h3 id="Assegnamento_separato_dalla_dichiarazione">Assegnamento separato dalla dichiarazione</h3>
+
+<p>Il valore di una variabile può essere assegnato (sempre con la destrutturazione) in modo separato dalla dichiarazione della variabile stessa.</p>
+
+<pre class="brush:js">var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="Valori_default">Valori default</h3>
+
+<p>Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'array sia <code>undefined</code>.</p>
+
+<pre class="brush: js">var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="Scambio_di_variabili">Scambio di variabili</h3>
+
+<p>Due valori di variabili possono essere scambiati in un assegnamento di destrutturazione.</p>
+
+<p>Senza l'assegnamento di destrutturazione, scambiare due valori richiede una variabile momentanea (o, in alcuni linguaggi low-level, il <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap trick</a>).</p>
+
+<pre class="brush:js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+</pre>
+
+<h3 id="Fare_il_parsing_di_un_array_ritornato_da_una_funzione">Fare il parsing di un array ritornato da una funzione</h3>
+
+<p>È sempre stato possibile ritornare un array da una funzione. La destrutturazione può rendere più conciso lavorare con il valore di ritorno di un array</p>
+
+<p>In questo esempio, <code>f()</code> ritorna i valori <code>[1, 2]</code> come output, e questi possono essere analizzati in una singola linea con la destrutturazione.</p>
+
+<pre class="brush:js">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
+</pre>
+
+<h3 id="Ignorare_alcuni_valori_ritornati">Ignorare alcuni valori ritornati</h3>
+
+<p>Puoi ignorare i valori ritornati nei quali non sei interessato:</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+</pre>
+
+<p>Puoi anche ignorare tutti i valori ritornati:</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="Assegnare_il_resto_di_un_array_ad_una_variabile">Assegnare il resto di un array ad una variabile</h3>
+
+<p>Quando si destruttura un array, puoi assegnare la sua parte rimanente ad una variabile usando l'operatore rest (i 3 puntini):</p>
+
+<pre class="brush: js">var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<h3 id="Estrarre_valori_da_un_match_con_un'espressione_regolare">Estrarre valori da un match con un'espressione regolare</h3>
+
+<p>Quando il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> 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.</p>
+
+<pre class="brush:js">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"
+</pre>
+
+<h2 id="Destrutturazione_degli_oggetti">Destrutturazione degli oggetti</h2>
+
+<h3 id="Assegnamento_base">Assegnamento base</h3>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+</pre>
+
+<h3 id="Assegnamento_senza_dichiarazione">Assegnamento senza dichiarazione</h3>
+
+<p>Il valore di una variabile può essere assegnato senza destrutturazione separatamente dalla sua dichiarazione.</p>
+
+<pre class="brush:js">var a, b;
+
+({a, b} = {a:1, b:2});</pre>
+
+<div class="note">
+<p><code><font face="Open Sans, Arial, sans-serif">Le </font>( )</code> attorno l'assegnamento di destrutturazione sono obbligatorie quando si usa la destrutturazione degli oggetti letterali senza una dichiarazione.</p>
+
+<p><code>{a, b} = {a:1, b:2}</code> non è sintassi valida, dato che <code>{a, b}</code> sulla sinistra è considerato un blocco e non un oggetto letterale.</p>
+
+<p>Tuttavia, <code>({a, b} = {a:1, b:2})</code> è valida, dato che <code>var {a, b} = {a:1, b:2}</code></p>
+</div>
+
+<h3 id="Assegnamento_a_nuovi_nomi_di_variabili">Assegnamento a nuovi nomi di variabili </h3>
+
+<p>Una variabile può essere estratta da un oggetto e assegnata ad una variabile con un nome diverso da quello della proprietà dell'oggetto.</p>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true  </pre>
+
+<h3 id="Valori_default_2">Valori default</h3>
+
+<p>Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'oggetto sia <code>undefined</code>.</p>
+
+<pre class="brush: js">var {a=10, b=5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="Impostare_i_valore_default_dei_parametri_di_una_funzione">Impostare i valore default dei parametri di una funzione</h3>
+
+<h4 id="Versione_ES5">Versione ES5</h4>
+
+<pre class="brush: js">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
+});</pre>
+
+<h4 id="Versione_ES2015">Versione ES2015</h4>
+
+<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
+  console.log(size, cords, radius);
+  // do some chart drawing
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<h3 id="Oggetti_annidati_e_destrutturazione_array">Oggetti annidati e destrutturazione array</h3>
+
+<pre class="brush:js">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"</pre>
+
+<h3 id="Iterazione_con_for...of_e_destrutturazione">Iterazione con for...of e destrutturazione</h3>
+
+<pre class="brush: js">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"</pre>
+
+<h3 id="Estrarre_campi_dagli_oggetti_passati_come_parametri_delle_funzioni">Estrarre campi dagli oggetti passati come parametri delle funzioni</h3>
+
+<pre class="brush:js">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"</pre>
+
+<p>Questo estrae  <code>id</code>, <code>displayName</code> e <code>firstName</code> da l'oggetto user e li stampa.</p>
+
+<h3 id="Proprietà_calcolate_degli_oggetti_e_destrutturazione">Proprietà calcolate degli oggetti e destrutturazione</h3>
+
+<p>I nomi delle proprietà calcolate degli oggetti, come sugli <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>, possono anche essere usate con la destrutturazione.</p>
+
+<pre class="brush: js">let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_browser">Compatibilità browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>14</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Nomi delle proprietà calcolate</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>14</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Operatore spread</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caratteristica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Supporto base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+  <tr>
+   <td>Nomi delle proprietà calcolate</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+  <tr>
+   <td>Operatore spread</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{ CompatGeckoMobile("34") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Richiede "Attiva le caratteristiche sperimentali di JavaScript" per essere abilitato sotto `about:flags`</p>
+
+<h2 id="Note_specifiche_a_Firefox">Note specifiche a Firefox</h2>
+
+<ul>
+ <li>Firefox fornisce un'estensione del linguaggio non standard in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> per</li>
+ <li>la destrutturazione. Questa estensione è stata rimossa in Gecko 40 {{geckoRelease(40)}}. Vedi {{bug(1083498)}}.</li>
+ <li>Partendo con Gecko 41 {{geckoRelease(41)}} e per soddisfare le specifiche ES2015, gli schemi di destrutturazioni con le parentesi come <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 } </code>sono ora considerate invalide e quindi lanceranno un errore {{jsxref("SyntaxError")}}. Vedi <a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">Jeff Walden's blog post</a> e {{bug(1146136)}} per ulteriori dettagli.</li>
+</ul>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operatori di assegnamento</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES2015 in profondità: Destrutturazioni" su hacks.mozilla.org</a></li>
+</ul>