Kiedy już czujesz się komfortowo w pisaniu podstawowych programów JavaScript, nadszedł czas, aby nauczyć się zaawansowanej składni, aby uporządkować kod i przyspieszyć kodowanie.

JavaScript i TypeScript to bardzo popularne języki programowania w dziedzinie tworzenia stron internetowych. Oba mają rozbudowane zestawy funkcji i wiele skrótów składniowych, które znacząco przyczyniają się do poprawy wydajności kodowania.

Dowiedz się, jak zawęzić kod i jak najlepiej wykorzystać te języki za pomocą przydatnych skrótów.

1. Operator trójskładnikowy

Operator trójskładnikowy oferuje zwięzłą i wydajną składnię do wyrażania instrukcji warunkowych. Składa się z trzech części: warunku, wyrażenia, które ma zostać wykonane, jeśli warunek jest prawdziwy, oraz wyrażenia, które ma zostać wykonane, jeśli jest fałszywe.

Ten operator okazuje się szczególnie przydatny przy podejmowaniu decyzji na podstawie warunków i odpowiednim przypisywaniu różnych wartości.

Rozważ następujący przykład:

konst wiek = 20;
konst typ wieku = wiek >= 18? "Dorosły": "Dziecko";
konsola.log (typ wieku); // Dane wyjściowe: „Dorosły”
instagram viewer

W tym przykładzie użyto operatora trójskładnikowego do sprawdzenia, czy zmienna wiek jest większa niż lub równa 18. Jeśli tak, kod przypisuje wartość Dorosły do zmiennej typ wieku, w przeciwnym razie przypisze wartość "Dziecko".

2. Literały szablonowe

Literały szablonowe oferują potężny i wydajny sposób formatowanie łańcuchów JavaScript i zawieranie w nich zmiennych lub wyrażeń. W przeciwieństwie do tradycyjnego łączenia łańcuchów przy użyciu pojedynczych lub podwójnych cudzysłowów, literały szablonów używają backticksów (`).

Ta unikalna składnia zapewnia kilka korzyści podczas pracy z łańcuchami. Rozważmy następujący przykład demonstrujący użycie literałów szablonowych:

konst imię = „Alicja”;
konst powitanie = `Cześć, ${nazwa}!`;
konsola.log (powitanie); // Dane wyjściowe: „Cześć, Alicja!”

Przykład obejmuje nazwa zmienna w literale szablonu using ${}. Pozwala to łatwo konstruować ciągi dynamiczne.

3. Zerowy operator koalescencyjny

Nullish operator koalescencyjny (??) zapewnia wygodny sposób przypisywania wartości domyślnych, gdy zmienna jest jedną z nich zero Lub nieokreślony. Zwraca operand po prawej stronie, jeśli operand po lewej stronie jest zero Lub nieokreślony.

Rozważ następujący przykład:

konst nazwa użytkownika = zero;
konst displayName = nazwa użytkownika?? "Gość";
konsola.log (nazwa wyświetlana); // Dane wyjściowe: „Gość”

W tym przykładzie, ponieważ zmienna nazwa użytkownika Jest zero, nullish operator łączenia przypisuje wartość domyślną Gość do zmiennej wyświetlana nazwa.

4. Ocena zwarcia

Ocena zwarcia umożliwia pisanie zwięzłych wyrażeń warunkowych przy użyciu operatorów logicznych, takich jak && I ||. Wykorzystuje fakt, że operator logiczny przestanie oceniać wyrażenia, gdy tylko będzie mógł określić wynik.

Rozważ następujący przykład:

konst imię = "Jan";
konst powitanie = imię && `Cześć, ${nazwa}`;
konsola.log (powitanie); // Dane wyjściowe: „Cześć, John”

Ten przykład obliczy tylko wyrażenie `Cześć, ${imię}` jeśli zmienna nazwa ma wartość prawdziwościową. W przeciwnym razie powoduje zwarcie i przypisuje wartość nazwa siebie do zmiennej Powitanie.

5. Skrót przypisania właściwości obiektu

Podczas tworzenia obiektów istnieje możliwość użycia skróconej notacji, która przypisuje zmienne jako właściwości o tej samej nazwie.

Ta skrócona notacja eliminuje potrzebę redundantnego podawania zarówno nazwy właściwości, jak i nazwy zmiennej, co skutkuje czystszym i bardziej zwięzłym kodem.

Rozważ następujący przykład:

konst imię = "Jan";
konst nazwisko = "Łania";
konst osoba = { imię, nazwisko };
konsola.log (osoba); // Dane wyjściowe: { imię: "John", nazwisko: "Kowalski" }

Ten przykład przypisuje właściwości imię I nazwisko stosując notację skróconą.

6. Opcjonalne łańcuchowanie

Opcjonalne łączenie łańcuchowe (?.) umożliwia dostęp do zagnieżdżonych właściwości obiektu bez martwienia się o pośrednie wartości null lub niezdefiniowane. Jeśli właściwość w łańcuchu ma wartość null lub jest niezdefiniowana, wyrażenie powoduje zwarcie i zwraca wartość niezdefiniowaną.

Rozważ następujący przykład:

konst użytkownik = { nazwa: „Alicja”, adres: { miasto: "Nowy Jork", kraj: "USA" }};
konst kraj = adres.użytkownika?.kraj;
konsola.log (kraj); // Dane wyjściowe: „USA”

W powyższym przykładzie opcjonalny operator łańcuchowy gwarantuje, że kod nie zgłosi błędu, jeśli adres nieruchomość lub kraj brakuje właściwości.

7. Destrukturyzacja obiektów

Destrukturyzacja obiektu to potężna funkcja w JavaScript i TypeScript, która umożliwia wyodrębnianie właściwości z obiektów i przypisywanie ich do zmiennych przy użyciu zwięzłej składni.

Takie podejście upraszcza proces uzyskiwania dostępu do właściwości obiektów i manipulowania nimi. Przyjrzyjmy się bliżej, jak działa destrukturyzacja obiektów na przykładzie:

konst użytkownik = { nazwa: "Jan", wiek: 30 };
konst { imię, wiek } = użytkownik;
konsola.log (imię, wiek); // Dane wyjściowe: „Jan” 30

Ten przykład wyodrębnia zmienne nazwa I wiek od użytkownik obiektu poprzez destrukturyzację obiektu.

8. Operator rozprzestrzeniania

Operator rozrzutu (...) umożliwia rozwinięcie elementów obiektu iterowalnego, takich jak tablica lub obiekt, na pojedyncze elementy. Przydaje się do łączenia tablic lub tworzenia ich płytkich kopii.

Rozważ następujący przykład:

konst liczby = [1, 2, 3];
konst noweLiczby = [...liczby, 4, 5];
konsola.log (noweLiczby); // Wyjście: [1, 2, 3, 4, 5]

W powyższym przykładzie operator spread rozwija rozszerzenie liczby tablicę na poszczególne elementy, które są następnie łączone z 4 I 5 stworzyć nową tablicę, nowośćLiczby.

9. Skrót pętli obiektowej

Podczas iteracji po obiektach możesz użyć metody dla w pętli w połączeniu z destrukturyzacją obiektów, aby wygodnie iterować po właściwościach obiektów.

Rozważ ten przykład:

konst użytkownik = { nazwa: "Jan", wiek: 30 };
Do (konst [kluczowa wartość] zObiekt.wpisy (użytkownik)) { 
konsola.dziennik(`${klucz}: ${wartość}`);
}
// Wyjście:
// imię: Jan
// wiek: 30 lat

W powyższym przykładzie Wpisy obiektów (użytkownik) zwraca tablicę par klucz-wartość, które każda iteracja rozkłada na zmienne klucz I wartość.

10. Array.indexOf Shorthand przy użyciu operatora bitowego

Możesz zastąpić połączenia do Tablica.indeksOf metoda ze skrótem przy użyciu operatora bitowego ~ aby sprawdzić, czy element istnieje w tablicy. Skrót zwraca indeks elementu, jeśli został znaleziony lub -1 jeśli nie znaleziono.

Rozważ następujący przykład:

konst liczby = [1, 2, 3];
konst indeks = ~liczby.indeksOf(2);
konsola.log (indeks); // Dane wyjściowe: -2

W powyższym przykładzie ~liczby.indeksOf (2) zwroty -2 ponieważ 2 jest na indeksie 1, a operator bitowy neguje indeks.

11. Rzutowanie wartości na wartość logiczną za pomocą!!

Do jawnie przekonwertować wartość do wartości logicznej, możesz użyć operatora podwójnej negacji (!!). Skutecznie konwertuje prawdziwą wartość na PRAWDA i fałszywą wartość do FAŁSZ.

Rozważ następujący przykład:

konst wartość1 = "Cześć";
konst wartość2 = "";
konsola.log(!!wartość1); // Dane wyjściowe: prawda
konsola.log(!!wartość2); // Dane wyjściowe: fałsz

W powyższym przykładzie !!wartość1 zwroty PRAWDA ponieważ ciąg Cześć jest zgodny z prawdą, podczas gdy !!wartość2 zwroty FAŁSZ ponieważ pusty ciąg jest fałszywy.

Odblokowywanie wydajności i czytelności kodu

Wykorzystując te skróty w JavaScript i TypeScript, możesz zwiększyć wydajność kodowania i tworzyć bardziej zwięzły i czytelny kod. Niezależnie od tego, czy chodzi o użycie operatora trójskładnikowego, ocenę zwarcia, czy wykorzystanie mocy literałów szablonowych, te skróty zapewniają cenne narzędzia do wydajnego kodowania.

Dodatkowo skrót przypisania właściwości obiektu, opcjonalne łączenie łańcuchowe i destrukturyzacja obiektów upraszczają pracę z obiektami, a operator rozprzestrzeniania i skróty tablicowe umożliwiają wydajną tablicę manipulacja. Opanowanie tych skrótów sprawi, że staniesz się bardziej produktywnym i skutecznym programistą JavaScript i TypeScript.