Dall'archivio script > HTML5

Ottimizzare il codice JavaScript con i Shorthand Patterns - terza parte

di Morgan PizziniMorgan Pizzini, in HTML5, JavaScript,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi