Quando ho iniziato a imparare JavaScript, la prima cosa che ho fatto è stata creare un elenco di trucchi che mi hanno aiutato a risparmiare tempo. Li ho individuati da altri programmatori, su diversi siti e nei manuali.
In questo articolo ti mostrerò 12 ottimi modi per migliorare e velocizzare il tuo codice JavaScript. Nella maggior parte dei casi sono universali.
Ti ricordiamo: per tutti i lettori di "Habr" - uno sconto di 10 rubli al momento dell'iscrizione a qualsiasi corso Skillbox utilizzando il codice promozionale "Habr".
Skillbox consiglia: Corso pratico .
Filtraggio di valori univoci
ARRAY
Il tipo di oggetto Set è stato introdotto in ES6, insieme all'operatore..., spread, possiamo usarlo per creare un nuovo array che contenga solo valori univoci.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]In una situazione normale, è necessario molto più codice per eseguire la stessa operazione.
Questa tecnica funziona per array contenenti tipi primitivi: undefinito, null, booleano, stringa e numero. Se stai lavorando con un array contenente oggetti, funzioni o array aggiuntivi, avrai bisogno di un approccio diverso.
Lunghezza dell'array di cache in cicli
CICLI
Quando impari i cicli for, segui la procedura standard:
for (let i = 0; i < array.length; i++){
console.log(i);
}Tuttavia, con questa sintassi, il ciclo for controlla ripetutamente la lunghezza dell'array ad ogni iterazione.
A volte questo può essere utile, ma nella maggior parte dei casi è più efficiente memorizzare nella cache la lunghezza dell'array, il che richiederà un accesso ad esso. Possiamo farlo definendo una variabile di lunghezza in cui definiamo la variabile i, in questo modo:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}In linea di principio, quasi come sopra, ma aumentando la dimensione del ciclo otterremo un notevole risparmio di tempo.
Classificazione di cortocircuito (classificazione McCarthy)
OPERATORI CONDIZIONATI
L'operatore ternario è un modo veloce ed efficiente per scrivere istruzioni condizionali semplici (e talvolta non così semplici):
x>100? “più di 100”: “meno di 100”;
x>100? (x>200? "più di 200": "tra 100-200"): "meno di 100";
Ma a volte anche l’operatore ternario è più complicato del necessario. Possiamo usare invece 'and' && e 'or' || Operatori booleani per valutare determinate espressioni in modo ancora più conciso. Viene spesso chiamato "cortocircuito" o "valore di cortocircuito".
Come funziona
Diciamo che vogliamo restituire solo una di due o più condizioni.
L'utilizzo di && restituirà il primo valore falso. Se ciascun operando restituisce true, verrà restituita l'ultima espressione valutata.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Utilizzando || restituirà il primo valore vero. Se ciascun operando restituisce false, verrà restituito l'ultimo valore valutato.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullesempio 1
Diciamo che vogliamo restituire la lunghezza di una variabile, ma non ne conosciamo il tipo.
In questo caso, puoi usare if/else per verificare che foo sia il tipo giusto, ma questo metodo potrebbe essere troppo lungo. Meglio allora prendere il nostro “cortocircuito”.
return (foo || []).length;Se la variabile foo ha una lunghezza adeguata, verrà restituita. Altrimenti otterremo 0.
esempio 2
Hai avuto problemi nell'accesso a un oggetto nidificato? Potresti non sapere se esiste un oggetto o una delle sue sottoproprietà e questo può causare problemi.
Ad esempio, volessimo accedere alla proprietà data in this.state, ma i dati non sono definiti finché il nostro programma non restituisce una richiesta di recupero.
A seconda di dove lo utilizziamo, chiamare 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';
}Un'opzione migliore sarebbe quella di utilizzare l'operatore "o".
return (this.state.data || 'Fetching Data');Non possiamo modificare il codice sopra per utilizzare &&. L'operatore "Recupero dati" && this.state.data restituirà this.state.data indipendentemente dal fatto che sia indefinito o meno.
Catena opzionale
Si potrebbe suggerire di utilizzare il concatenamento opzionale quando si tenta di restituire una proprietà in profondità in una struttura ad albero. Allora, il simbolo del punto interrogativo? può essere utilizzato per recuperare una proprietà solo se non è nulla.
Ad esempio, potremmo rifattorizzare l'esempio sopra per ottenere this.state.data?..(). Cioè, i dati vengono restituiti solo se il valore non è null.
Oppure, se è importante che lo stato sia definito o meno, potremmo restituire this.state?.data.
Converti in booleano
CONVERSIONE DI TIPO
Oltre alle normali funzioni booleane vero e falso, JavaScript tratta anche tutti gli altri valori come veri o falsi.
Se non diversamente specificato, tutti i valori in JavaScript sono veritieri, tranne 0, "", null, unfine, NaN e, ovviamente, false. Questi ultimi sono falsi.
Possiamo passare facilmente dall'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); // Result: true
console.log(typeof true); // Result: "boolean"Converti in stringa
CONVERSIONE DI TIPO
Una conversione rapida da un numero intero a una stringa può essere eseguita come segue.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Converti in numero intero
CONVERSIONE DI TIPO
Eseguiamo la trasformazione inversa in questo modo.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Questo metodo può essere utilizzato anche per convertire il tipo di dati booleano in valori numerici regolari, come mostrato di seguito:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Potrebbero esserci situazioni in cui + verrà interpretato come un operatore di concatenazione anziché come un operatore di addizione. Per evitare ciò, dovresti usare le tilde: ~~. Questo operatore è equivalente a -n-1. Ad esempio, ~15 è uguale a -16.
L'uso di due tilde di seguito annulla l'operazione perché - (- - n - 1) - 1 = n + 1 - 1 = n. In altre parole, ~-16 è uguale a 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERAZIONI
A partire da ES7, è possibile utilizzare l'operatore di esponenziazione ** come abbreviazione per le potenze. Questo è molto più veloce rispetto all'utilizzo di Math.pow(2, 3). Sembra semplice, ma questo punto è incluso nell'elenco delle tecniche, poiché non è menzionato ovunque.
console.log(2 ** 3); // Result: 8Non deve essere confuso con il simbolo ^, comunemente usato per l'elevamento a potenza. Ma in JavaScript questo è l'operatore XOR.
Prima di ES7, la scorciatoia ** poteva essere utilizzata solo per potenze di base 2 utilizzando l'operatore di spostamento sinistro bit a bit <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Ad esempio, 2 << 3 = 16 equivale a 2 ** 4 = 16.
Da float a intero
OPERAZIONI / CONVERSIONE DI TIPO
Se devi convertire un valore float in un numero intero, puoi utilizzare Math.floor(), Math.ceil() o Math.round(). Ma esiste un modo più veloce, per questo usiamo |, cioè l'operatore OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Comportamento | dipende in gran parte dal fatto che tu abbia a che fare con numeri positivi o negativi, quindi questo metodo è adatto solo se sei sicuro di quello che stai facendo.
n | 0 rimuove tutto dopo il separatore decimale, troncando il float a un numero intero.
Puoi ottenere lo stesso effetto di arrotondamento usando ~~. Dopo la conversione forzata in un numero intero, il valore rimane invariato.
Rimozione dei numeri finali
L'operatore OR può essere utilizzato per rimuovere qualsiasi numero di cifre da un numero. Ciò significa che non è necessario convertire i tipi come qui:
let str = "1553";
Number(str.substring(0, str.length - 1));Invece scriviamo semplicemente:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Collegamento automatico
CLASSI
Le notazioni delle frecce ES6 possono essere utilizzate nei metodi della classe e l'associazione è implicita. Ciò significa che puoi dire addio ad espressioni ripetitive come this.myMethod = this.myMethod.bind(this)!
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};Taglio della matrice
ARRAY
Se è necessario eliminare valori da un array, esistono metodi più veloci di splice().
Ad esempio, se conosci la dimensione dell'array originale, puoi sovrascrivere la sua proprietà length come segue:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ma esiste un altro metodo, ed è più veloce. Se la velocità è ciò che conta per te, ecco le nostre scelte:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]Stampa degli ultimi valori di un 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)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]Formattazione del codice JSON
JSON
Potresti aver già utilizzato JSON.stringify. Sapevi che aiuta a formattare il tuo JSON?
Il metodo stringify() accetta due parametri facoltativi: una funzione di sostituzione, che può essere utilizzata per filtrare il JSON visualizzato, e un valore di spazio.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Questo è tutto, spero che tutte queste tecniche siano state utili. Quali trucchi conosci? Scriveteli nei commenti.
Skillbox consiglia:
- Corso pratico di due anni .
- Corso online .
- Corso pratico annuale .
Fonte: habr.com