Ha jól érzi magát az alapvető JavaScript-programok írásában, itt az ideje, hogy megtanuljon néhány fejlett szintaxist a kód megtisztításához és a kódolás felgyorsításához.
A JavaScript és a TypeScript nagyon népszerű programozási nyelvek a webfejlesztés területén. Mindkettő kiterjedt szolgáltatáskészlettel és számos szintaktikai parancsikonnal rendelkezik, amelyek jelentősen hozzájárulnak a kódolási hatékonyság javításához.
Ismerje meg, hogyan szigoríthatja a kódot, és hogyan hozhatja ki a legtöbbet ezekből a nyelvekből néhány hasznos billentyűparancs segítségével.
1. Háromtagú operátor
A háromtagú operátor tömör és hatékony szintaxist kínál a feltételes utasítások kifejezésére. Három részből áll: egy feltételből, egy kifejezésből, amelyet futtatni kell, ha a feltétel kiértékelése igaz, és egy kifejezésből, amelyet akkor kell futtatni, ha hamis.
Ez az operátor különösen hasznosnak bizonyul, ha feltételek alapján döntünk, és ennek megfelelően különböző értékeket rendelünk hozzá.
Tekintsük a következő példát:
const kor = 20;
const ageType = életkor >= 18? "Felnőtt": "Gyermek";
konzol.log (ageType); // Kimenet: "Felnőtt"Ez a példa a háromtagú operátort használja a változó ellenőrzésére kor nagyobb vagy egyenlő, mint 18. Ha igen, akkor a kód hozzárendeli az értéket Felnőtt a változóhoz ageType, ellenkező esetben a „Child” értéket rendeli hozzá.
2. Sablon Literals
A sablonliterálok hatékony és hatékony módot kínálnak JavaScript karakterláncok formázása és változók vagy kifejezések beépítése bennük. A hagyományos, szimpla vagy dupla idézőjeleket használó karakterlánc-összefűzéssel ellentétben a sablonliterálok backtickeket (`).
Ez az egyedi szintaxis számos előnnyel jár a karakterláncokkal való munka során. Tekintsük a következő példát, amely bemutatja a sablonliterálok használatát:
const név = "Alice";
const üdvözlet = `Szia, ${name}!`;
konzol.log (köszönés); // Kimenet: "Hello, Alice!"A példa tartalmazza a név változó a sablonban literal using ${}. Ezzel könnyedén hozhat létre dinamikus karakterláncokat.
3. Nullish Coalescing Operator
A nulla összevonás operátora (??) kényelmes módot biztosít az alapértelmezett értékek hozzárendelésére, ha a változó valamelyik nulla vagy határozatlan. A jobb oldali operandust adja vissza, ha a bal oldali operandus nulla vagy határozatlan.
Tekintsük a következő példát:
const felhasználónév = nulla;
const displayName = felhasználónév?? "Vendég";
konzol.log (megjelenítési név); // Kimenet: "Vendég"Ebben a példában mivel a változó felhasználónév van nulla, a nullish koalescing operátor hozzárendeli az alapértelmezett értéket Vendég a változóhoz megjelenítendő név.
4. Rövidzárlati értékelés
A rövidzárlati kiértékelés lehetővé teszi tömör feltételes kifejezések írását logikai operátorok segítségével, mint pl && és ||. Kihasználja azt a tényt, hogy egy logikai operátor leállítja a kifejezések kiértékelését, amint meg tudja határozni az eredményt.
Tekintsük a következő példát:
const név = "János";
const üdvözlet = név && `Szia, ${name}`;
konzol.log (köszönés); // Kimenet: "Hello, John"Ez a példa csak a kifejezést értékeli `Helló, ${name}` ha a változó név igaz értéke van. Ellenkező esetben rövidre zárja és hozzárendeli az értékét név magát a változóhoz üdvözlet.
5. Objektumtulajdonság-hozzárendelési gyorsírás
Objektumok létrehozásakor lehetőség van olyan gyorsított jelölés használatára, amely a változókat azonos nevű tulajdonságként rendeli hozzá.
Ez a rövidített jelölés szükségtelenné teszi mind a tulajdonságnév, mind a változónév redundáns megadását, ami tisztább és tömörebb kódot eredményez.
Tekintsük a következő példát:
const keresztnév = "János";
const vezetéknév = "Dámvadtehén";
const személy = { keresztnév, vezetéknév };
konzol.log (személy); // Kimenet: { keresztnév: "John", lastName: "Doe" }Ez a példa hozzárendeli a tulajdonságokat keresztnév és vezetéknév gyorsírással.
6. Opcionális láncolás
Opcionális láncolás (?.) lehetővé teszi egy objektum beágyazott tulajdonságainak elérését anélkül, hogy aggódnia kellene a köztes nulla vagy meghatározatlan értékek miatt. Ha a láncban egy tulajdonság nulla vagy definiálatlan, a kifejezés rövidre zár, és definiálatlanul tér vissza.
Tekintsük a következő példát:
const felhasználó = { név: "Alice", cím: { város: "New York", ország: "EGYESÜLT ÁLLAMOK" }};
const ország = user.address?.country;
konzol.log (ország); // Kimenet: "USA"A fenti példában az opcionális láncolási operátor biztosítja, hogy a kód ne adjon hibát, ha a cím ingatlan vagy a ország ingatlan hiányzik.
7. Objektum megsemmisítése
Objektum destrukció a JavaScript és a TypeScript egy hatékony funkciója, amely lehetővé teszi az objektumok tulajdonságainak kinyerését, és azok változókhoz rendelését tömör szintaxis segítségével.
Ez a megközelítés leegyszerűsíti az objektumtulajdonságok elérésének és kezelésének folyamatát. Nézzük meg közelebbről egy példán keresztül, hogyan működik az objektum-megsemmisítés:
const felhasználó = { név: "János", kor: 30 };
const { név, életkor } = felhasználó;
konzol.log (név, életkor); // Kimenet: "János" 30Ez a példa kivonja a változókat név és kor tól felhasználó objektum objektum-destrukción keresztül.
8. Spread Operator
A spread operátor (...) lehetővé teszi egy iterálható elem elemeinek, például tömböknek vagy objektumoknak a kibontását egyedi elemekké. Hasznos lehet tömbök kombinálásához vagy sekély másolatok készítéséhez.
Tekintsük a következő példát:
const számok = [1, 2, 3];
const newNumbers = [...számok, 4, 5];
konzol.log (újSzámok); // Kimenet: [1, 2, 3, 4, 5]A fenti példában a spread operátor kibontja a számok tömböt egyes elemekre, amelyeket azután kombinálunk 4 és 5 új tömb létrehozásához, new Numbers.
9. Objektumhurok gyorsírás
Ha objektumok felett iterál, használhatja a be hurok az objektum-destrukcióval kombinálva, hogy kényelmesen iteráljon az objektum tulajdonságain.
Tekintsük ezt a példát:
const felhasználó = { név: "János", kor: 30 };számára (const [kulcs érték] nak,-nekTárgy.entries (felhasználó)) {
konzol.log(`${key}: ${value}`);
}
// Kimenet:
// név: János
// életkor: 30
A fenti példában Object.entries (felhasználó) kulcs-érték párok tömbjét adja vissza, amelyet minden iteráció a változókká bont kulcs és érték.
10. Array.indexOf Shorthand a bitenkénti operátor használatával
Lecserélheti a hívásokat a Array.indexOf metódust bitenkénti operátort használó gyorsírással ~ annak ellenőrzésére, hogy egy elem létezik-e egy tömbben. A gyorsírás az elem indexét adja vissza, ha megtalálható vagy -1 ha nem találják.
Tekintsük a következő példát:
const számok = [1, 2, 3];
const index = ~számok.indexOf(2);
konzol.log (index); // Kimenet: -2A fenti példában ~számok.indexOf (2) visszatér -2 mert 2 indexen van 1, és a bitenkénti operátor tagadja az indexet.
11. Értékek átadása logikai értékre!!
Nak nek explicit módon konvertálni egy értéket logikai értékhez használhatja a dupla negációs operátort (!!). Hatékonyan átalakítja az igaz értéket igaz és hamis értéket hamis.
Tekintsük a következő példát:
const érték1 = "Helló";
const érték2 = "";
konzol.log(!!érték1); // Kimenet: igaz
konzol.log(!!érték2); // Kimenet: falseA fenti példában !!érték1 visszatér igaz mert a húr Helló igaz, míg !!érték2 visszatér hamis mert az üres karakterlánc hamis.
A kódfeloldás hatékonysága és olvashatósága
A JavaScript és a TypeScript gyorsírásainak használatával javíthatja kódolási hatékonyságát, és tömörebb és olvashatóbb kódot állíthat elő. Legyen szó a hármas operátorról, a rövidzárlat-kiértékelésről vagy a sablonliterálok erejének kihasználásáról, ezek a rövidítések értékes eszközöket biztosítanak a hatékony kódoláshoz.
Ezenkívül az objektumtulajdonság-hozzárendelés gyorsírása, opcionális láncolás és objektum-megsemmisítés leegyszerűsíti az objektumokkal való munkát, míg a spread operátor és a tömbgyorsítások hatékony tömböt tesznek lehetővé manipuláció. E gyorsírások elsajátításával produktívabb és hatékonyabb JavaScript- és TypeScript-fejlesztő lesz.
