🥇12 trikova za rad s JavaScriptom koje većina tutoriala ne pokriva

Kada sam počeo učiti JavaScript, prvo sam napravio popis trikova koji su mi pomogli uštedjeti vrijeme. Pogledujući ih kod drugih programera, na raznim stranicama i u priručnicima.

U ovom članku ću pokazati 12 odličnih načina za poboljšanje i ubrzanje vašeg JavaScript koda. U većini slučajeva oni su univerzalni.

Podsjećamo: za sve čitatelje "Habra" — popust od 10 000 rubalja prilikom upisa na bilo koji tečaj Skillbox uz promo kod "Habr".

Skillbox preporučuje: Praktični tečaj «Mobilni programer PRO».

Filtriranje jedinstvenih vrijednosti

NIZOVI

Tip objekta Set uveden je u ES6, zajedno s …, spread-operatorom, možemo ga iskoristiti za stvaranje 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); // Rezultat: [1, 2, 3, 5]

U običnoj situaciji, za izvođenje iste operacije potrebno je znatno više koda.

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 druge nizove, trebat će vam drugi pristup.

Duljina keširanog niza u petljama

PETLJE

Kada učite for za petlje, slijedite standardnu proceduru:

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

Međutim, s takvom sintaksom, for petlja ponovo provjerava duljinu niza pri svakoj iteraciji.

Ponekad to može biti korisno, ali u većini slučajeva učinkovitije je keširati duljinu niza, što zahtijeva jedno upućivanje na njega. To možemo učiniti definiranjem varijable length, gdje postavljamo varijablu i, primjerice, ovako:

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

U načelima, gotovo isto kao i gore, ali povećanjem veličine petlje dobijamo značajnu uštedu vremena.

Procjena kratkog zamjenskog operatora (McCarthyjeva procjena)

UVJETNI OPERATORI

Ternarni operator je brz i učinkovit način za pisanje jednostavnih (a ponekad i ne tako jednostavnih) uvjetnih izraza:

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. Umjesto njega možemo koristiti ‘and’ && i ‘or’ || logičke operatore za procjenu nekih izraza na još sažetiji način. Često se naziva 'kratkim zamjenjivanjem' ili 'procjenom kratkog zamjenskog operatora'.

Kako to funkcionira

Recimo da želimo vratiti samo jedno od dva ili više uvjeta.

Korištenje && vraća prvu false vrijednost. Ako se svaki operand ocjenjuje kao true, vraća se posljednji izračunati izraz.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Rezultat: 3

console.log(0 && null); // Rezultat: 0

Korištenje || omogućava vraćanje prve true vrijednosti. Ako se svaki operand ocjenjuje kao false, vraća se posljednja izračunata vrijednost.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Rezultat: 1

console.log(0 || null); // Rezultat: null

Primjer 1

Recimo da želimo vratiti length varijable, ali ne znamo njen tip.

U tom slučaju možemo koristiti if/else za provjeru je li foo odgovarajući tip, ali taj način može biti predug. Stoga je bolje koristiti naše "kratko prebacivanje".

return (foo || []).length;

Ako varijabla foo ima odgovarajući length, ona će biti vraćena. U suprotnom, dobit ćemo 0.

Primjer 2

Jeste li imali problema s pristupom ugniježdenom objektu? Možda ne znate postoji li objekt ili jedna od njegovih podvrijednosti, a to može uzrokovati probleme.

Na primjer, željeli smo pristupiti svojstvu data u this.state, ali data nije definirana dok naša aplikacija ne izvrši zahtjev za dohvat.

Ovisno o tome gdje ga koristimo, poziv this.state.data može ometati pokretanje aplikacije. Da bismo riješili problem, mogli bismo to obaviti u uvjetnom izrazu:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Dohvaćanje podataka';
}

Prikladnija opcija bila bi korištenje operatora "ili".

return (this.state.data || 'Dohvaćanje podataka');

Ne možemo promijeniti gornji kod da koristimo &&. Operator ‘Dohvaćanje podataka’ && this.state.data vratit će this.state.data bez obzira na to je li undefined ili ne.

Opcijska lančana veza

Može se preporučiti korištenje opcijske lančane veze prilikom pokušaja vraćanja svojstva duboko u hijerarhijskoj strukturi. Tako se simbol upitnika ? može koristiti za izdvajanje svojstva samo ako nije nula (null).

Na primjer, mogli bismo izvršiti refaktoriranje prethodnog primjera, dobivajući this.state.data?.. (). To jest, data se vraća samo ako vrijednost nije null.

Ili, ako je važno je li state definirano ili ne, mogli bismo vratiti this.state?.data.

Pretvaranje u Boolean

PRETVARANJE TIPA

Osim uobičajenih logičkih funkcija true i false, JavaScript također tretira sve ostale vrijednosti kao truthy ili falsy.

Osim ako nije drugačije navedeno, sve vrednosti u JavaScript-u su truthy, osim 0, "", null, undefined, NaN i, naravno, false. Ovi poslednji su falsy.

Možemo lako prelaziti između jednog i drugog koristeći operator !, koji takođe konvertuje tip u logički.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Rezultat: true
console.log(typeof true); // Rezultat: "boolean"

Konverzija u string

PRETVARANJE TIPA

Brza konverzija celog broja u string može se izvršiti na sledeći način.

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

Konverzija u celo broj

PRETVARANJE TIPA

Obrnuta konverzija se vrši na sledeći način.

let int = "15";
int = +int;
 
console.log(int); // Rezultat: 15
console.log(typeof int); // Rezultat: "number"

Ovaj metod može se koristiti i za konverziju boolean tipa podataka u obične numeričke vrednosti, kako je prikazano u nastavku:

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

Mogu postojati situacije kada će + biti interpretirano kao operator konkatenacije, a ne sabiranja. Da bi se to izbeglo, treba koristiti tildu: ~. Ovaj operator je ekvivalentan izrazu -n-1. Na primer, ~ 15 je jednako -16.

Korišćenje dve uzastopne tildice poništava operaciju, jer — (- — n — 1) — 1 = n + 1 — 1 = n. Drugim rečima, ~ -16 je jednako 15.

const int = ~~"15"
console.log(int); // Rezultat: 15
console.log(typeof int); // Rezultat: "number"

<Quick Powers

OPERACIJE

Počevši od ES7, može se koristiti operator za stepenisanje ** kao skraćenica za stepene. Ovo je mnogo brže od korišćenja Math.pow (2, 3). Izgleda jednostavno, ali ovaj momenat je uključen na listu trikova, jer se ne pominje svuda.

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

Ne treba ga mešati sa simbolom ^, koji se obično koristi za stepenisanje. Ali u JavaScript-u, ovo je operator XOR.

Pre ES7, skraćenica ** mogla se koristiti samo za stepene sa osnovom 2 korišćenjem operatora bitovnog pomeranja ulevo <<:

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

Na primer, 2 << 3 = 16 ekvivalentno je izrazu 2 ** 4 = 16.

Float u celo broj

OPERACIJE / KONVERZIJA TIPOVA

Ako je potrebno konvertovati float u celo broj, može se koristiti Math.floor(), Math.ceil() ili Math.round(). Ali postoji i brži način, koristeći |, tj. operator OR.

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

Ponašanje | u velikoj mjeri ovisi o tome radite li s pozitivnim ili negativnim brojevima, tako da je ova metoda pogodna samo ako ste sigurni u ono što radite.

n | 0 uklanja sve što ide nakon decimalnog separatora, obrezujući decimalni broj na cjelobrojni.

Isti učinak zaokruživanja možete postići koristeći ~~. Nakon prisilne konverzije u cijeli broj, vrijednost ostaje nepromijenjena.

Uklanjamo završne brojeve

Operator OR može se koristiti za uklanjanje bilo kojeg broja znamenki iz broja. To znači da nam nije potrebno pretvarati tipove, kao ovdje:

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

Umjesto toga jednostavno pišemo:

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

Automatsko vezivanje

KLASE

Arrow funkcije ES6 mogu se koristiti u klasnim metodama, a pritom se podrazumijeva vezivanje. Zbog toga se može oprostiti od ponavljajućih izraza poput this.myMethod = this.myMethod.bind (this)!

uvoz React, { Komponenta } iz React;
 
izvoziti zadano klasu App kao Komponenta {
  konstruktor(props) {
  super(props);
  this.state = {};
  }
 
mojMetod = () =&gt; {
    // Ova metoda je implicitno povezana!
  }
 
render() {
    return (
      <>
        <div>
          {this.mojMetod()}
        </div>
      </>
    )
  }
};

Obrezivanje niza

NIZOVI

Ako trebate ukloniti vrijednosti iz niza, postoje brži metodi od splice().

Na primjer, ako znate veličinu originalnog niza, možete ponovno definirati njegovu svojstvo length na sljedeći način:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Rezultat: [0, 1, 2, 3]

Ali postoji još jedna metoda, koja je brža. Ako vam je brzina važna, evo našeg izbora:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Rezultat: [0, 1, 2, 3]

Izdvajanje zadnje vrijednosti (vrijednosti) 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)); // Rezultat: [9]
console.log(array.slice(-2)); // Rezultat: [8, 9]
console.log(array.slice(-3)); // Rezultat: [7, 8, 9]

Formatiranje JSON koda

JSON

Možda ste već koristili JSON.stringify. Znate li da vam pomaže u formatiranju vašeg JSON-a?

Metoda stringify() prihvaća dva opcionalna parametra: funkciju replacer, koju možete koristiti za filtriranje prikazanog JSON-a, i vrijednost space.

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

To je to, nadam se da su svi navedeni trikovi bili korisni. Koje vi trikove poznajete? Napišite ih u komentarima.

Skillbox preporučuje:

Dvoipogodišnji praktični tečaj „Ja sam PRO web programer“.

Online tečaj «C# developer od 0».

Praktični godišnji tečaj «PHP programer od nule do PRO».

Izvor: habr.com