11 kratkih besedil JavaScript in TypeScript, ki jih morate poznati za učinkovito kodiranje

JavaScript in TypeScript sta zelo priljubljena programska jezika na področju spletnega razvoja. Oba imata obsežen nabor funkcij in številne sintaksne bližnjice, ki bistveno prispevajo k izboljšanju učinkovitosti kodiranja.

Naučite se poostriti svojo kodo in kar najbolje izkoristiti te jezike z nekaj uporabnimi bližnjicami.

1. Ternarni operater

Ternarni operator ponuja jedrnato in učinkovito sintakso za izražanje pogojnih stavkov. Ima tri dele: pogoj, izraz, ki se izvede, če je pogoj ovrednoten kot resničen, in izraz, ki se izvede, če je napačen.

Ta operater se izkaže za posebej uporabnega pri sprejemanju odločitev na podlagi pogojev in ustreznem dodeljevanju različnih vrednosti.

Razmislite o naslednjem primeru:

konst starost = 20;
konst ageType = starost >= 18? "Odrasli": "otrok";
konzola.log (ageType); // Izhod: "Odrasel"

Ta primer uporablja ternarni operator za preverjanje, ali spremenljivka

starost je večje ali enako 18. Če je, koda dodeli vrednost Odrasel na spremenljivko ageType, sicer dodeli vrednost "Otrok".

2. Literali predloge

Dobesedni predlogi ponujajo močan in učinkovit način oblikovanje nizov JavaScript in vključevanje spremenljivk ali izrazov znotraj njih. Za razliko od tradicionalnega veriženja nizov z uporabo enojnih ali dvojnih narekovajev, literali predloge uporabljajo povratne kljukice (`).

Ta edinstvena sintaksa nudi številne prednosti pri delu z nizi. Oglejte si naslednji primer, ki prikazuje uporabo literalov predloge:

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

Primer vključuje ime spremenljivka v literalu predloge z uporabo ${}. To vam omogoča enostavno sestavljanje dinamičnih nizov.

3. Nullish Coalescing Operator

Ničelni operator združevanja (??) nudi priročen način za dodeljevanje privzetih vrednosti, ko je spremenljivka bodisi nič oz nedoločeno. Vrne operand na desni strani, če je operand na levi strani nič oz nedoločeno.

Razmislite o naslednjem primeru:

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

V tem primeru, saj je spremenljivka uporabniško ime je ničničelni povezovalni operator dodeli privzeto vrednost Gost na spremenljivko prikazno ime.

4. Vrednotenje kratkega stika

Vrednotenje kratkega stika vam omogoča pisanje jedrnatih pogojnih izrazov z uporabo logičnih operatorjev, kot je npr && in ||. Izkorišča dejstvo, da bo logični operator prenehal ocenjevati izraze takoj, ko lahko določi rezultat.

Razmislite o naslednjem primeru:

konst ime = "Janez";
konst pozdrav = ime && `Pozdravljeni, ${name}`;
konzola.log (pozdrav); // Izhod: "Pozdravljen, John"

Ta primer bo ovrednotil samo izraz `Pozdravljeni, ${name}` če je spremenljivka ime ima resnično vrednost. V nasprotnem primeru pride do kratkega stika in dodeli vrednost ime sam na spremenljivko pozdrav.

5. Okrajšava za dodelitev lastnosti objekta

Pri ustvarjanju predmetov imate možnost uporabiti stenografski zapis, ki spremenljivkam dodeli lastnosti z enakim imenom.

Ta skrajšani zapis odpravlja potrebo po odvečnem navajanju imena lastnosti in imena spremenljivke, kar ima za posledico čistejšo in bolj jedrnato kodo.

Razmislite o naslednjem primeru:

konst Ime = "Janez";
konst priimek = "srna";
konst oseba = { ime, priimek };
konzola.log (oseba); // Izhod: { firstName: "John", lastName: "Doe" }

Ta primer dodeljuje lastnosti ime in priimek z uporabo stenografskega zapisa.

6. Izbirno veriženje

Izbirno veriženje (?.) vam omogoča dostop do ugnezdenih lastnosti predmeta brez skrbi za vmesne ničelne ali nedefinirane vrednosti. Če je lastnost v verigi ničelna ali nedefinirana, pride do kratkega stika v izrazu in vrne nedefinirano.

Razmislite o naslednjem primeru:

konst uporabnik = { ime: "Alice", naslov: { mesto: "New York", država: "ZDA" }};
konst država = uporabniški.naslov?.država;
konzola.log (država); // Izhod: "ZDA"

V zgornjem primeru izbirni operator veriženja zagotavlja, da koda ne vrže napake, če je naslov premoženje ali država nepremičnina manjka.

7. Uničenje objekta

Uničenje objekta je zmogljiva funkcija v JavaScriptu in TypeScriptu, ki vam omogoča ekstrahiranje lastnosti iz predmetov in njihovo dodelitev spremenljivkam z jedrnato sintakso.

Ta pristop poenostavi postopek dostopanja do lastnosti objekta in upravljanja z njim. Oglejmo si podrobneje, kako deluje destrukturiranje objektov na primeru:

konst uporabnik = { ime: "Janez", starost: 30 };
konst { ime, starost } = uporabnik;
konzola.log (ime, starost); // Izhod: "Janez" 30

Ta primer ekstrahira spremenljivke ime in starost Iz uporabnik objekt prek destrukturiranja objekta.

8. Operater širjenja

Operator širjenja (...) omogoča razširitev elementov iterable, kot je niz ali objekt, v posamezne elemente. Uporaben je za kombiniranje nizov ali ustvarjanje njihovih plitvih kopij.

Razmislite o naslednjem primeru:

konst številke = [1, 2, 3];
konst noveŠtevilke = [...številke, 4, 5];
konzola.log (nove številke); // Izhod: [1, 2, 3, 4, 5]

V zgornjem primeru operator razširjanja razširi številke niz na posamezne elemente, ki jih nato kombiniramo z 4 in 5 ustvariti novo matriko, nove številke.

9. Stenografija predmetne zanke

Ko ponavljate predmete, lahko uporabite za...v zanke v kombinaciji z destrukturiranjem objekta za priročno ponavljanje lastnosti objekta.

Razmislite o tem primeru:

konst uporabnik = { ime: "Janez", starost: 30 };
za (konst [ključ, vrednost] odObjekt.entries (uporabnik)) { 
konzola.log(`${ključ}: ${value}`);
}
// Izhod:
// ime: Janez
// starost: 30

V zgornjem primeru Object.entries (uporabnik) vrne matriko parov ključ-vrednost, ki jih vsaka ponovitev nato razgradi v spremenljivke ključ in vrednost.

10. Array.indexOf Shorthand z uporabo bitnega operatorja

Klice lahko zamenjate na Array.indexOf metoda s kratico z bitnim operatorjem ~ da preverite, ali element obstaja v matriki. Stenografija vrne indeks elementa, če ga najde oz -1 če ni najden.

Razmislite o naslednjem primeru:

konst številke = [1, 2, 3];
konst indeks = ~števila.indexOf(2);
konzola.log (indeks); // Izhod: -2

V zgornjem primeru ~numbers.indexOf (2) vrača -2 Ker 2 je na indeksu 1, in bitni operator zanika indeks.

11. Pretvorba vrednosti v Boolean With!!

Za eksplicitno pretvori vrednost za logično vrednost lahko uporabite operator dvojne negacije (!!). Učinkovito pretvori resnično vrednost v prav in lažno vrednost za lažno.

Razmislite o naslednjem primeru:

konst vrednost1 = "Zdravo";
konst vrednost2 = "";
konzola.log(!!vrednost1); // Izhod: res
konzola.log(!!vrednost2); // Izhod: false

V zgornjem primeru !!vrednost1 vrača prav ker niz zdravo je resnica, medtem ko !!vrednost2 vrača lažno ker je prazen niz lažen.

Učinkovitost in berljivost kode za odklepanje

Z uporabo teh okrajšav v JavaScriptu in TypeScriptu lahko povečate učinkovitost kodiranja in ustvarite bolj jedrnato in berljivo kodo. Ne glede na to, ali gre za uporabo ternarnega operaterja, vrednotenje kratkega stika ali izkoriščanje moči literalov predloge, ti skrajšani zapisi zagotavljajo dragocena orodja za učinkovito kodiranje.

Poleg tega kratek opis dodelitve lastnosti objekta, neobvezno veriženje in destrukturiranje objekta poenostavijo delo s predmeti, medtem ko operator za širjenje in okrajšave matrike omogočajo učinkovito matriko manipulacija. Če boste obvladali te kratice, boste bolj produktivni in učinkoviti razvijalci JavaScript in TypeScript.