11 Must-Know JavaScript en TypeScript Shorthands voor efficiënte codering

JavaScript en TypeScript zijn zeer populaire programmeertalen op het gebied van webontwikkeling. Ze hebben allebei uitgebreide functiesets en veel syntaxissnelkoppelingen die aanzienlijk bijdragen aan het verbeteren van de coderingsefficiëntie.

Leer hoe u uw code kunt aanscherpen en het meeste uit deze talen kunt halen met enkele handige snelkoppelingen.

1. Ternaire operator

De ternaire operator biedt een beknopte en efficiënte syntaxis voor het uitdrukken van voorwaardelijke verklaringen. Het bestaat uit drie delen: een voorwaarde, een uitdrukking die moet worden uitgevoerd als de voorwaarde waar is en een uitdrukking die moet worden uitgevoerd als deze onwaar is.

Deze operator is vooral handig bij het nemen van beslissingen op basis van voorwaarden en het dienovereenkomstig toekennen van verschillende waarden.

Beschouw het volgende voorbeeld:

const leeftijd = 20;
const ageType = leeftijd >= 18? "Volwassen": "Kind";
troosten.log (leeftijdstype); // Uitvoer: "Volwassene"

In dit voorbeeld wordt de ternaire operator gebruikt om te controleren of de variabele leeftijd is groter dan of gelijk aan 18. Als dit het geval is, wijst de code de waarde toe Volwassen naar de variabele leeftijdstype, anders wordt de waarde "Kind" toegewezen.

2. Letterlijke sjabloon

Sjabloonliterals bieden een krachtige en efficiënte manier van JavaScript-strings opmaken en het opnemen van variabelen of uitdrukkingen daarin. In tegenstelling tot traditionele tekenreeksaaneenschakeling met enkele of dubbele aanhalingstekens, gebruiken letterlijke sjablonen backticks (`).

Deze unieke syntaxis biedt verschillende voordelen bij het werken met strings. Bekijk het volgende voorbeeld waarin het gebruik van letterlijke sjablonen wordt gedemonstreerd:

const naam = "Alice";
const groet = 'Hallo, ${naam}!`;
troosten.log (begroeting); // Uitvoer: "Hallo, Alice!"

Het voorbeeld bevat de naam variabele in de sjabloon letterlijk met behulp van ${}. Hiermee kunt u eenvoudig dynamische strings construeren.

3. Nullish Coalescing-operator

De nullish samenvoegingsoperator (??) biedt een handige manier om standaardwaarden toe te wijzen wanneer een variabele dat ook is nul of ongedefinieerd. Het geeft de operand aan de rechterkant terug als de operand aan de linkerkant dat is nul of ongedefinieerd.

Beschouw het volgende voorbeeld:

const gebruikersnaam = nul;
const displayName = gebruikersnaam?? "Gast";
troosten.log (weergavenaam); // Uitvoer: "Gast"

In dit voorbeeld, omdat de variabele gebruikersnaam is nul, wijst de nullish samenvoegingsoperator de standaardwaarde toe Gast naar de variabele Weergavenaam.

4. Evaluatie van kortsluiting

Kortsluitevaluatie stelt u in staat beknopte voorwaardelijke uitdrukkingen te schrijven met behulp van logische operatoren zoals && En ||. Het maakt gebruik van het feit dat een logische operator stopt met het evalueren van uitdrukkingen zodra hij het resultaat kan bepalen.

Beschouw het volgende voorbeeld:

const naam = "John";
const begroeting = naam && 'Hallo, ${naam}`;
troosten.log (begroeting); // Uitvoer: "Hallo, John"

In dit voorbeeld wordt alleen de uitdrukking geëvalueerd `Hallo, ${naam}` als de variabele naam heeft waarheidswaarde. Anders maakt het kortsluiting en kent het de waarde van toe naam zelf aan de variabele groet.

5. Object Eigenschap Toewijzing Steno

Bij het maken van objecten heeft u de mogelijkheid om een ​​verkorte notatie te gebruiken die variabelen toewijst als eigenschappen met dezelfde naam.

Deze verkorte notatie elimineert de noodzaak om zowel de eigenschapsnaam als de variabelenaam redundant te vermelden, wat resulteert in schonere en beknoptere code.

Beschouw het volgende voorbeeld:

const voornaam = "John";
const achternaam = "Doe";
const persoon = { voornaam, achternaam };
troosten.log (persoon); // Uitvoer: { firstName: "John", lastName: "Doe" }

In dit voorbeeld worden de eigenschappen toegewezen Voornaam En achternaam verkorte notatie gebruiken.

6. Optioneel kettingen

Optioneel kettingen (?.) geeft u toegang tot geneste eigenschappen van een object zonder dat u zich zorgen hoeft te maken over tussenliggende null- of ongedefinieerde waarden. Als een eigenschap in de keten null of ongedefinieerd is, maakt de uitdrukking kortsluiting en retourneert ongedefinieerd.

Beschouw het volgende voorbeeld:

const gebruiker = { naam: "Alice", adres: { stad: "New York", land: "VERENIGDE STATEN VAN AMERIKA" }};
const land = gebruiker.adres?.land;
troosten.log (land); // Uitvoer: "VS"

In het bovenstaande voorbeeld zorgt de optionele chaining-operator ervoor dat de code geen fout genereert als de adres eigendom of de land eigendom ontbreekt.

7. Objectvernietiging

Objectvernietiging is een krachtige functie in JavaScript en TypeScript waarmee u eigenschappen uit objecten kunt extraheren en deze aan variabelen kunt toewijzen met behulp van een beknopte syntaxis.

Deze aanpak vereenvoudigt het proces van toegang tot en manipulatie van objecteigenschappen. Laten we eens nader bekijken hoe objectvernietiging werkt met een voorbeeld:

const gebruiker = { naam: "John", leeftijd: 30 };
const { naam, leeftijd } = gebruiker;
troosten.log (naam, leeftijd); // Uitvoer: "Jan" 30

In dit voorbeeld worden de variabelen geëxtraheerd naam En leeftijd van de gebruiker object via objectvernietiging.

8. Verspreid operator

De spread-operator (...) stelt je in staat om elementen van een iterable, zoals een array of object, uit te breiden tot individuele elementen. Het is handig voor het combineren van arrays of het maken van ondiepe kopieën ervan.

Beschouw het volgende voorbeeld:

const nummers = [1, 2, 3];
const newNumbers = [...getallen, 4, 5];
troosten.log (nieuweNummers); // Uitvoer: [1, 2, 3, 4, 5]

In het bovenstaande voorbeeld breidt de spread-operator de uit nummers array in afzonderlijke elementen, die vervolgens worden gecombineerd met 4 En 5 om een ​​nieuwe reeks te maken, nieuweNummers.

9. Object Loop Shorthand

Bij het itereren over objecten kunt u de voor in lus in combinatie met objectdestructuring om gemakkelijk objecteigenschappen te herhalen.

Overweeg dit voorbeeld:

const gebruiker = { naam: "John", leeftijd: 30 };
voor (const [sleutel waarde] vanVoorwerp.entries (gebruiker)) { 
troosten.log(`${sleutel}: ${waarde}`);
}
// Uitvoer:
// naam: Jan
// leeftijd: 30

In het bovenstaande voorbeeld Objectitems (gebruiker) retourneert een array van sleutel-waardeparen, die elke iteratie vervolgens ontleedt in de variabelen sleutel En waarde.

10. Array.indexOf Shorthand met behulp van de bitsgewijze operator

U kunt oproepen naar de vervangen Array.indexOf methode met een afkorting met behulp van de bitsgewijze operator ~ om te controleren of een element in een array bestaat. De afkorting retourneert de index van het element indien gevonden of -1 indien niet gevonden.

Beschouw het volgende voorbeeld:

const nummers = [1, 2, 3];
const index = ~nummers.indexOf(2);
troosten.log (index); // Uitvoer: -2

In het bovenstaande voorbeeld ~nummers.indexOf (2) geeft terug -2 omdat 2 staat op index 1, en de bitsgewijze operator ontkent de index.

11. Waarden casten naar Boolean With!!

Naar converteer expliciet een waarde naar een booleaanse waarde, kunt u de dubbele ontkenningsoperator gebruiken (!!). Het converteert effectief een waarheidswaarde naar WAAR en een foutieve waarde vals.

Beschouw het volgende voorbeeld:

const waarde1 = "Hallo";
const waarde2 = "";
troosten.log(!!waarde1); // Uitvoer: waar
troosten.log(!!waarde2); // Uitvoer: onwaar

In het bovenstaande voorbeeld !!waarde1 geeft terug WAAR omdat de snaar Hallo is waarheid, terwijl !!waarde2 geeft terug vals omdat de lege string vals is.

Code-efficiëntie en leesbaarheid ontgrendelen

Door deze afkortingen in JavaScript en TypeScript te gebruiken, kunt u uw coderingsefficiëntie verbeteren en beknoptere en leesbare code produceren. Of het nu gaat om het gebruik van de ternaire operator, kortsluitevaluatie of het benutten van de kracht van letterlijke sjablonen, deze afkortingen bieden waardevolle hulpmiddelen voor efficiënte codering.

Daarnaast de afkorting van de toewijzing van objecteigenschappen, optionele koppeling en objectvernietiging vereenvoudigen het werken met objecten, terwijl de spread-operator en array-steno een efficiënte array mogelijk maken manipulatie. Door deze afkortingen onder de knie te krijgen, wordt u een productievere en effectievere JavaScript- en TypeScript-ontwikkelaar.