Negli script precedenti abbiamo parlato dell'importanza dell'ottimizzazione del codice JavaScript con l'utilizzo delle ultime novità introdotte. Con questo ultimo script parleremo di altre quattro aree in cui è possibile riscrivere il codice per ottenere prestazioni e leggibilità.
Sostituzione blocchi Switch Case
Gli switch che emettono un solo valore a seguito di una determinata condizione su una variabile, possono essere riscritti utilizzando l'operatore Map e con l'aiuto del nullish coalescing
switch (n) { case 1: return 'Hello'; case 2: return 'World'; ... default: return 'No Hello'; }
var map = new Map([ [1, 'Hello']. [2, 'World']], ... ); map.get(n) ?? 'No Hello';
Decostruzione oggetti con Alias
Molto spesso non abbiamo bisogno di tutte le proprietà degli oggetti restituiti da funzioni, ma solo di due o tre. Per fare un esempio, in un oggetto di tipo Persona restituito da una funzione potremmo aver bisogno solo del nome e dell'indirizzo. Possiamo recuperare queste informazioni usando il seguente codice.
var p = getPersona(); var n = p.name; var a = p.location.address;
Tuttavia, esiste un metodo migliore.
var p = getPersona(); var { name:n, location:{address:a}} = p;
Miglioramenti ciclo for
Il classico for loop, che troviamo su tutte le guide introduttive viene spesso usato nel seuente modo.
for (let i = 0; i < fruits.length; i++){ console.log(fruits<i>); }
Possiamo ora rivederlo in questa versione più concisa.
for (let fruit of fruits) console.log(fruit); // con 'in' itero utilizzando l'index come l for originario for (let index in fruits) console.log(fruits[index]);
Possiamo ovviamente anche eseguirne la decostruzione.
for (let [index, fruit] of fruits.entries()) { console.log(`At index ${index}: ${fruit}`); }
Nel caso in cui venga fornito un oggetto al posto di un array, si potrà iterare sulle chiavi dello stesso.
var p = { firstName: 'Morgan', lastName: 'Pizzini', }; for (let key in p) console.log(key) ; // 'firstName' 'lastName'
Operatori Spread e Rest
Il caso più comune di utilizzo dell'operazione rest è nel momento della clonazione. In questo caso passiamo dall'eseguire una riduzione (slice) di 0 elementi all'utilizzo del rest.
var a = [1, 2, 3, 4]; var a2 = arr.slice(); /// var a2 = [...arr];
Una seconda casistica è la concatenazione.
var n = [1, 2, 3]; var n2 = [4, 5, 6].concat(n); /// var n2 = [4 ,5 , 6, ...n];
Un vantaggio di questa operazione è la possibilità di eseguire la concatenazione in un punto specifico dell'array, o addirittura unire le proprietà di due oggetti.
var n2 = [4 ,5, ...n, 6]; /// var a ={ lastName:"Pizzini" } var b ={ firstName:"Morgan" ...a } /// b ha proprietà 'lastName' e 'firstName'
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Organizzare il codice JavaScript utilizzando i moduli
Mostrare una preview durante l'upload di un'immagine in Blazor
Le novità di Entity Framework (Core) 7
Dependency Injection e custom validator in Blazor con .NET 7.0
Utilizzare la parola chiave nameof per referenziare i nomi dei parametri di un metodo in C#
Organizzare i moduli sfruttando CommonJS
Sopprimere gli errori di concorrenza quando si elimina una entity con Entity Framework 7
Utilizzo di Map e Object in Javascript
Workflow di continuous deployment tramite pull request label in GitHub