Kada sam počeo da učim JavaScript, prvo što sam uradio je da napravim listu trikova koji su mi pomogli da uštedim vreme. Uočio sam ih kod drugih programera, na različitim stranicama i u priručnicima.
U ovom članku ću vam pokazati 12 sjajnih načina da poboljšate i ubrzate svoj JavaScript kod. U većini slučajeva oni su univerzalni.
Podsećamo: za sve čitaoce "Habra" - popust od 10 rubalja pri upisu na bilo koji Skillbox kurs koristeći "Habr" promotivni kod.
Skillbox preporučuje: Praktični kurs .
Filtriranje jedinstvenih vrijednosti
NIZOVI
Tip objekta Set uveden je u ES6, zajedno sa..., operatorom širenja, možemo ga koristiti za kreiranje novog niza koji sadrži samo jedinstvene vrijednosti.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]U normalnoj situaciji, potrebno je mnogo više koda za izvođenje iste operacije.
Ova tehnika radi za nizove koji sadrže primitivne tipove: undefined, null, boolean, string i number. Ako radite s nizom koji sadrži objekte, funkcije ili dodatne nizove, trebat će vam drugačiji pristup.
Dužina cache niza u ciklusima
CIKLUSI
Kada naučite for petlje, slijedite standardnu proceduru:
for (let i = 0; i < array.length; i++){
console.log(i);
}Međutim, s ovom sintaksom, for petlja više puta provjerava dužinu niza svake iteracije.
Ponekad ovo može biti korisno, ali u većini slučajeva je efikasnije keširati dužinu niza, što će zahtijevati jedan pristup njemu. To možemo učiniti definiranjem varijable dužine gdje definiramo varijablu i, ovako:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}U principu, skoro isto kao gore, ali povećanjem veličine petlje dobićemo značajnu uštedu vremena.
Ocjena kratkog spoja (McCarthyjeva ocjena)
CONDITIONAL OPERATORS
Ternarni operator je brz i efikasan način za pisanje jednostavnih (a ponekad i ne tako jednostavnih) uslovnih izjava:
x> 100? “više od 100”: “manje od 100”;
x> 100? (x>200? "više od 200": "između 100-200"): "manje od 100";
Ali ponekad je čak i ternarni operator složeniji nego što je potrebno. Možemo koristiti 'i' && i 'ili' umjesto || Logički operatori za procjenu određenih izraza na još sažetiji način. Često se naziva "kratki spoj" ili "kratki spoj".
Kako ovo radi
Recimo da želimo da vratimo samo jedan od dva ili više uslova.
Upotreba && će vratiti prvu lažnu vrijednost. Ako svaki operand ima vrijednost true, tada će biti vraćen posljednji procijenjeni izraz.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Korištenje || će vratiti prvu istinitu vrijednost. Ako svaki operand procijeni na false, tada će biti vraćena posljednja procijenjena vrijednost.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullprimjer 1
Recimo da želimo da vratimo dužinu varijable, ali ne znamo njen tip.
U ovom slučaju, možete koristiti if/else da provjerite da li je foo pravi tip, ali ova metoda može biti predugačka. Stoga je bolje uzeti naš “kratki spoj”.
return (foo || []).length;Ako varijabla foo ima odgovarajuću dužinu, to će biti vraćeno. Inače ćemo dobiti 0.
primjer 2
Jeste li imali problema s pristupom ugniježđenom objektu? Možda ne znate postoji li objekat ili jedno od njegovih podsvojstava, a to može dovesti do problema.
Na primjer, željeli smo pristupiti svojstvu podataka u this.state, ali podaci nisu definirani sve dok naš program ne vrati zahtjev za preuzimanje.
Ovisno o tome gdje ga koristimo, pozivanje this.state.data može spriječiti pokretanje aplikacije. Da riješimo problem, mogli bismo ovo umotati u uslovni izraz:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Bolja opcija bi bila korištenje operatora "ili".
return (this.state.data || 'Fetching Data');Ne možemo promijeniti gornji kod da koristi &&. Operator 'Dohvaćanje podataka' && this.state.data će vratiti this.state.data bez obzira da li je nedefinisan ili ne.
Opcioni lanac
Moglo bi se predložiti korištenje opcionog ulančavanja kada pokušavate vratiti svojstvo duboko u strukturu stabla. Dakle, simbol znaka pitanja? može se koristiti za dohvaćanje svojstva samo ako nije null.
Na primjer, mogli bismo refaktorirati gornji primjer da dobijemo this.state.data?..(). To jest, podaci se vraćaju samo ako vrijednost nije null.
Ili, ako je bitno da li je stanje definisano ili ne, možemo vratiti this.state?.data.
Pretvori u Boolean
KONVERZIJA TIPA
Osim normalnih logičkih funkcija true i false, JavaScript također tretira sve druge vrijednosti kao istinite ili netačne.
Dok nije drugačije navedeno, sve vrijednosti u JavaScript-u su istinite, osim 0, "", null, nedefinirano, NaN i, naravno, lažno. Potonji su lažni.
Lako se možemo prebacivati između njih pomoću operatora !, koji takođe pretvara tip u boolean.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Pretvori u niz
KONVERZIJA TIPA
Brza konverzija iz cijelog broja u niz može se izvršiti na sljedeći način.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Pretvori u cijeli broj
KONVERZIJA TIPA
Obrnutu transformaciju izvodimo ovako.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Ova metoda se također može koristiti za pretvaranje booleovog tipa podataka u regularne numeričke vrijednosti, kao što je prikazano u nastavku:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Mogu postojati situacije u kojima će se + tumačiti kao operator konkatenacije, a ne kao operator sabiranja. Da biste to izbjegli, trebali biste koristiti tilde: ~~. Ovaj operator je ekvivalentan -n-1. Na primjer, ~15 je jednako -16.
Korištenje dvije tilde u nizu negira operaciju jer - (- - n - 1) - 1 = n + 1 - 1 = n. Drugim riječima, ~-16 je jednako 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERACIJE
Počevši od ES7, možete koristiti eksponencijalni operator ** kao skraćenicu za stepene. Ovo je mnogo brže od upotrebe Math.pow(2, 3). Čini se jednostavno, ali ova točka je uključena u listu tehnika, jer se ne spominje svugdje.
console.log(2 ** 3); // Result: 8Ne treba ga brkati sa simbolom ^, koji se obično koristi za eksponencijaciju. Ali u JavaScript-u ovo je XOR operator.
Prije ES7, ** prečica se mogla koristiti samo za snage baze 2 koristeći operator pomaka po bitu ulijevo <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Na primjer, 2 << 3 = 16 je ekvivalentno 2 ** 4 = 16.
Float na cijeli broj
OPERACIJE / KONVERZIJA TIPA
Ako trebate pretvoriti float u cijeli broj, možete koristiti Math.floor(), Math.ceil() ili Math.round(). Ali postoji brži način, za to koristimo |, odnosno operator OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Ponašanje | uvelike ovisi da li imate posla s pozitivnim ili negativnim brojevima, tako da je ova metoda prikladna samo ako ste sigurni u ono što radite.
n | 0 uklanja sve iza decimalnog separatora, skraćujući float na cijeli broj.
Možete dobiti isti efekat zaokruživanja koristeći ~~. Nakon prisilne konverzije u cijeli broj, vrijednost ostaje nepromijenjena.
Uklanjanje završnih brojeva
Operator OR se može koristiti za uklanjanje bilo kojeg broja cifara iz broja. To znači da ne moramo pretvarati tipove kao što je ovdje:
let str = "1553";
Number(str.substring(0, str.length - 1));Umjesto toga jednostavno pišemo:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatsko povezivanje
CASOVI
ES6 oznake strelica se mogu koristiti u metodama klasa, a vezivanje se podrazumijeva. To znači da se možete oprostiti od izraza koji se ponavljaju kao što je 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>
</>
)
}
};Podrezivanje niza
NIZOVI
Ako trebate ukloniti vrijednosti iz niza, postoje brži metodi od splice().
Na primjer, ako znate veličinu originalnog niza, možete nadjačati njegovo svojstvo dužine na sljedeći način:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ali postoji još jedna metoda, i to brža. Ako vam je brzina važna, evo naših izbora:
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]Ispis posljednje vrijednosti(e) niza
NIZOVI
Ova tehnika zahtijeva korištenje metode 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]Formatiranje JSON koda
JSON
Možda ste već koristili JSON.stringify. Jeste li znali da pomaže u formatiranju vašeg JSON-a?
Metoda stringify() uzima dva opciona parametra: funkciju zamjene, koja se može koristiti za filtriranje prikazanog JSON-a i vrijednost prostora.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'To je sve, nadam se da su sve ove tehnike bile korisne. Koje trikove znate? Napišite ih u komentarima.
Skillbox preporučuje:
- Dvogodišnji praktični kurs .
- Online kurs .
- Praktična godina kursa .
izvor: www.habr.com