11 JavaScript i TypeScript skraćenica koje morate znati za učinkovito kodiranje

JavaScript i TypeScript vrlo su popularni programski jezici u području web razvoja. Oba imaju opsežne skupove značajki i mnoge sintaktičke prečace koji značajno doprinose poboljšanju učinkovitosti kodiranja.

Naučite kako poboljšati svoj kod i maksimalno iskoristiti ove jezike pomoću nekih korisnih prečaca.

1. Ternarni operator

Ternarni operator nudi sažetu i učinkovitu sintaksu za izražavanje uvjetnih iskaza. Sastoji se od tri dijela: uvjeta, izraza koji se pokreće ako se uvjet ocijeni istinitim i izraza koji se pokreće ako je netočan.

Ovaj se operator pokazao osobito korisnim pri donošenju odluka na temelju uvjeta i dodjeljivanju različitih vrijednosti u skladu s tim.

Razmotrite sljedeći primjer:

konst dob = 20;
konst ageType = dob >= 18? "Odrasla osoba": "Dijete";
konzola.log (ageType); // Izlaz: "Odrasla osoba"

Ovaj primjer koristi ternarni operator za provjeru je li varijabla

dob je veći ili jednak 18. Ako jest, kod dodjeljuje vrijednost Odrasla osoba na varijablu ageType, inače dodjeljuje vrijednost "Dijete".

2. Literali predloška

Literali predloška nude moćan i učinkovit način formatiranje JavaScript nizova i uključivanje varijabli ili izraza unutar njih. Za razliku od tradicionalnog ulančavanja nizova pomoću jednostrukih ili dvostrukih navodnika, literali predloška koriste povratne kvačice (`).

Ova jedinstvena sintaksa pruža nekoliko prednosti pri radu s nizovima. Razmotrite sljedeći primjer koji pokazuje upotrebu literala predloška:

konst ime = "Alice";
konst pozdrav = `Zdravo, ${name}!`;
konzola.log (pozdrav); // Izlaz: "Zdravo, Alice!"

Primjer uključuje Ime varijabla u literalu predloška pomoću ${}. To vam omogućuje jednostavno konstruiranje dinamičkih nizova.

3. Nullish Coalescing operator

Nulti operator spajanja (??) pruža prikladan način za dodjeljivanje zadanih vrijednosti kada je varijabla ili ništavan ili nedefiniran. Vraća operand s desne strane ako je operand s lijeve strane ništavan ili nedefiniran.

Razmotrite sljedeći primjer:

konst korisničko ime = ništavan;
konst displayName = korisničko ime?? "Gost";
konzola.log (prikazno ime); // Izlaz: "Gost"

U ovom primjeru, budući da varijabla Korisničko ime je ništavan, nulti operator spajanja dodjeljuje zadanu vrijednost Gost na varijablu displayName.

4. Procjena kratkog spoja

Procjena kratkog spoja omogućuje pisanje sažetih uvjetnih izraza pomoću logičkih operatora kao što je && i ||. Iskorištava činjenicu da će logički operator prestati vrednovati izraze čim može odrediti rezultat.

Razmotrite sljedeći primjer:

konst ime = "Ivan";
konst pozdrav = ime && `Zdravo, ${name}`;
konzola.log (pozdrav); // Izlaz: "Zdravo, John"

Ovaj primjer će samo procijeniti izraz `Zdravo, ${name}` ako je varijabla Ime ima istinitu vrijednost. U protivnom dolazi do kratkog spoja i dodjeljuje vrijednost Ime sebe na varijablu pozdrav.

5. Stenografija dodjele svojstava objekta

Kada stvarate objekte, imate opciju korištenja stenografskog zapisa koji varijablama dodjeljuje kao svojstva s istim imenom.

Ova skraćena notacija eliminira potrebu za suvišnim navođenjem imena svojstva i naziva varijable, što rezultira čišćim i konciznijim kodom.

Razmotrite sljedeći primjer:

konst ime = "Ivan";
konst prezime = "srna";
konst osoba = { ime, prezime };
konzola.log (osoba); // Izlaz: { firstName: "John", lastName: "Doe" }

Ovaj primjer dodjeljuje svojstva ime i prezime koristeći stenografski zapis.

6. Izborno ulančavanje

Izborno ulančavanje (?.) omogućuje vam pristup ugniježđenim svojstvima objekta bez brige o srednjim null ili nedefiniranim vrijednostima. Ako je svojstvo u lancu nula ili nedefinirano, izraz kratko spaja i vraća nedefinirano.

Razmotrite sljedeći primjer:

konst korisnik = { Ime: "Alice", adresa: { Grad: "New York", zemlja: "SAD" }};
konst država = korisnička.adresa?.država;
konzola.log (zemlja); // Izlaz: "SAD"

U gornjem primjeru, izborni operator ulančavanja osigurava da kod ne izbaci pogrešku ako adresa imovine ili zemlja imovina nedostaje.

7. Destrukturiranje objekta

Destrukturiranje objekta je moćna značajka u JavaScriptu i TypeScriptu koja vam omogućuje izdvajanje svojstava iz objekata i njihovo dodjeljivanje varijablama pomoću sažete sintakse.

Ovaj pristup pojednostavljuje proces pristupa i manipuliranja svojstvima objekta. Pogledajmo pobliže kako funkcionira destrukturiranje objekta na primjeru:

konst korisnik = { Ime: "Ivan", dob: 30 };
konst { ime, dob } = korisnik;
konzola.log (ime, dob); // Izlaz: "Ivan" 30

Ovaj primjer izdvaja varijable Ime i dob od korisnik objekta putem destrukturiranja objekta.

8. Operator širenja

Operator širenja (...) omogućuje vam da proširite elemente iterable, poput polja ili objekta, u pojedinačne elemente. Korisno je za kombiniranje nizova ili stvaranje njihovih plitkih kopija.

Razmotrite sljedeći primjer:

konst brojevi = [1, 2, 3];
konst noviBrojevi = [...brojevi, 4, 5];
konzola.log (noviBrojevi); // Izlaz: [1, 2, 3, 4, 5]

U gornjem primjeru, operator širenja proširuje brojevima niz u pojedinačne elemente, koji se zatim kombiniraju s 4 i 5 za stvaranje novog niza, noviBrojevi.

9. Stenografija petlje objekata

Kada ponavljate preko objekata, možete koristiti za...u petlja u kombinaciji s destrukturiranjem objekta za praktično ponavljanje svojstava objekta.

Razmotrite ovaj primjer:

konst korisnik = { Ime: "Ivan", dob: 30 };
za (konst [ključ, vrijednost] odObjekt.entries (korisnik)) { 
konzola.log(`${ključ}: ${value}`);
}
// Izlaz:
// ime: John
// dob: 30

U gornjem primjeru, Object.entries (korisnik) vraća niz parova ključ-vrijednost, koje svaka iteracija zatim destrukturira u varijable ključ i vrijednost.

10. Array.indexOf Shorthand korištenje bitwise operatora

Pozive možete zamijeniti na Array.indexOf metoda sa skraćenicom koja koristi bitni operator ~ za provjeru postoji li element u nizu. Stenografija vraća indeks elementa ako je pronađen ili -1 ako se ne nađe.

Razmotrite sljedeći primjer:

konst brojevi = [1, 2, 3];
konst indeks = ~brojevi.indexOf(2);
konzola.log (indeks); // Izlaz: -2

U gornjem primjeru, ~brojevi.indexOf (2) vraća -2 jer 2 je na indeksu 1, a bitovni operator negira indeks.

11. Prebacivanje vrijednosti na Booleov With!!

Do eksplicitno pretvoriti vrijednost Booleovu, možete koristiti operator dvostruke negacije (!!). Učinkovito pretvara istinitu vrijednost u pravi i lažnu vrijednost za lažno.

Razmotrite sljedeći primjer:

konst vrijednost1 = "Zdravo";
konst vrijednost2 = "";
konzola.log(!!vrijednost1); // Izlaz: istina
konzola.log(!!vrijednost2); // Izlaz: netočno

U gornjem primjeru, !!vrijednost1 vraća pravi jer niz zdravo je istinit, dok !!vrijednost2 vraća lažno jer je prazan niz lažan.

Učinkovitost i čitljivost otključavanja koda

Korištenjem ovih skraćenica u JavaScriptu i TypeScriptu možete poboljšati učinkovitost kodiranja i proizvesti sažetiji i čitljiviji kod. Bilo da se radi o korištenju ternarnog operatora, procjeni kratkog spoja ili iskorištavanju snage literala predložaka, ovi skraćenici pružaju vrijedne alate za učinkovito kodiranje.

Dodatno, kratak opis dodjele svojstava objekta, izborno ulančavanje i destrukturiranje objekta pojednostavljuju rad s objektima, dok operator širenja i stenografije nizova omogućuju učinkovit niz manipulacija. Savladavanje ovih skraćenica učinit će vas produktivnijim i učinkovitijim programerom za JavaScript i TypeScript.