11 JavaScript- og TypeScript-stenografier du skal kende til effektiv kodning

JavaScript og TypeScript er meget populære programmeringssprog inden for webudvikling. De har begge omfattende funktionssæt og mange syntaksgenveje, som væsentligt bidrager til at forbedre kodningseffektiviteten.

Lær, hvordan du opstrammer din kode og får mest muligt ud af disse sprog med nogle nyttige genveje.

1. Ternær operatør

Den ternære operator tilbyder en kortfattet og effektiv syntaks til at udtrykke betingede udsagn. Den har tre dele: en betingelse, et udtryk, der skal køres, hvis betingelsen evalueres til sand, og et udtryk, der skal køres, hvis den er falsk.

Denne operatør viser sig særlig nyttig, når der skal træffes beslutninger baseret på betingelser og tildele forskellige værdier i overensstemmelse hermed.

Overvej følgende eksempel:

konst alder = 20;
konst ageType = alder >= 18? "Voksen": "Barn";
konsol.log (ageType); // Output: "Voksen"

Dette eksempel bruger den ternære operator til at kontrollere, om variablen alder er større end eller lig med 18. Hvis det er det, tildeler koden værdien Voksen til variablen alderstype, ellers tildeler den værdien "Barn".

2. Skabelon bogstaver

Skabelonbogstaver tilbyder en kraftfuld og effektiv måde at formatering af JavaScript-strenge og inkorporering af variabler eller udtryk i dem. I modsætning til traditionel strengsammenkædning ved hjælp af enkelte eller dobbelte anførselstegn, bruger skabelon-literals backticks (`).

Denne unikke syntaks giver flere fordele, når du arbejder med strenge. Overvej følgende eksempel, der demonstrerer brugen af ​​skabelonbogstaver:

konst navn = "Alice";
konst hilsen = `Hej, ${name}!`;
konsol.log (hilsen); // Output: "Hej, Alice!"

Eksemplet omfatter navn variabel i skabelonen literal vha ${}. Dette lader dig nemt konstruere dynamiske strenge.

3. Nullish Coalescing Operator

Den nullish sammensmeltende operatør (??) giver en bekvem måde at tildele standardværdier, når en variabel er enten nul eller udefineret. Den returnerer operanden på højre side, hvis operanden på venstre side er det nul eller udefineret.

Overvej følgende eksempel:

konst brugernavn = nul;
konst displayName = brugernavn?? "Gæst";
konsol.log (visningsnavn); // Output: "Gæst"

I dette eksempel, da variablen brugernavn er nul, tildeler nullish-sammenlægningsoperatøren standardværdien Gæst til variablen displaynavn.

4. Kortslutningsevaluering

Kortslutningsevaluering giver dig mulighed for at skrive kortfattede betingede udtryk ved hjælp af logiske operatorer som f.eks && og ||. Det udnytter det faktum, at en logisk operator stopper med at evaluere udtryk, så snart den kan bestemme resultatet.

Overvej følgende eksempel:

konst navn = "John";
konst hilsen = navn && `Hej, ${name}`;
konsol.log (hilsen); // Output: "Hej, John"

Dette eksempel vil kun evaluere udtrykket `Hej, ${name}` hvis variablen navn har en sand værdi. Ellers kortslutter den og tildeler værdien af navn sig til variablen hilsen.

5. Objektegenskabstildeling stenografi

Når du opretter objekter, har du mulighed for at bruge en stenografi, der tildeler variabler som egenskaber med samme navn.

Denne stenografiske notation eliminerer behovet for redundant at angive både ejendomsnavnet og variabelnavnet, hvilket resulterer i en renere og mere kortfattet kode.

Overvej følgende eksempel:

konst fornavn = "John";
konst efternavn = "Då";
konst person = { fornavn, efternavn };
konsol.log (person); // Output: { fornavn: "John", efternavn: "Doe" }

Dette eksempel tildeler egenskaberne fornavn og efternavn ved hjælp af stenografi.

6. Valgfri kæde

Valgfri kæde (?.) giver dig adgang til indlejrede egenskaber for et objekt uden at bekymre dig om mellemliggende null- eller udefinerede værdier. Hvis en egenskab i kæden er nul eller udefineret, kortslutter udtrykket og returnerer udefineret.

Overvej følgende eksempel:

konst bruger = { navn: "Alice", adresse: { by: "New York", Land: "USA" }};
konst land = bruger.adresse?.land;
konsol.log (land); // Output: "USA"

I eksemplet ovenfor sikrer den valgfri kædeoperatør, at koden ikke giver en fejl, hvis adresse ejendom eller Land ejendom mangler.

7. Objektdestrukturering

Objekt destrukturering er en kraftfuld funktion i JavaScript og TypeScript, der giver dig mulighed for at udtrække egenskaber fra objekter og tildele dem til variabler ved hjælp af en kortfattet syntaks.

Denne tilgang forenkler processen med at få adgang til og manipulere objektegenskaber. Lad os se nærmere på, hvordan objektdestrukturering fungerer med et eksempel:

konst bruger = { navn: "John", alder: 30 };
konst { navn, alder } = bruger;
konsol.log (navn, alder); // Output: "John" 30

Dette eksempel udtrækker variablerne navn og alder fra bruger objekt via objektdestrukturering.

8. Spredningsoperatør

Spredningsoperatøren (...) giver dig mulighed for at udvide elementer af en iterabel, som en matrix eller et objekt, til individuelle elementer. Det er nyttigt til at kombinere arrays eller skabe overfladiske kopier af dem.

Overvej følgende eksempel:

konst tal = [1, 2, 3];
konst newNumbers = [...numbers, 4, 5];
konsol.log (nye numre); // Output: [1, 2, 3, 4, 5]

I eksemplet ovenfor udvider spredningsoperatøren tal array i individuelle elementer, som derefter kombineres med 4 og 5 at oprette et nyt array, nye numre.

9. Genstandsløkke stenografi

Når du itererer over objekter, kan du bruge for... i loop i kombination med objektdestrukturering for bekvemt at gentage objektegenskaber.

Overvej dette eksempel:

konst bruger = { navn: "John", alder: 30 };
til (konst [nøgle, værdi] afObjekt.entries (bruger)) { 
konsol.log(`${key}: ${value}`);
}
// Output:
// navn: John
// alder: 30

I eksemplet ovenfor, Object.entries (bruger) returnerer en matrix af nøgleværdi-par, som hver iteration derefter destrukturerer til variablerne nøgle og værdi.

10. Array.indexOf Stenografi Brug af Bitwise Operator

Du kan erstatte opkald til Array.indexOf metode med en stenografi ved hjælp af den bitvise operator ~ for at kontrollere, om et element findes i et array. Stenografien returnerer elementets indeks, hvis den findes eller -1 hvis ikke fundet.

Overvej følgende eksempel:

konst tal = [1, 2, 3];
konst indeks = ~numbers.indexOf(2);
konsol.log (indeks); // Output: -2

I eksemplet ovenfor, ~numbers.indexOf (2) vender tilbage -2 fordi 2 er på indeks 1, og den bitvise operator negerer indekset.

11. Casting værdier til Boolean med!!

Til eksplicit konvertere en værdi til en boolsk, kan du bruge den dobbelte negationsoperator (!!). Det konverterer effektivt en sand værdi til rigtigt og en falsk værdi til falsk.

Overvej følgende eksempel:

konst værdi1 = "Hej";
konst værdi2 = "";
konsol.log(!!værdi1); // Output: sand
konsol.log(!!værdi2); // Output: falsk

I eksemplet ovenfor, !!værdi1 vender tilbage rigtigt fordi strengen Hej er sandt, mens !!værdi2 vender tilbage falsk fordi den tomme streng er falsk.

Låser op for kodeeffektivitet og læsbarhed

Ved at bruge disse stenografier i JavaScript og TypeScript kan du forbedre din kodningseffektivitet og producere mere kortfattet og læsbar kode. Uanset om det drejer sig om at bruge den ternære operatør, kortslutningsevaluering eller udnytte kraften ved skabelonliteraler, giver disse stenografier værdifulde værktøjer til effektiv kodning.

Derudover stenografi af objektegenskabstildeling, valgfri kæde og objektdestrukturering forenkle arbejdet med objekter, mens spread-operatøren og array-stenografien muliggør effektiv array manipulation. At mestre disse stenografier vil gøre dig til en mere produktiv og effektiv JavaScript- og TypeScript-udvikler.