You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/05-data-types/10-destructuring-assignment/article.md
+35-43Lines changed: 35 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,9 +5,9 @@ Le due strutture dati più utilizzate in JavaScript sono `Object` e `Array`.
5
5
- Gli oggetti ci consentono di creare un'unica entità che memorizza elementi nel formato chiave-valore
6
6
- Gli array ci consentono di raccogliere elementi in elenchi ordinati.
7
7
8
-
A volte, quando li passiamo ad una funzione, potrebbe non èssere necessario tutto l'oggetto/array, ma solo una parte di esso.
8
+
A volte, quando li passiamo ad una funzione, potrebbe non essere necessario tutto l'oggetto/array, ma solo una parte di esso.
9
9
10
-
*L'assegnamento di destrutturazione (Destructuring assignment)* è una speciale sintassi che ci consente di "spacchettare" oggetti o array in un gruppi di variabili, questo a volte risulta molto conveniente.
10
+
*L'assegnamento di destrutturazione (Destructuring assignment)* è una speciale sintassi che ci consente di "spacchettare" oggetti o array in gruppi di variabili; questo a volte risulta molto conveniente.
11
11
12
12
La destrutturazione funziona alla grande anche con funzioni complesse che hanno molti parametri, valori predefiniti e così via. Presto lo vedremo.
13
13
@@ -30,7 +30,7 @@ alert(firstName); // John
30
30
alert(surname); // Smith
31
31
```
32
32
33
-
Ora possiamo lavorare con le variabili piuttosto che con i membri dell'array.
33
+
Ora possiamo lavorare con le variabili invece che con gli elementi dell'array.
34
34
35
35
Risulta utilissima se combinata con `split` o altri metodi che ritornano un array:
36
36
@@ -44,7 +44,7 @@ Come puoi vedere, la sintassi è semplice. Ci sono però molti dettagli peculiar
44
44
45
45
46
46
````smart header="\"Destrutturazione\" non significa \"distruzione\"."
47
-
Viene chiamato "assegnamento di destrutturazione", perché "destrutturizza" copiando gli elementi all'interno di variabili. Ma l'array in sè non viene modificato.
47
+
Viene chiamato "assegnamento di destrutturazione" perché "destruttura" copiando gli elementi all'interno di variabili. Ma l'array in sé non viene modificato.
48
48
49
49
E' solo un modo breve per scrivere:
50
50
```js
@@ -56,7 +56,7 @@ let surname = arr[1];
56
56
57
57
````smart header="Ignora gli elementi usando la virgola"
58
58
59
-
Gli elementi indesiderati dell'array possono anche essere ignorati tramite una virgola aggiuntiva:
59
+
Gli elementi indesiderati dell'array possono essere ignorati tramite una virgola aggiuntiva:
60
60
61
61
```js run
62
62
*!*
@@ -67,24 +67,24 @@ let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic
67
67
alert( title ); // Consul
68
68
```
69
69
70
-
Nel codice sopra, il secondo elemento viene saltato, il terzo viene assegnato a `title`, il resto dell'array viene ignorato (visto che sono state inserite ulteriori variabili).
70
+
Nel codice sopra, il secondo elemento viene saltato, il terzo viene assegnato a `title`, il resto degli elementi vengono ignorati (visto che per loro non ci sono variabili).
71
71
````
72
72
73
-
````smart header="Funziona con qualsiasi itarabile sulla destra"
73
+
````smart header="Funziona con qualsiasi iterabile alla destra"
74
74
75
-
... In realtà, possiamo utilizzarlo con qualsiasi iterabile, non solamente con array:
75
+
... In realtà, possiamo utilizzarlo con qualsiasi iterabile, non solamente con un array:
76
76
77
77
```js
78
78
let [a, b, c] = "abc"; // ["a", "b", "c"]
79
79
let [one, two, three] = new Set([1, 2, 3]);
80
80
```
81
81
82
-
Funziona, perché internamente un'assegnazione di destrutturazione lavora iterando sul valore di destra. E' una specie di "zucchero sintattico" per chiamare `for..of` sul valore a destra di `=` assegnando i valori.
82
+
Funziona, perché internamente un'assegnazione di destrutturazione lavora iterando sul valore a destra. E' una specie di "zucchero sintattico" per chiamare `for..of` sul valore a destra di `=`, assegnandone i valori.
83
83
````
84
84
85
85
````smart header="Assegna a qualsiasi cosa ci sia dalla parte sinistra"
86
86
87
-
Possiamo inserire qualsiasi cosa sia "assegnabile" alla sinistra.
87
+
Possiamo inserire qualsiasi cosa "assegnabile" a sinistra.
88
88
89
89
Ad esempio, la proprietà di un oggetto:
90
90
```js run
@@ -101,7 +101,7 @@ alert(user.surname); // Smith
101
101
102
102
Nel capitolo precedente abbiamo visto il metodo [Object.entries(obj)](mdn:js/Object/entries).
103
103
104
-
Possiamo utilizzarlo con la destrutturazione per eseguire cicli su chiave/valore di un oggetto:
104
+
Possiamo utilizzarlo con la destrutturazione per eseguire cicli sulle coppie chiave/valore di un oggetto:
105
105
106
106
```js run
107
107
let user = {
@@ -117,7 +117,7 @@ for (let [key, value] of Object.entries(user)) {
117
117
}
118
118
```
119
119
120
-
Codice simile usando `Map` è più semplice, visto che è iterabile:
120
+
Un codice simile usando `Map` è più semplice, visto che è iterabile:
121
121
122
122
123
123
```js run
@@ -151,8 +151,8 @@ let admin = "Pete";
151
151
alert(`${guest} ${admin}`); // Pete Jane (scambiati con successo!)
152
152
```
153
153
154
-
Nell'esempio creiamo un array temporaneo di due varibili e lo destrutturiamo immediatamente invertendo l'ordine delle variabili.
155
-
Nello stesso modo potemmo scambiare i valori di più di sue variabili.
154
+
Nell'esempio creiamo un array temporaneo con due varibili e lo destrutturiamo immediatamente invertendo l'ordine delle variabili.
155
+
Nello stesso modo potremmo scambiare i valori di più variabili.
156
156
157
157
158
158
### L'operatore rest '...'
@@ -171,23 +171,23 @@ alert(name2); // Caesar
171
171
172
172
```
173
173
174
-
Se vogliamo anche ottenere tutto ciò che segue, possiamo aggiungere un altro parametro che raccoglie "il resto" utilizzando tre punti `" ... "`:
174
+
Se vogliamo ottenere anche tutto ciò che segue, possiamo aggiungere un altro parametro che raccoglie "il resto" utilizzando tre punti `" ... "`:
175
175
176
176
```js run
177
177
let [name1, name2, *!*...rest*/!*] = ["Julius", "Caesar", *!*"Consul", "of the Roman Republic"*/!*];
178
178
179
179
*!*
180
-
// rest è un array di elementi, che parte dal terzo
180
+
// rest è un array con gli elementi a destra, partendo dal terzo
181
181
alert(rest[0]); // Consul
182
182
alert(rest[1]); // of the Roman Republic
183
183
alert(rest.length); // 2
184
184
*/!*
185
185
```
186
186
187
187
188
-
La variabile `rest` è un array dei valori dell'array rimanenti.
188
+
La variabile `rest` è un array con i valori rimanenti dell'array a destra.
189
189
190
-
Possiamo utilizzare qualsiasi altro nome di variabile al posto di `rest`, è sufficiente accertarsi di inserire i tre punti prima del nome e di posizionarlo alla fine nell'assegnamento di destrutturazione.
190
+
Possiamo utilizzare qualsiasi altro nome di variabile al posto di `rest`; è sufficiente accertarsi di inserire i tre punti prima del nome e di posizionarlo alla fine nell'assegnamento di destrutturazione.
191
191
192
192
```js run
193
193
let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
@@ -275,10 +275,10 @@ L'ordine non ha importanza. Questo codice funzionerebbe comunque:
275
275
let {height, width, title} = { title:"Menu", height:200, width:100 }
276
276
```
277
277
278
-
Il pattern alla sinistra potrebbe essere anche più complesso e specificare una mappatura tra proprietà e variabili.
278
+
Il pattern a sinistra potrebbe essere anche più complesso e specificare una mappatura tra proprietà e variabili.
279
279
280
280
281
-
Se volessimo assegnare una proprietà ad una variabile con un altro nome, ad esempio, la proprietà `options.width` vogliamo assegnarla ad una variabile chiamata `w`, allora possiamo specificarlo con i due punti:
281
+
Se volessimo assegnare una proprietà ad una variabile con un altro nome, ad esempio la proprietà `options.width` ad una variabile chiamata `w`, allora possiamo specificarlo con i due punti:
282
282
283
283
284
284
```js run
@@ -370,9 +370,9 @@ alert(title); // Menu
370
370
371
371
### Il modello rest "..."
372
372
373
-
Cosa succede se l'oggetto possiede più proprietà delle variabili da noi fornite? Possiamo prendere solamente alcune ed assegnare tutto ciò che avanza da un'altra parte?
373
+
Cosa succede se l'oggetto possiede più proprietà delle variabili da noi fornite? Possiamo prenderne solamente alcune ed assegnare tutto ciò che avanza da un'altra parte?
374
374
375
-
La specifica per l'utilizzo dell'operatore resto (tre punti) fa quasi parte dello standard, ma molti browser non lo supportano ancora.
375
+
La specifica per l'utilizzo dell'operatore rest `...` fa quasi parte dello standard, ma molti browser non lo supportano ancora.
376
376
377
377
Appare cosi:
378
378
@@ -452,7 +452,7 @@ let {
452
452
width,
453
453
height
454
454
},
455
-
items: [item1, item2], // assegniamo gli item qui
455
+
items: [item1, item2], // assegniamo gli items qui
456
456
title ="Menu"// non presente nell'oggetto (viene utilizzato il valore di default)
457
457
} = options;
458
458
@@ -463,21 +463,13 @@ alert(item1); // Cake
463
463
alert(item2); // Donut
464
464
```
465
465
466
-
L'intero oggetto `options` ad eccezione di `extra` il quale non viene menzionato, viene assegnato alle corrispondenti variabili.
467
-
468
-
Nota che `size` e `items` stesso non è destrutturato.
466
+
L'intero oggetto `options` ad eccezione di `extra`, il quale non viene menzionato, viene assegnato alle corrispondenti variabili.
469
467
470
468

471
469
472
-
Infine, abbiamo `width`, `height`, `item1`, `item2` e `title` che assumo il valore di default.
473
-
474
-
Questo accade spesso con l'assegnamento di destrutturazione. Abbiamo un oggetto complesso e vogliamo estrarre solamente ciò di cui abbiamo bisogno.
470
+
Infine, abbiamo `width`, `height`, `item1`, `item2` e `title` che assumono il valore di default.
475
471
476
-
Anche qui accade lo stesso:
477
-
```js
478
-
// prende size per interno su una variabile, ignora il resto
479
-
let { size } = options;
480
-
```
472
+
Nota che non ci sono variabili per `size` e `items`: prendiamo invece il loro contenuto. Questo accade spesso con l'assegnamento di destrutturazione. Abbiamo un oggetto complesso e vogliamo estrarre solamente ciò di cui abbiamo bisogno.
Nella vita reale, il problema è ricordarsi l'ordine degli argomenti. Solitamente gli IDE ci aiutano in questo, specialmente se il codice è ben documentato, ma ancora... Un ulteriore problema è quello di chiamare una funzione nel caso in cui molti parametri ci vadano bene di default.
486
+
Nella vita reale, il problema è ricordarsi l'ordine degli argomenti. Solitamente gli IDE ci aiutano in questo, specialmente se il codice è ben documentato, eppure... Un ulteriore problema è quello di chiamare una funzione nel caso in cui molti parametri ci vadano bene di default.
495
487
496
488
Come qui?
497
489
@@ -504,7 +496,7 @@ E' brutto a vedersi. E diventa illeggibile quando il numero di parametri aumenta
504
496
505
497
La destrutturazione ci viene in soccorso!
506
498
507
-
Possiamo passare i parametri come un oggetto, e la funzione immediatamente lo destrutturizza in variabili:
499
+
Possiamo passare i parametri come un oggetto, e la funzione immediatamente lo destrutturizzerà in variabili:
508
500
509
501
```js run
510
502
// passiamo l'oggetto alla funzione
@@ -513,7 +505,7 @@ let options = {
513
505
items: ["Item1", "Item2"]
514
506
};
515
507
516
-
// ...e immediatamente lo espandiamo su variabili
508
+
// ...e immediatamente lo distribuisce alle variabili
Da notare che la destrutturazione assume che `showMenu()` abbia un argomento. Se vogliamo tutti i valori di default, allora dovremmo specificare un oggetto vuoto:
551
+
Da notare che la destrutturazione presuppone che `showMenu()` abbia un argomento. Se vogliamo tutti i valori di default, allora dovremmo specificare un oggetto vuoto:
560
552
561
553
```js
562
-
showMenu({}); // ok, all values are default
554
+
showMenu({}); // ok, tutti i valori sono di default
563
555
564
556
showMenu(); // questo darà errore
565
557
```
566
558
567
-
Possiamo farlo ponendo `{}`il valore di default per l'intera destrutturazione:
559
+
Possiamo farlo ponendo `{}`come valore di default per l'intera destrutturazione:
568
560
569
561
570
562
```js run
@@ -576,17 +568,17 @@ function showMenu(*!*{ title = "Menu", width = 100, height = 200 } = {}*/!*) {
576
568
showMenu(); // Menu 100 200
577
569
```
578
570
579
-
Nel codice sopra, tutti gli argomenti dell'oggetto sono`{}` di default, quindi ci sarà sempre qualcosa da destrutturare.
571
+
Nel codice sopra, l'oggetto degli argomenti è`{}` di default, quindi ci sarà sempre qualcosa da destrutturare.
580
572
581
573
## Riepilogo
582
574
583
-
- L'assegnamento di destrutturazione ci consente di mappare un oggetto o un array su alcune variabili.
575
+
- L'assegnamento di destrutturazione ci consente di mappare un oggetto o un array passandolo a variabili.
584
576
- La sintassi per gli oggetti:
585
577
```js
586
578
let {prop : varName = default, ...rest} = object
587
579
```
588
580
589
-
Questo significa che la proprietà `prop` dovrebbe andare nella variabile `varName` e, se non esiste alcuan proprietà, allora verrà utilizzato il valore di `default`.
581
+
Questo significa che la proprietà `prop` dovrebbe andare nella variabile `varName` e, se non esiste alcuna proprietà, allora verrà utilizzato il valore di `default`.
0 commit comments