11 JavaScript- og TypeScript-stenografier du må vite for effektiv koding

JavaScript og TypeScript er svært populære programmeringsspråk innen webutvikling. De har begge omfattende funksjonssett og mange syntakssnarveier som i betydelig grad bidrar til å forbedre kodingseffektiviteten.

Lær hvordan du kan stramme opp koden og få mest mulig ut av disse språkene med noen nyttige snarveier.

1. Ternær operatør

Den ternære operatoren tilbyr en kortfattet og effektiv syntaks for å uttrykke betingede utsagn. Den har tre deler: en betingelse, et uttrykk som skal kjøres hvis betingelsen evalueres til sann, og et uttrykk som skal kjøres hvis den er usann.

Denne operatøren viser seg spesielt nyttig når du tar beslutninger basert på forhold og tildeler forskjellige verdier deretter.

Tenk på følgende eksempel:

konst alder = 20;
konst ageType = alder >= 18? "Voksen": "Barn";
konsoll.log (alderstype); // Utgang: "Voksen"

Dette eksemplet bruker den ternære operatoren for å sjekke om variabelen alder er større enn eller lik 18. Hvis det er det, tildeler koden verdien Voksen til variabelen alderstype, ellers tildeler den verdien "Child".

2. Malbokstaver

Malbokstaver tilbyr en kraftig og effektiv måte å formatering av JavaScript-strenger og inkludere variabler eller uttrykk i dem. I motsetning til tradisjonell strengsammenkobling ved bruk av enkle eller doble anførselstegn, bruker bokstaver i maler backticks (`).

Denne unike syntaksen gir flere fordeler når du arbeider med strenger. Tenk på følgende eksempel som demonstrerer bruken av malbokstaver:

konst navn = "Alice";
konst hilsen = `Hei, ${name}!`;
konsoll.log (hilsen); // Utgang: "Hei, Alice!"

Eksemplet inkluderer Navn variabel i malen bokstavelig ved hjelp av ${}. Dette lar deg enkelt konstruere dynamiske strenger.

3. Nullish Coalescing Operator

Den ugyldige koalescerende operatøren (??) gir en praktisk måte å tilordne standardverdier når en variabel er enten null eller udefinert. Den returnerer operanden på høyre side hvis operanden på venstre side er det null eller udefinert.

Tenk på følgende eksempel:

konst brukernavn = null;
konst displayName = brukernavn?? "Gjest";
konsoll.log (visningsnavn); // Utdata: "Gjest"

I dette eksemplet, siden variabelen brukernavn er null, tilordner nullish coalescing-operatoren standardverdien Gjest til variabelen displayName.

4. Kortslutningsevaluering

Kortslutningsevaluering lar deg skrive konsise betingede uttrykk ved hjelp av logiske operatorer som f.eks && og ||. Den utnytter det faktum at en logisk operator vil slutte å evaluere uttrykk så snart den kan bestemme resultatet.

Tenk på følgende eksempel:

konst navn = "John";
konst hilsen = navn && `Hei, ${name}`;
konsoll.log (hilsen); // Utgang: "Hei, John"

Dette eksemplet vil bare evaluere uttrykket `Hei, ${name}` hvis variabelen Navn har en sann verdi. Ellers kortslutter den og tildeler verdien av Navn seg til variabelen hilsen.

5. Objekt Property Assignment Shorthand

Når du oppretter objekter, har du muligheten til å bruke en stenografinotasjon som tildeler variabler som egenskaper med samme navn.

Denne stenografinotasjonen eliminerer behovet for redundant å angi både egenskapsnavnet og variabelnavnet, noe som resulterer i renere og mer konsis kode.

Tenk på følgende eksempel:

konst fornavn = "John";
konst etternavn = "Doe";
konst person = { fornavn, etternavn };
konsoll.log (person); // Utdata: { fornavn: "John", etternavn: "Doe" }

Dette eksemplet tildeler egenskapene fornavn og etternavn bruke stenografi.

6. Valgfri kjetting

Valgfri kjetting (?.) lar deg få tilgang til nestede egenskaper til et objekt uten å bekymre deg for mellomliggende null- eller udefinerte verdier. Hvis en egenskap i kjeden er null eller udefinert, kortslutter uttrykket og returnerer udefinert.

Tenk på følgende eksempel:

konst bruker = { Navn: "Alice", adresse: { by: "New York", land: "USA" }};
konst land = bruker.adresse?.land;
konsoll.log (land); // Utdata: "USA"

I eksemplet ovenfor sørger den valgfrie kjedeoperatøren for at koden ikke gir en feil hvis adresse eiendom eller land eiendom mangler.

7. Objektdestrukturering

Destrukturering av objekter er en kraftig funksjon i JavaScript og TypeScript som lar deg trekke ut egenskaper fra objekter og tilordne dem til variabler ved hjelp av en kortfattet syntaks.

Denne tilnærmingen forenkler prosessen med å få tilgang til og manipulere objektegenskaper. La oss se nærmere på hvordan objektdestrukturering fungerer med et eksempel:

konst bruker = { Navn: "John", alder: 30 };
konst { navn, alder } = bruker;
konsoll.log (navn, alder); // Utgang: "John" 30

Dette eksemplet trekker ut variablene Navn og alder fra bruker objekt via objektdestrukturering.

8. Spredningsoperatør

Spredningsoperatøren (...) lar deg utvide elementer av en iterabel, som en matrise eller et objekt, til individuelle elementer. Det er nyttig for å kombinere matriser eller lage grunne kopier av dem.

Tenk på følgende eksempel:

konst tall = [1, 2, 3];
konst newNumbers = [...numbers, 4, 5];
konsoll.log (nye tall); // Utdata: [1, 2, 3, 4, 5]

I eksemplet ovenfor utvider spredningsoperatøren tall array til individuelle elementer, som deretter kombineres med 4 og 5 for å lage en ny matrise, nye tall.

9. Objektløkkestenografi

Når du itererer over objekter, kan du bruke for i loop i kombinasjon med objektdestrukturering for praktisk iterasjon over objektegenskaper.

Tenk på dette eksemplet:

konst bruker = { Navn: "John", alder: 30 };
til (konst [nøkkel, verdi] avGjenstand.entries (bruker)) { 
konsoll.Logg(`${key}: ${value}`);
}
// Utgang:
// navn: John
// alder: 30

I eksemplet ovenfor, Object.entries (bruker) returnerer en rekke nøkkelverdi-par, som hver iterasjon deretter destrukturerer til variablene nøkkel og verdi.

10. Array.indexOf Stenografi Bruke Bitwise Operator

Du kan erstatte anrop til Array.indexOf metode med en stenografi ved hjelp av den bitvise operatoren ~ for å sjekke om et element finnes i en matrise. Stenografien returnerer indeksen til elementet hvis funnet eller -1 hvis ikke funnet.

Tenk på følgende eksempel:

konst tall = [1, 2, 3];
konst indeks = ~numbers.indexOf(2);
konsoll.log (indeks); // Utgang: -2

I eksemplet ovenfor, ~numbers.indexOf (2) returnerer -2 fordi 2 er på indeks 1, og den bitvise operatoren negerer indeksen.

11. Casting verdier til boolske med!!

Til konvertere en verdi eksplisitt til en boolsk, kan du bruke den doble negasjonsoperatoren (!!). Det konverterer effektivt en sann verdi til ekte og en falsk verdi til falsk.

Tenk på følgende eksempel:

konst verdi1 = "Hallo";
konst verdi2 = "";
konsoll.log(!!verdi1); // Utdata: sant
konsoll.log(!!verdi2); // Utdata: usant

I eksemplet ovenfor, !!verdi1 returnerer ekte fordi strengen Hallo er sann, mens !!verdi2 returnerer falsk fordi den tomme strengen er falsk.

Låser opp kodeeffektivitet og lesbarhet

Ved å bruke disse forkortelsene i JavaScript og TypeScript, kan du forbedre kodingseffektiviteten og produsere mer kortfattet og lesbar kode. Enten det er å bruke den ternære operatøren, kortslutningsevaluering eller utnytte kraften til malliteraler, gir disse stenografiene verdifulle verktøy for effektiv koding.

I tillegg er objektegenskapstildelingen stenografi, valgfri kjetting og objektdestrukturering forenkle arbeidet med objekter, mens spredningsoperatøren og array-stenografien muliggjør effektiv array manipulasjon. Å mestre disse stenografiene vil gjøre deg til en mer produktiv og effektiv JavaScript- og TypeScript-utvikler.