Lo sviluppo di applicazioni angolari negli ultimi anni mi ha aperto gli occhi su tutta una serie di modi nuovi e innovativi per eseguire operazioni complesse su oggetti JavaScript con meno codice e maggiore sicurezza dei tipi. Ad esempio, la destrutturazione degli oggetti di TypeScript e l’operatore di diffusione ES6 hanno notevolmente facilitato il lavoro con gli array. In questo tutorial, condividerò come ottenere alcune attività di programmazione comuni sugli array mentre demistifica la destrutturazione, la clonazione e il ridurre() funzione.

Destrutturazione di array in TypeScript

Destrutturazione è una funzionalità di EcmaScript 2015 e Typescript che consente di suddividere la struttura di un’entità, (ad esempio un array o un oggetto) in questo modo:

let ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
let [john, rob, george, steve] = ivoryKnightMembers;

Le variabili precedenti verranno compilate nel seguente codice JavaScript:

var ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
var john   = ivoryKnightMembers[0], 
    rob    = ivoryKnightMembers[1],
    George = ivoryKnightMembers[2], 
    Steve  = ivoryKnightMembers[3];

Leggi: Introduzione a TypeScript e alle sue caratteristiche

Ignorare gli elementi durante la destrutturazione degli elementi dell’array

Non esiste una regola che stabilisca che devi tenere conto di tutti gli elementi dell’array. Ecco del codice che estrae solo il primo elemento:

let [first] = ivoryKnightMembers;

Il prossimo esempio prende solo i primi due elementi:

let [first, second] = ivoryKnightMembers;

Possiamo anche ignorare gli elementi come nel seguente esempio:

let [first, ,third] = ivoryKnightMembers;

Clonazione di un array nel modo ES6

La copia di un array è qualcosa che gli sviluppatori fanno molto. I neofiti a volte provano a copiare un array per assegnazione usando il equivale (=) operatore:

let arrayCopy = originalArray;

Anziché produrre una copia dell’array, il codice precedente copierà solo il riferimento all’array originale. Per creare una copia reale di un array, dobbiamo copiare il valore dell’array in una nuova variabile. Prima di ES6, utilizzavamo spesso l’array fetta() metodo per questo scopo. Oggi possiamo usare anche il propagazione operatore per duplicare un array:

const clonedArray = [...ivoryKnightMembers];
ivoryKnightMembers.push('Mike'); //new keyboard player
// false because clonedArray points to a new memory space
console.log(clonedArray === ivoryKnightMembers);
// ['John', 'Rob', 'George', 'Steve']
// still contains the four original members
console.log(clonedArray);

Solo copie poco profonde!

Tieni presente che il propagazione l’operatore va in profondità solo di un livello durante la copia di un array. Ciò significa che gli elementi di livello superiore vengono copiati, mentre i livelli più profondi vengono referenziati! Pertanto, se stai tentando di copiare un array multidimensionale, dovrai utilizzare un approccio diverso.

Appiattimento della matrice in TypeScript

Puoi anche utilizzare l’operatore di diffusione ES6 per appiattire array multidimensionali con una profondità di uno:

const multiDimensionalArray = [ [1, 2], [3, 4], [5, 6] ]; 
const flattenedArray = [].concat(...multiDimensionalArray); 
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

Un altro modo per creare una nuova istanza Array con copia superficiale consiste nell’usare il file Array.da() metodo. Funziona su qualsiasi oggetto simile a un array o iterabile e ti consente di fornire la tua funzione di mappatura, se ne hai bisogno.

Leggi: Codifica TypeScript al di fuori delle applicazioni angolari

Il metodo Array reduce()

Array.ridurre è una funzione estremamente versatile che consente di calcolare un risultato da tutti gli elementi di un array. È molto simile a una versione funzionale di a per ciascuno ciclo con una variabile aggiuntiva che si modifica all’interno del ciclo e si restituisce alla fine. Vedo molti sviluppatori che si attengono ai loop piuttosto che passare da una parte all’altra perché non capiscono bene come usare il ridurre() metodo. Ed è un peccato, perché è davvero abbastanza facile da usare.

ridurre() accetta due argomentazioni:

1. riduttore: una funzione che accetta un elemento dell’array e il risultato parziale (calcolato sulla base degli elementi elaborati fino a quel momento)
2. risultato iniziale: un valore facoltativo che verrà passato al riduttore prima che tutti gli elementi dell’array siano stati elaborati

array.reduce(callback[, initialValue])

Recentemente ho usato il ridurre() metodo nel Tracciamento delle selezioni con caselle di controllo in angolare articolo per eseguire un’iterazione su tutti i nodi radice di a MatTreeNestedDataSource, recupera i loro discendenti e mappa i nomi dei nodi selezionati su un semplice array:

let result = this.dataSource.data.reduce(
  (acc: string[], node: VehicleNode) => 
    acc.concat(this.treeControl
                .getDescendants(node)
                .filter(descendant => descendant.selected)
                .map(descendant => descendant.name))
  , [] as string[]);

Avrei potuto usare il per ciascuno() metodo per scorrere i nodi radice e concat i nomi dei bambini in una variabile dichiarata prima dell’elaborazione dei nodi:

let result: string[] = [];
this.dataSource.data.forEach((node: VehicleNode) => 
  result.concat(this.treeControl
              .getDescendants(node)
              .filter(descendant => descendant.selected)
              .map(descendant => descendant.name)));

Usando ridurre() noi invece:

• non è necessario dichiarare il risultato in anticipo perché verrà restituito dal ridurre() metodo
• è necessario fornire l’accumulatore (acc) alla funzione di callback in modo da potervi accedere all’interno del corpo della funzione
• è necessario fornire un valore iniziale a ridurre() in modo che abbia un array per concat a. Fondamentalmente, stiamo spostando l’inizializzazione della variabile di risultato sul secondo parametro del metodo come punto di partenza.

Conclusione sulle funzionalità dell’array TypeScript

In questo tutorial, abbiamo imparato come eseguire alcune attività di programmazione comuni su array utilizzando alcune moderne tecniche ES6 e TypeScript, vale a dire la destrutturazione, la clonazione e il ridurre() funzione. Anche se probabilmente potresti farla franca evitando tecniche all’avanguardia come queste per tutta la tua carriera, è bene avere delle opzioni quando affronti un problema.

Leggi: Esplora TypeScript Fat Arrow