🥇12 trucchi per lavorare con JavaScript che non si trovano 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 hanno aiutato a risparmiare tempo. Li ho presi in prestito da altri programmatori, da vari siti e manuali.

In questo articolo, mostrerò 12 ottimi metodi 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 oggetto Set è stato introdotto in ES6, insieme a ..., l'operatore spread, lo possiamo usare per creare un nuovo array contenente 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 servirebbe molto più codice.

Questo trucco funziona per array contenenti 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 for per i cicli, segui una procedura standard:

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

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

A volte può essere utile, ma nella maggior parte dei casi è più efficace memorizzare la lunghezza dell'array, il che richiederà solo un accesso a esso. Possiamo fare questo definendo una variabile lunghezza, dove impostiamo la variabile i, per esempio, in questo modo:

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

Fondamentalmente, è quasi lo stesso di sopra, ma aumentando la dimensione del ciclo otterremo un notevole risparmio di tempo.

Valutazione del corto circuito (valutazione di McCarthy)

OPERATORI CONDIZIONALI

L'operatore ternario è un modo rapido 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 e 200') : 'minore di 100';

Ma a volte anche l'operatore ternario è più complesso del necessario. Invece, possiamo utilizzare gli operatori logici 'and' && e 'or' || per valutare alcune espressioni in modo ancora più conciso. È spesso chiamato "corto circuito" o "valutazione del corto circuito".

Come funziona

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

L'uso di && restituirà il primo valore false. Se ogni operando è 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 || consentirà di restituire il primo valore true. Se ogni operando è 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 length di una variabile, ma non conosciamo il suo tipo.

In questo caso, si può utilizzare if/else per verificare che foo sia del tipo corretto, ma questo approccio potrebbe rivelarsi troppo lungo. È meglio utilizzare il nostro 'short-circuit'.

return (foo || []).length;

Se la variabile foo ha una length valida, verrà restituita. Altrimenti otterremo 0.

Esempio 2

Hai avuto problemi ad accedere a un oggetto nidificato? Potresti non sapere se l'oggetto o una delle sue sottoproprietà esistono, e questo può causare problemi.

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

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

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

Una soluzione più adatta sarebbe usare l'operatore 'or'.

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

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

Catena opzionale

Si potrebbe suggerire di utilizzare la catena opzionale quando si tenta di restituire una proprietà all'interno di una struttura ad albero profonda. Così, il simbolo del punto interrogativo ? può essere utilizzato per estrarre una proprietà solo se non è nullo (null).

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

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

Conversione in Boolean

CONVERSIONE DEI TIPI

Oltre alle normali funzioni logiche true e false, JavaScript considera anche tutti gli altri valori come truthy o falsy.

Fino a prova contraria, tutti i valori in JavaScript sono considerati truthy, ad eccezione di 0, «», null, undefined, NaN e, naturalmente, false. Questi ultimi sono falsy.

Possiamo facilmente alternare tra i due 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 conversione rapida di un intero in stringa può essere eseguita nel seguente modo.

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

Conversione in 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 illustrato di seguito:

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

Ci possono essere situazioni in cui + verrà interpretato come operatore di concatenazione anziché come somma. Per evitare ciò, è meglio 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 usare l'operatore di elevamento a potenza ** come abbreviazione per le potenze. Questo è molto più veloce rispetto all'uso di Math.pow(2, 3). Sembra semplice, ma è incluso nella lista degli aspetti poiché non è sempre menzionato.

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

Non confondetelo con il simbolo ^, che è comunemente usato per l'elevamento a potenza. Ma in JavaScript questo è l'operatore XOR.

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

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

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

Float in intero

OPERAZIONI / CONVERSIONE TIPI

Se è necessario convertire un float in un intero, si possono usare Math.floor(), Math.ceil() o Math.round(). Ma c'è anche un modo più veloce, usando |, ovvero l'operatore OR.

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

Il comportamento dipende in larga misura dal fatto che ci si confronti con numeri positivi o negativi, quindi questo metodo è adatto solo se si è certi di ciò che si sta facendo.

n | 0 rimuove tutto ciò che viene dopo il punto decimale, arrotondando il numero decimale a un numero intero.

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

Rimuoviamo i numeri finali

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

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

Invece, basta scrivere:

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

Binding automatico

CLASSI

Le arrow functions ES6 possono essere utilizzate nei metodi delle classi, con la legatura implicita. Grazie a questo, è possibile dire addio a espressioni ripetitive come this.myMethod = this.myMethod.bind(this)!

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

Riduzione dell'array

ARRAY

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

Ad 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'è anche un altro metodo, e questo è più veloce. Se per te la velocità è importante, 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) dell'array

ARRAY
Questa tecnica richiede l'uso 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

Probabilmente hai già utilizzato JSON.stringify. Sai che ti aiuta a formattare il tuo JSON?

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

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

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

Skillbox consiglia:

Corso pratico di due anni «Sono uno sviluppatore web PRO».

Corso online «Sviluppatore C# da zero».

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

Fonte: habr.com