Quandu aghju cuminciatu à amparà JavaScript, a prima cosa ch'e aghju fattu hè di fà una lista di trucchi chì m'hà aiutatu à salvà tempu. I spotted them from other programs, in diversi siti è in manuali.
In questu articulu, vi mustraraghju 12 grandi modi per migliurà è accelerà u vostru codice JavaScript. In a maiò parte di i casi sò universali.
Ramintemu: per tutti i lettori di "Habr" - un scontu di 10 000 rubles quandu si iscrizzione in ogni cursu Skillbox cù u codice promozionale "Habr".
Skillbox consiglia: Corso praticu .
Filtrà i valori unichi
ARRAYS
U tipu d'ughjettu Set hè statu introduttu in ES6, cù l'operatore ..., sparghje, pudemu usà per creà un novu array chì cuntene solu valori unichi.
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, assai più codice hè necessariu per fà a listessa operazione.
Sta tecnica funziona per array chì cuntenenu tipi primitivi: undefined, null, boolean, string è numeru. Sè vo avete travagliatu cù un array chì cuntene oggetti, funzioni, o arrays supplementari, avete bisognu di un approcciu diversu.
Lunghezza di l'array di cache in cicli
CICLI
Quandu amparate per i loops, seguite a prucedura standard:
for (let i = 0; i < array.length; i++){
console.log(i);
}In ogni casu, cù questa sintassi, u loop per verifica ripetutamente a lunghezza di l'array ogni iterazione.
A volte, questu pò esse utile, ma in a maiò parte di i casi hè più efficaci per cache a durata di l'array, chì duverà un accessu à questu. Pudemu fà questu per definisce una variabile di lunghezza induve definisce a variàbile i, cusì:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}In principiu, quasi u listessu cum'è sopra, ma aumentendu a dimensione di u ciclu avemu da ottene un risparmiu di tempu significativu.
Classificazione di cortocircuitu (valutazione McCarthy)
OPERATORI CONDICIONALI
L'operatore ternariu hè un modu veloce è efficae per scrive dichjarazioni cundiziunali simplici (è à volte micca cusì simplici):
x> 100? "più di 100": "menu di 100";
x> 100? (x>200? "più di 200": "trà 100-200"): "menu di 100";
Ma qualchì volta ancu l'operatore ternariu hè più cumplicatu di ciò chì hè necessariu. Pudemu aduprà "è" && è "o" invece || Operatori booleani per evaluà certe espressioni in una manera ancu più cuncisa. Hè spessu chjamatu "short circuit" o "short circuit rating".
Cumu serà ch'ella ùn stu travagliu
Diciamu chì vulemu vultà solu una di duie o più cundizioni.
Utilizà && restituverà u primu valore falsu. Se ogni operandu valuta à veru, allora l'ultima espressione evaluata serà restituita.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Utilizendu || restituverà u primu valore veru. Se ogni operandu evaluate à false, allora l'ultimu valore evaluatu serà tornatu.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullesempiu 1
Diciamu chì vulemu rinvià a durata di una variàbile, ma ùn sapemu micca u so tipu.
In questu casu, pudete aduprà si / altru per verificà chì u foo hè u tipu ghjustu, ma stu metudu pò esse troppu longu. Dunque, hè megliu piglià u nostru "circuitu cortu".
return (foo || []).length;Se a variabile foo hà una durata adattata, allora serà restituita. Altrimenti averemu 0.
esempiu 2
Avete avutu prublemi à accede à un oggettu nidificatu? Ùn pudete micca sapè s'ellu esiste un ughjettu o una di e so subproprietà, è questu pò purtà à prublemi.
Per esempiu, vulemu accede à a pruprietà di dati in this.state, ma i dati ùn sò micca definiti finu à chì u nostru prugramma torna una dumanda di ricerca.
Sicondu induve noi aduprà, chjamà this.state.data pò impedisce l 'applicazzioni da principiatu. Per risolve u prublema, pudemu imbulighjà questu in una espressione cundizionale:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Una megliu opzione seria di utilizà l'operatore "o".
return (this.state.data || 'Fetching Data');Ùn pudemu micca cambià u codice sopra à aduprà &&. L 'operatore 'Fetching Data' && this.state.data turnarà this.state.data a priscinniri di s'ellu ùn hè micca definitu o micca.
Catena opzionale
Puderia suggerisce l'usu di a catena opzionale quandu pruvate di rinvià una pruprietà in una struttura d'arburu. Allora, u simbulu d'interrogazione ? pò esse usatu per ricuperà una pruprietà solu s'ellu ùn hè micca nulu.
Per esempiu, pudemu refactor l'esempiu quì sopra per ottene this.state.data?..(). Questu hè, i dati sò restituiti solu se u valore ùn hè micca nulu.
Or, s'ellu importa s'ellu hè statu definitu o micca, pudemu turnà stu.state?.data.
Cunvertisce à Boolean
CONVERSIONE TIPI
In più di e funzioni booleane normali veri è falsi, JavaScript tratta ancu tutti l'altri valori cum'è verità o falsi.
Finu à altrimenti nutatu, tutti i valori in JavaScript sò veri, eccettu 0, "", null, undefined, NaN è, sicuru, falsi. L'ultimi sò falsi.
Pudemu facilmente cambià trà i dui usendu l'operatore !, chì cunverta ancu u tipu à booleanu.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Cunvertisce in stringa
CONVERSIONE TIPI
Una cunversione rapida da un integer à una stringa pò esse fatta cum'è seguita.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Cunvertisce à integer
CONVERSIONE TIPI
Facemu a trasfurmazioni inversa cusì.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Stu metudu pò ancu esse usatu per cunvertisce u tipu di dati boolean in valori numerichi regulari, cum'è mostra quì sottu:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Ci ponu esse situazioni induve + serà interpretatu cum'è un operatore di concatenazione invece di un operatore di addizione. Per evitari questu, avete aduprà tildes: ~~. Stu operatore hè equivalente à -n-1. Per esempiu, ~ 15 hè uguali à -16.
Utilizà dui tildi in una fila nega l'operazione perchè - (- - n - 1) - 1 = n + 1 - 1 = n. In altri palori, ~ -16 hè uguali à 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Poteri veloci
OPERAZIONI
Partendu da ES7, pudete aduprà l'operatore di l'esponenziazione ** cum'è una stenografia per i puteri. Questu hè assai più veloce di utilizà Math.pow (2, 3). Sembra simplice, ma questu puntu hè inclusu in a lista di tecniche, postu chì ùn hè micca citatu in ogni locu.
console.log(2 ** 3); // Result: 8Ùn deve esse cunfunditu cù u simbulu ^, chì hè comunmente utilizatu per l'espunenti. Ma in JavaScript questu hè l'operatore XOR.
Prima di ES7, u shortcut ** puderia esse usatu solu per i putenzi di a basa 2 utilizendu l'operatore di shift left in bit <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Per esempiu, 2 << 3 = 16 hè equivalente à 2 ** 4 = 16.
Float à integer
OPERAZIONI / CONVERSIONE TIPI
Sè avete bisognu di cunvertisce un float à un integer, pudete aduprà Math.floor (), Math.ceil () o Math.round (). Ma ci hè un modu più veloce, per questu avemu aduprà |, vale à dì, l'operatore OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Cumportamentu | dipende largamente da s'ellu si tratta di numeri pusitivi o negativi, cusì stu metudu hè adattatu solu s'è vo site cunfidenza in ciò chì fate.
n | 0 sguassate tuttu dopu à u separatore decimale, truncandu u float à un integer.
Pudete ottene u listessu effettu di arrotondamentu usendu ~~. Dopu a cunversione furzata à un integer, u valore resta invariatu.
Eliminà i numeri di fine
L'operatore OR pò esse usatu per sguassà ogni numeru di cifre da un numeru. Questu significa chì ùn avemu micca bisognu di cunvertisce tipi cum'è quì:
let str = "1553";
Number(str.substring(0, str.length - 1));Invece scrivimu solu:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Ligame automaticu
CLASSI
Notazioni di freccia ES6 ponu esse aduprate in i metudi di classi, è u ligame hè implicatu. Questu significa chì pudete dì addiu à espressioni ripetitive cum'è questu.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>
</>
)
}
};Tagliatura di array
ARRAYS
Sè avete bisognu di striscia i valori da un array, ci sò metudi più veloci di splice ().
Per esempiu, se sapete a dimensione di l'array originale, pudete annullà a so pruprietà di lunghezza cum'è seguente:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ma ci hè un altru mètudu, è più veloce. Se a velocità hè ciò chì importa per voi, eccu e 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 l'ultimu valore (s) di un array
ARRAYS
Sta tecnica richiede l'usu di u metudu 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]Formate u codice JSON
JSON
Pudete avè digià utilizatu JSON.stringify. Sapete chì aiuta à furmà u vostru JSON?
U metudu stringify () piglia dui paràmetri facultativi: una funzione di sustitutu, chì pò esse usata per filtrà u JSON affissatu, è un valore di spaziu.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'Hè tuttu, spergu chì tutte queste tecniche eranu utili. Chì trucchi cunnosci ? Scriviteli in i cumenti.
Skillbox consiglia:
- Corso praticu di dui anni .
- Corsu in ligna .
- Corso praticu annu .
Source: www.habr.com