11, ktoré musíte poznať JavaScript a TypeScript skratky pre efektívne kódovanie

JavaScript a TypeScript sú veľmi populárne programovacie jazyky v oblasti vývoja webových aplikácií. Obaja majú rozsiahle sady funkcií a mnoho syntaxových skratiek, ktoré výrazne prispievajú k zlepšeniu efektívnosti kódovania.

Naučte sa, ako sprísniť svoj kód a čo najlepšie využiť tieto jazyky pomocou niekoľkých užitočných skratiek.

1. Ternárny operátor

Ternárny operátor ponúka stručnú a efektívnu syntax na vyjadrenie podmienených príkazov. Má tri časti: podmienku, výraz, ktorý sa má spustiť, ak sa podmienka vyhodnotí ako pravdivá, a výraz, ktorý sa má spustiť, ak je nepravda.

Tento operátor je obzvlášť užitočný pri rozhodovaní na základe podmienok a priraďovaní rôznych hodnôt.

Zvážte nasledujúci príklad:

konšt vek = 20;
konšt ageType = vek >= 18? "dospelý": "dieťa";
konzoly.log (ageType); // Výstup: "Dospelý"

Tento príklad používa ternárny operátor na kontrolu premennej

Vek je väčšie alebo rovné 18. Ak je, kód priradí hodnotu Dospelý do premennej ageType, inak priradí hodnotu "Dieťa".

2. Doslovy šablóny

Šablónové literály ponúkajú výkonný a efektívny spôsob formátovanie reťazcov JavaScriptu a začlenenie premenných alebo výrazov do nich. Na rozdiel od tradičného zreťazenia reťazcov pomocou jednoduchých alebo dvojitých úvodzoviek, šablónové literály používajú spätné značky (`).

Táto jedinečná syntax poskytuje niekoľko výhod pri práci s reťazcami. Zvážte nasledujúci príklad, ktorý demonštruje použitie šablónových literálov:

konšt meno = "Alice";
konšt pozdravujem = 'Dobrý deň, ${name}!`;
konzoly.log (pozdrav); // Výstup: "Ahoj, Alice!"

Príklad zahŕňa názov premenná v doslovnom použití šablóny ${}. To vám umožní ľahko vytvárať dynamické reťazce.

3. Nullish Coalescing Operator

Operátor nulovej koalescencie (??) poskytuje pohodlný spôsob, ako priradiť predvolené hodnoty, keď je premenná buď nulový alebo nedefinované. Ak je operand na ľavej strane, vráti pravý operand nulový alebo nedefinované.

Zvážte nasledujúci príklad:

konšt užívateľské meno = nulový;
konšt displayName = užívateľské meno?? "Hosť";
konzoly.log (displayName); // Výstup: "Hosť"

V tomto príklade, keďže premenná užívateľské meno je nulovýnulový operátor koalescencie priradí predvolenú hodnotu Hosť do premennej zobraziť meno.

4. Vyhodnotenie skratu

Skratové vyhodnotenie umožňuje písať výstižné podmienené výrazy pomocou logických operátorov ako napr && a ||. Využíva skutočnosť, že logický operátor prestane vyhodnocovať výrazy hneď, ako dokáže určiť výsledok.

Zvážte nasledujúci príklad:

konšt meno = "John";
konšt pozdrav = meno && 'Dobrý deň, ${name}`;
konzoly.log (pozdrav); // Výstup: "Ahoj, John"

Tento príklad vyhodnotí iba výraz `Dobrý deň, ${name}` ak premenná názov má pravdivú hodnotu. V opačnom prípade skratuje a priradí hodnotu názov sám na premennú pozdrav.

5. Skratka priradenia vlastnosti objektu

Pri vytváraní objektov máte možnosť použiť skrátený zápis, ktorý priraďuje premenné ako vlastnosti s rovnakým názvom.

Tento skrátený zápis eliminuje potrebu redundantného uvádzania názvu vlastnosti aj názvu premennej, čo vedie k čistejšiemu a stručnejšiemu kódu.

Zvážte nasledujúci príklad:

konšt krstné meno = "John";
konšt priezvisko = "Laň";
konšt osoba = { meno, priezvisko };
konzoly.log (osoba); // Výstup: { meno: "John", priezvisko: "Doe" }

Tento príklad priraďuje vlastnosti krstné meno a priezvisko pomocou skratkového zápisu.

6. Voliteľné reťazenie

Voliteľné reťazenie (?.) umožňuje pristupovať k vnoreným vlastnostiam objektu bez obáv z medziľahlých nulových alebo nedefinovaných hodnôt. Ak je vlastnosť v reťazci nulová alebo nedefinovaná, výraz sa skratuje a vráti sa nedefinovaný.

Zvážte nasledujúci príklad:

konšt používateľ = { názov: "Alice", adresu: { mesto: "New York", krajina: "USA" }};
konšt country = user.address?.country;
konzoly.log (krajina); // Výstup: "USA"

Vo vyššie uvedenom príklade voliteľný operátor reťazenia zaisťuje, že kód nevyvolá chybu, ak je adresu majetok alebo krajina majetok chýba.

7. Deštrukcia objektov

Deštrukcia objektu je výkonná funkcia v JavaScripte a TypeScripte, ktorá vám umožňuje extrahovať vlastnosti z objektov a priraďovať ich k premenným pomocou stručnej syntaxe.

Tento prístup zjednodušuje proces prístupu a manipulácie s vlastnosťami objektu. Pozrime sa bližšie na to, ako funguje deštrukcia objektov na príklade:

konšt používateľ = { názov: "John", Vek: 30 };
konšt { meno, vek } = používateľ;
konzoly.log (meno, vek); // Výstup: "John" 30

Tento príklad extrahuje premenné názov a Vek z užívateľ objekt prostredníctvom deštrukcie objektu.

8. Operátor šírenia

Operátor nátierky (...) vám umožňuje rozšíriť prvky iterovateľnej položky, ako je pole alebo objekt, na jednotlivé prvky. Je to užitočné na kombinovanie polí alebo vytváranie ich plytkých kópií.

Zvážte nasledujúci príklad:

konšt čísla = [1, 2, 3];
konšt newNumbers = [...čísla, 4, 5];
konzoly.log (newNumbers); // Výstup: [1, 2, 3, 4, 5]

Vo vyššie uvedenom príklade operátor spread rozširuje čísla pole na jednotlivé prvky, ktoré sa potom kombinujú s 4 a 5 na vytvorenie nového poľa, nové čísla.

9. Objektová slučka Skratka

Pri iterácii cez objekty môžete použiť pre...v slučka v kombinácii s deštrukciou objektu na pohodlné iterovanie vlastností objektu.

Zvážte tento príklad:

konšt používateľ = { názov: "John", Vek: 30 };
pre (konšt [kľúč, hodnota] zObjekt.entries (používateľ)) { 
konzoly.log(`${key}: ${value}`);
}
// Výkon:
// meno: John
// vek: 30

Vo vyššie uvedenom príklade Object.entries (používateľ) vráti pole párov kľúč-hodnota, ktoré potom každá iterácia deštruktúruje na premenné kľúč a hodnotu.

10. Array.indexOf Shorthand Pomocou bitového operátora

Môžete nahradiť hovory na Array.indexOf metóda so skratkou pomocou bitového operátora ~ na kontrolu, či prvok v poli existuje. Skratka vráti index prvku, ak sa nájde resp -1 ak sa nenájde.

Zvážte nasledujúci príklad:

konšt čísla = [1, 2, 3];
konšt index = ~čísla.indexOf(2);
konzoly.log (index); // Výstup: -2

Vo vyššie uvedenom príklade ~numbers.indexOf (2) sa vracia -2 pretože 2 je na indexe 1a bitový operátor neguje index.

11. Prenášanie hodnôt na booleovskú hodnotu!!

Komu explicitne previesť hodnotu na boolovskú hodnotu, môžete použiť operátor dvojitej negácie (!!). Účinne prevádza pravdivú hodnotu na pravda a falošnú hodnotu falošný.

Zvážte nasledujúci príklad:

konšt hodnota1 = "Ahoj";
konšt hodnota2 = "";
konzoly.log(!!hodnota1); // Výstup: true
konzoly.log(!!hodnota2); // Výstup: false

Vo vyššie uvedenom príklade !!hodnota1 sa vracia pravda pretože struna Ahoj je pravda, zatiaľ čo !!hodnota2 sa vracia falošný pretože prázdny reťazec je falošný.

Odblokovanie efektívnosti a čitateľnosti kódu

Použitím týchto skratiek v JavaScripte a TypeScripte môžete zvýšiť efektivitu kódovania a vytvoriť stručnejší a čitateľnejší kód. Či už ide o použitie ternárneho operátora, vyhodnotenie skratov alebo využitie sily šablónových literálov, tieto skratky poskytujú cenné nástroje na efektívne kódovanie.

Okrem toho, skratka priradenia vlastnosti objektu, voliteľné reťazenie a deštrukcia objektu zjednodušujú prácu s objektmi, zatiaľ čo operátor spread a skratky poľa umožňujú efektívne pole manipulácia. Ovládanie týchto skratiek z vás urobí produktívnejšieho a efektívnejšieho vývojára JavaScriptu a TypeScriptu.