🥇12 trucchi per lavorare con JavaScript non presenti nella maggior parte dei tutorial

Quando ho iniziato a studiare JavaScript, la prima cosa che ho fatto è stata creare un elenco di trucchi che mi aiutavano a risparmiare tempo. Li ho visti da altri programmatori, su vari siti e nei manuali.

In questo articolo mostrerò 12 modi eccellenti per migliorare e velocizzare il tuo codice JavaScript. Nella maggior parte dei casi, sono universali.

Ricordiamo: per tutti i lettori di «Habr» — sconto di 10.000 rubli per l'iscrizione a qualsiasi corso Skillbox con il codice promozionale «Habr».

Skillbox consiglia: Corso pratico «Sviluppatore mobile PRO».

Filtraggio di valori unici

ARRAY

Il tipo di oggetto Set è stato introdotto in ES6; insieme all'operatore spread, possiamo usarlo per creare un nuovo array che contiene solo valori unici.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Risultato: [1, 2, 3, 5]

In una situazione normale, per eseguire la stessa operazione è necessario molto più codice.

Questo trucco funziona per array che contengono tipi primitivi: undefined, null, boolean, string e number. Se stai lavorando con un array che contiene oggetti, funzioni o array aggiuntivi, avrai bisogno di un altro approccio.

Lunghezza dell'array cache nei cicli

CICLI

Quando studi il for per i cicli, segui la procedura standard:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Tuttavia, con questa sintassi, il ciclo for controlla nuovamente la lunghezza dell'array ad ogni iterazione.

A volte può essere utile, ma nella maggior parte dei casi è più efficiente memorizzare la lunghezza dell'array, il che richiede una sola chiamata. Possiamo farlo definendo una variabile di lunghezza, dove impostiamo la variabile i, ad esempio, in questo modo:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Fondamentalmente, è quasi lo stesso di prima, ma con l'aumento della dimensione del ciclo avremo un notevole risparmio di tempo.

Valutazione del short-circuit (valutazione di McCarthy)

OPERATORI CONDIZIONALI

L'operatore ternario è un modo veloce ed efficace per scrivere semplici (e a volte non così semplici) dichiarazioni condizionali:

x > 100 ? "maggiore di 100" : "minore di 100";
x > 100 ? (x > 200 ? "maggiore di 200" : "tra 100-200") : "minore di 100";

Ma a volte anche l'operatore ternario è più complesso di quanto dovrebbe essere. Invece di esso possiamo usare i logici 'and' && e 'or' || per valutare alcune espressioni in modo ancora più conciso. È spesso chiamato "short-circuit" o "valutazione del short-circuit".

Come funziona

Diciamo che vogliamo restituire solo una di due o più condizioni.

L'uso di && restituirà il primo valore false. Se ogni operando viene valutato come true, verrà restituita l'ultima espressione calcolata.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Risultato: 3

console.log(0 && null); // Risultato: 0

L'uso di || permetterà di restituire il primo valore true. Se ogni operando viene valutato come false, verrà restituito l'ultimo valore calcolato.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Risultato: 1

console.log(0 || null); // Risultato: null

Esempio 1

Supponiamo di voler restituire la lunghezza di una variabile, ma non conosciamo il suo tipo.

In questo caso, possiamo usare if/else per verificare che foo sia del tipo giusto, ma questo approccio potrebbe risultare troppo lungo. Perciò è meglio usare il nostro 'short-circuit'.

return (foo || []).length;

Se la variabile foo ha una lunghezza appropriata, essa verrà restituita. Altrimenti, otterremo 0.

Esempio 2

Hai avuto problemi ad accedere a un oggetto annidato? Potresti non sapere se l'oggetto o una delle sue sotto-proprietà esiste, e questo può portare a problemi.

Ad esempio, volevamo accedere alla proprietà data in this.state, ma data non è definita finché il nostro programma non restituisce la richiesta di recupero.

A seconda di dove lo usiamo, la chiamata a this.state.data potrebbe impedire l'avvio dell'applicazione. Per risolvere il problema, potremmo racchiudere questo in un'espressione condizionale:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

Un'opzione più appropriata sarebbe usare l'operatore 'or'.

return (this.state.data || 'Fetching Data');

Non possiamo modificare il codice sopra per usare &&. L'operatore 'Fetching Data' && this.state.data restituirà this.state.data indipendentemente dal fatto che sia undefined o meno.

Catena opzionale

Potremmo voler utilizzare una catena opzionale quando tentiamo di restituire una proprietà in una struttura ad albero profonda. Quindi, il simbolo del punto interrogativo ? può essere utilizzato per estrarre la proprietà, solo se non è null.

Ad esempio, potremmo rifattorizzare l'esempio precedente, ottenendo this.state.data?.. (). Cioè, data viene restituita solo se il valore non è null.

Oppure, se è importante sapere se state è definito o meno, potremmo restituire this.state?.data.

Conversione in Boolean

CONVERSIONE DEI TIPI

Oltre ai normali valori booleani true e false, JavaScript considera anche tutti gli altri valori come truthy o falsy.

Fino a quando non diversamente specificato, tutti i valori in JavaScript sono truthy, ad eccezione di 0, "", null, undefined, NaN e, naturalmente, false. Questi ultimi sono falsy.

Possiamo facilmente passare da uno all'altro utilizzando l'operatore !, che converte anche il tipo in booleano.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Risultato: true
console.log(typeof true); // Risultato: "boolean"

Conversione in stringa

CONVERSIONE DEI TIPI

Una rapida conversione di un numero intero in stringa può essere effettuata nel modo seguente.

const val = 1 + "";
 
console.log(val); // Risultato: "1"
console.log(typeof val); // Risultato: "string"

Conversione in numero intero

CONVERSIONE DEI TIPI

La conversione inversa si esegue così.

let int = "15";
int = +int;
 
console.log(int); // Risultato: 15
console.log(typeof int); // Risultato: "number"

Questo metodo può essere utilizzato anche per convertire il tipo di dato booleano in normali valori numerici, come mostrato di seguito:

console.log(+true);  // Risultato: 1
console.log(+false); // Risultato: 0

Possono esserci situazioni in cui + viene interpretato come operatore di concatenazione, e non come somma. Per evitare ciò, è consigliabile utilizzare le tilde: ~. Questo operatore è equivalente all'espressione -n-1. Ad esempio, ~ 15 è uguale a -16.

L'uso di due tilde consecutive annulla l'operazione, poiché — (- — n — 1) — 1 = n + 1 — 1 = n. In altre parole, ~ -16 è uguale a 15.

const int = ~~"15"
console.log(int); // Risultato: 15
console.log(typeof int); // Risultato: "number"

<Quick Powers

OPERAZIONI

A partire da ES7, è possibile utilizzare l'operatore di elevazione a potenza ** come abbreviazione per le potenze. Questo è molto più veloce rispetto all'uso di Math.pow (2, 3). Sembra semplice, ma è importante menzionarlo in quanto non viene citato ovunque.

console.log(2 ** 3); // Risultato: 8

Non bisogna confonderlo con il simbolo ^, che di solito è usato per l'elevazione a potenza. Ma in JavaScript questo è l'operatore XOR.

Fino a ES7, l'abbreviazione ** poteva essere utilizzata solo per potenze con base 2 utilizzando l'operatore di shift bitwise a sinistra <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Ad esempio, 2 << 3 = 16 è equivalente all'espressione 2 ** 4 = 16.

Float a intero

OPERAZIONI / CONVERSIONE TIPI

Se è necessario convertire un float in un numero intero, è possibile utilizzare Math.floor(), Math.ceil() o Math.round(). Ma c'è anche un modo più veloce, utilizzando |, cioè l'operatore OR.

console.log(23.9 | 0);  // Risultato: 23
console.log(-23.9 | 0); // Risultato: -23

Il comportamento | dipende in gran parte dal fatto che tu stia trattando numeri positivi o negativi, quindi questo metodo è valido solo se sei sicuro di quello che stai facendo.

n | 0 rimuove tutto ciò che viene dopo il separatore decimale, troncando il numero in virgola mobile a un intero.

Puoi ottenere lo stesso effetto di arrotondamento usando ~~. Dopo la conversione forzata in intero, il valore rimane invariato.

Rimuoviamo le cifre finali

L'operatore OR può essere utilizzato per rimuovere qualsiasi numero di cifre da un numero. Ciò significa che non dobbiamo convertire i tipi, come qui:

let str = "1553";
Number(str.substring(0, str.length - 1));

Invece, scriviamo semplicemente:

console.log(1553 / 10   | 0)  // Risultato: 155
console.log(1553 / 100  | 0)  // Risultato: 15
console.log(1553 / 1000 | 0)  // Risultato: 1

Associazione automatica

CLASSI

Le funzioni freccia ES6 possono essere utilizzate nei metodi delle classi e implicano il binding. Questo consente di dire addio a espressioni ripetitive come this.myMethod = this.myMethod.bind(this)!

importa React, { Component } da React;
 
export default class App estende Componente {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    // Questo metodo è legato implicitamente!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Troncamento di un array

ARRAY

Se hai bisogno di rimuovere valori da un array, ci sono metodi più veloci rispetto a splice().

Per esempio, se conosci la dimensione dell'array originale, puoi ridefinire la sua proprietà length nel seguente modo:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Risultato: [0, 1, 2, 3]

Ma c'è un altro metodo, e anche più veloce. Se la velocità è importante per te, ecco la nostra scelta:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Risultato: [0, 1, 2, 3]

Estrazione dell'ultimo valore (o valori) da un array

ARRAY
Questa tecnica richiede l'utilizzo del metodo slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Risultato: [9]
console.log(array.slice(-2)); // Risultato: [8, 9]
console.log(array.slice(-3)); // Risultato: [7, 8, 9]

Formattazione del codice JSON

JSON

Forse hai già usato JSON.stringify. Lo sapevi che aiuta a formattare il tuo JSON?

Il metodo stringify() accetta due parametri facoltativi: una funzione replacer che può essere usata per filtrare il JSON visualizzato e un valore space.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Risultato:
// '{
//     "alpha": A,
//     "beta": B
// }'

Ecco tutto, spero che tutte le tecniche indicate siano state utili. E quali trucchi conosci? Scrivili nei commenti.

Skillbox consiglia:

Corso pratico di due anni «Sono un web developer PRO».

Corso online «Sviluppatore C# da 0».

Corso pratico annuale «Sviluppatore PHP da 0 a PRO».

Fonte: habr.com