Kad sam počeo učiti JavaScript, prvo što sam napravio bilo je napraviti popis trikova koji su mi pomogli uštedjeti vrijeme. Uočio sam ih kod drugih programera, na različitim stranicama iu priručnicima.
U ovom ću vam članku pokazati 12 izvrsnih načina da poboljšate i ubrzate svoj JavaScript kod. U većini slučajeva oni su univerzalni.
Podsjećamo: za sve čitatelje "Habra" - popust od 10 000 rubalja pri upisu na bilo koji tečaj Skillbox koristeći promotivni kod "Habr".
Skillbox preporučuje: Praktični tečaj .
Filtriranje jedinstvenih vrijednosti
NIZOVI
Tip objekta Set uveden je u ES6, zajedno s operatorom..., spread, možemo ga koristiti za stvaranje novog polja koje 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.
Duljina niza predmemorije u ciklusima
CIKLUSI
Kada učite for petlje, slijedite standardnu proceduru:
for (let i = 0; i < array.length; i++){
console.log(i);
}Međutim, s ovom sintaksom, for petlja opetovano provjerava duljinu niza u svakoj iteraciji.
Ponekad ovo može biti korisno, ali u većini slučajeva je učinkovitije predmemorirati duljinu niza, što će zahtijevati jedan pristup njemu. To možemo učiniti definiranjem varijable duljine gdje definiramo varijablu i, ovako:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}U principu, gotovo isto kao i gore, ali povećanjem veličine petlje dobit ćemo značajnu uštedu vremena.
Ocjena kratkog spoja (McCarthy ocjena)
UVJETNI OPERATORI
Ternarni operator je brz i učinkovit način za pisanje jednostavnih (a ponekad i ne tako jednostavnih) uvjetnih iskaza:
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 kompliciraniji nego što je potrebno. Možemo koristiti 'i' && i 'ili' umjesto || Booleovi operatori za procjenu određenih izraza na još sažetiji način. Često se naziva "kratki spoj" ili "ocjena kratkog spoja".
Kako ovo radi
Recimo da želimo vratiti samo jedan od dva ili više uvjeta.
Upotreba && će vratiti prvu lažnu vrijednost. Ako je vrijednost svakog operanda istinita, tada će se vratiti posljednji procijenjeni izraz.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Korištenje || vratit će prvu pravu vrijednost. Ako je vrijednost svakog operanda netočna, vratit će se zadnja 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 vratiti duljinu varijable, ali ne znamo njen tip.
U ovom slučaju, možete koristiti if/else da provjerite je li foo pravi tip, ali ova metoda može biti preduga. Stoga je bolje uzeti naš "kratki spoj".
return (foo || []).length;Ako varijabla foo ima odgovarajuću duljinu, 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 objekt ili jedno od njegovih podsvojstava, a to može dovesti do problema.
Na primjer, htjeli smo pristupiti svojstvu podataka u this.state, ali podaci nisu definirani sve dok naš program ne vrati zahtjev za dohvaćanje.
Ovisno o tome gdje ga koristimo, pozivanje this.state.data može spriječiti pokretanje aplikacije. Da bismo riješili problem, mogli bismo ovo zamotati u uvjetni izraz:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Bolja opcija bila bi koristiti operator "ili".
return (this.state.data || 'Fetching Data');Ne možemo promijeniti gornji kod da koristi &&. Operator 'Dohvaćanje podataka' && this.state.data vratit će this.state.data bez obzira je li nedefiniran ili ne.
Lanac po izboru
Moglo bi se predložiti korištenje opcijskog ulančavanja kada se pokušava vratiti svojstvo duboko u strukturu stabla. Dakle, simbol upitnika? može se koristiti za dohvaćanje svojstva samo ako nije null.
Na primjer, mogli bismo refaktorirati gornji primjer da dobijemo this.state.data?..(). Odnosno, podaci se vraćaju samo ako vrijednost nije null.
Ili, ako je važno je li stanje definirano ili ne, možemo vratiti this.state?.data.
Pretvori u Booleov
PRETVORBA VRSTA
Uz normalne Booleove funkcije true i false, JavaScript također tretira sve druge vrijednosti kao istinite ili netočne.
Dok nije drugačije navedeno, sve vrijednosti u JavaScriptu su istinite, osim 0, "", null, undefined, NaN i, naravno, false. Potonji su lažni.
Lako se možemo prebacivati između ta dva pomoću operatora !, koji također pretvara tip u booleov.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Pretvori u niz
PRETVORBA VRSTA
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
PRETVORBA VRSTA
Obrnutu transformaciju izvodimo ovako.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Ova se metoda također može koristiti za pretvaranje tipa boolean 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 + biti protumačen kao operator ulančavanja, a ne kao operator zbrajanja. 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 je - (- - 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 operator stepenovanja ** kao skraćenicu za potencije. Ovo je puno brže od korištenja Math.pow(2, 3). Čini se jednostavno, ali ova točka je uključena u popis tehnika, jer se ne spominje svugdje.
console.log(2 ** 3); // Result: 8Ne treba ga brkati sa simbolom ^, koji se obično koristi za stepenovanje. Ali u JavaScriptu ovo je XOR operator.
Prije ES7, prečac ** mogao se koristiti samo za potencije baze 2 korištenjem operatora pomaka ulijevo <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Na primjer, 2 << 3 = 16 je ekvivalentno 2 ** 4 = 16.
Float do cijelog broja
OPERACIJE / KONVERZIJA VRSTA
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 o tome radite li s pozitivnim ili negativnim brojevima, stoga je ova metoda prikladna samo ako ste sigurni u ono što radite.
n | 0 uklanja sve nakon decimalnog razdjelnika, skraćujući float na cijeli broj.
Možete dobiti isti učinak zaokruživanja koristeći ~~. Nakon prisilne konverzije u cijeli broj, vrijednost ostaje nepromijenjena.
Uklanjanje brojeva na kraju
Operator OR može se koristiti za uklanjanje bilo kojeg broja znamenki iz broja. To znači da ne trebamo pretvarati tipove kao 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
NASTAVE
ES6 oznake strelica mogu se koristiti u metodama klase, a vezanje se podrazumijeva. To znači da se možete oprostiti od ponavljajućih izraza poput 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>
</>
)
}
};Obrezivanje niza
NIZOVI
Ako trebate izdvojiti vrijednosti iz niza, postoje brže metode od splice().
Na primjer, ako znate veličinu izvornog niza, možete nadjačati njegovo svojstvo duljine 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 važna brzina, 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(ih) vrijednosti(a) 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 vam pomaže formatirati JSON?
Metoda stringify() uzima dva izborna 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 znaš? Napišite ih u komentarima.
Skillbox preporučuje:
- Dvogodišnji praktični tečaj .
- Mrežni tečaj .
- Praktični godišnji tečaj .
Izvor: www.habr.com