Když už umíte psát základní JavaScriptové programy, je čas naučit se nějakou pokročilou syntaxi, abyste si vyčistili kód a urychlili kódování.

JavaScript a TypeScript jsou velmi oblíbené programovací jazyky v oblasti vývoje webových aplikací. Oba mají rozsáhlé sady funkcí a mnoho syntaktických zkratek, které významně přispívají ke zlepšení efektivity kódování.

Naučte se, jak zpřísnit svůj kód a využít tyto jazyky na maximum pomocí několika užitečných zkratek.

1. Ternární operátor

Ternární operátor nabízí stručnou a efektivní syntaxi pro vyjádření podmíněných příkazů. Má tři části: podmínku, výraz, který se má spustit, pokud je podmínka vyhodnocena jako pravdivá, a výraz, který se má spustit, pokud je nepravda.

Tento operátor se osvědčuje zejména při rozhodování na základě podmínek a přiřazení různých hodnot.

Zvažte následující příklad:

konst věk = 20;
konst ageType = věk >= 18? "Dospělý": "Dítě";
řídicí panel.log (ageType); // Výstup: "Dospělý"

Tento příklad používá ternární operátor ke kontrole, zda je proměnná

instagram viewer
stáří je větší nebo rovno 18. Pokud ano, kód přiřadí hodnotu Dospělý do proměnné ageType, jinak přiřadí hodnotu "Dítě".

2. Doslovy šablony

Šablonové literály nabízejí výkonný a efektivní způsob formátování řetězců JavaScriptu a začleňování proměnných nebo výrazů do nich. Na rozdíl od tradičního zřetězení řetězců pomocí jednoduchých nebo dvojitých uvozovek používají literály šablony backticks (`).

Tato jedinečná syntaxe poskytuje několik výhod při práci s řetězci. Zvažte následující příklad, který ukazuje použití šablonových literálů:

konst jméno = "Alice";
konst pozdrav = 'Dobrý den, ${name}!`;
řídicí panel.log (pozdrav); // Výstup: "Ahoj, Alice!"

Příklad zahrnuje název proměnná v literálu šablony pomocí ${}. To vám umožní snadno vytvářet dynamické řetězce.

3. Nullish koalescenční operátor

Nulový koalescenční operátor (??) poskytuje pohodlný způsob, jak přiřadit výchozí hodnoty, když je proměnná buď nula nebo nedefinováno. Vrátí operand na pravé straně, pokud je operand na levé straně nula nebo nedefinováno.

Zvažte následující příklad:

konst uživatelské jméno = nula;
konst displayName = uživatelské jméno?? "Host";
řídicí panel.log (displayName); // Výstup: "Host"

V tomto příkladu, protože proměnná uživatelské jméno je nula, nulový slučovací operátor přiřadí výchozí hodnotu Host do proměnné displayName.

4. Vyhodnocení zkratu

Zkratové vyhodnocení umožňuje psát výstižné podmíněné výrazy pomocí logických operátorů jako např && a ||. Využívá toho, že logický operátor přestane vyhodnocovat výrazy, jakmile může určit výsledek.

Zvažte následující příklad:

konst jméno = "John";
konst pozdrav = jméno && 'Dobrý den, ${name}`;
řídicí panel.log (pozdrav); // Výstup: "Ahoj, Johne"

Tento příklad vyhodnotí pouze výraz `Dobrý den, ${name}` pokud proměnná název má pravdivou hodnotu. V opačném případě zkratuje a přiřadí hodnotu název sám na proměnnou Pozdrav.

5. Zkratka přiřazení vlastnosti objektu

Při vytváření objektů máte možnost použít zkrácený zápis, který přiřadí proměnné jako vlastnosti se stejným názvem.

Tento zkrácený zápis eliminuje potřebu redundantně uvádět jak název vlastnosti, tak název proměnné, což vede k čistšímu a stručnějšímu kódu.

Zvažte následující příklad:

konst jméno = "John";
konst příjmení = "Srna";
konst osoba = { jmeno, prijmeni };
řídicí panel.log (osoba); // Výstup: { firstName: "John", lastName: "Doe" }

Tento příklad přiřadí vlastnosti jméno a příjmení pomocí těsnopisného zápisu.

6. Volitelné řetězení

Volitelné řetězení (?.) umožňuje přístup k vnořeným vlastnostem objektu, aniž byste se museli starat o střední hodnoty null nebo nedefinované hodnoty. Pokud je vlastnost v řetězci nulová nebo nedefinovaná, výraz se zkratuje a vrátí nedefinovaný.

Zvažte následující příklad:

konst uživatel = { název: "Alice", adresa: { město: "New York", země: "USA" }};
konst country = user.address?.country;
řídicí panel.log (země); // Výstup: "USA"

Ve výše uvedeném příkladu volitelný operátor řetězení zajišťuje, že kód nevyvolá chybu, pokud je adresa majetek nebo země majetek chybí.

7. Destrukce objektů

Destrukce objektů je výkonná funkce v JavaScriptu a TypeScriptu, která umožňuje extrahovat vlastnosti z objektů a přiřazovat je proměnným pomocí stručné syntaxe.

Tento přístup zjednodušuje proces přístupu a manipulace s vlastnostmi objektu. Podívejme se blíže na to, jak funguje destrukce objektů na příkladu:

konst uživatel = { název: "John", stáří: 30 };
konst { jméno, věk } = uživatel;
řídicí panel.log (jméno, věk); // Výstup: "John" 30

Tento příklad extrahuje proměnné název a stáří z uživatel objekt prostřednictvím destrukce objektu.

8. Operátor šíření

Operátor šíření (...) umožňuje rozbalit prvky iterovatelného prvku, jako je pole nebo objekt, na jednotlivé prvky. Je to užitečné pro kombinování polí nebo vytváření jejich mělkých kopií.

Zvažte následující příklad:

konst čísla = [1, 2, 3];
konst newNumbers = [...čísla, 4, 5];
řídicí panel.log (newNumbers); // Výstup: [1, 2, 3, 4, 5]

Ve výše uvedeném příkladu operátor spread rozšiřuje čísla pole do jednotlivých prvků, které jsou následně kombinovány s 4 a 5 vytvořit nové pole, nová čísla.

9. Objektová smyčka těsnopis

Při iteraci přes objekty můžete použít pro...v smyčka v kombinaci s destrukcí objektu pro pohodlné opakování vlastností objektu.

Zvažte tento příklad:

konst uživatel = { název: "John", stáří: 30 };
pro (konst [klíč, hodnota] zObjekt.entries (uživatel)) { 
řídicí panel.log(`${key}: ${value}`);
}
// Výstup:
// jméno: John
// věk: 30

Ve výše uvedeném příkladu Object.entries (uživatel) vrací pole párů klíč-hodnota, které pak každá iterace destruuje na proměnné klíč a hodnota.

10. Array.indexOf Shorthand Pomocí bitového operátoru

Můžete nahradit hovory na Array.indexOf metoda se zkratkou pomocí bitového operátoru ~ zkontrolovat, zda prvek v poli existuje. Zkratka vrátí index prvku, pokud je nalezen nebo -1 pokud nebyl nalezen.

Zvažte následující příklad:

konst čísla = [1, 2, 3];
konst index = ~čísla.indexOf(2);
řídicí panel.log (index); // Výstup: -2

Ve výše uvedeném příkladu ~numbers.indexOf (2) se vrací -2 protože 2 je na indexu 1a bitový operátor neguje index.

11. Odesílání hodnot na booleovskou hodnotu!!

Na explicitně převést hodnotu na boolean, můžete použít operátor dvojité negace (!!). Účinně převádí pravdivou hodnotu na skutečný a falešnou hodnotu Nepravdivé.

Zvažte následující příklad:

konst hodnota1 = "Ahoj";
konst hodnota2 = "";
řídicí panel.log(!!hodnota1); // Výstup: true
řídicí panel.log(!!hodnota2); // Výstup: false

Ve výše uvedeném příkladu !!hodnota1 se vrací skutečný protože řetězec Ahoj je pravda, zatímco !!hodnota2 se vrací Nepravdivé protože prázdný řetězec je falešný.

Odemykání účinnosti a čitelnosti kódu

Využitím těchto zkratek v JavaScriptu a TypeScriptu můžete zvýšit efektivitu kódování a vytvořit stručnější a čitelnější kód. Ať už se jedná o použití ternárního operátoru, vyhodnocení zkratů nebo využití síly šablonových literálů, tyto zkratky poskytují cenné nástroje pro efektivní kódování.

Navíc zkrácený popis přiřazení vlastnosti objektu, volitelné řetězení a destrukce objektu zjednodušují práci s objekty, zatímco operátor spread a zkratky pole umožňují efektivní pole manipulace. Zvládnutí těchto zkratek z vás učiní produktivnější a efektivnější vývojáře JavaScriptu a TypeScriptu.