Kun olet tyytyväinen JavaScript-perusohjelmien kirjoittamiseen, on aika opetella edistynyt syntaksi koodin puhdistamiseksi ja koodauksen nopeuttamiseksi.

JavaScript ja TypeScript ovat erittäin suosittuja ohjelmointikieliä verkkokehityksen alalla. Molemmilla on laajat ominaisuusjoukot ja monet syntaksin pikakuvakkeet, jotka parantavat merkittävästi koodaustehokkuutta.

Opi tiukentamaan koodia ja hyödyntämään näitä kieliä hyödyllisillä pikanäppäimillä.

1. Kolmiosainen operaattori

Kolmiosainen operaattori tarjoaa tiiviin ja tehokkaan syntaksin ehdollisten lauseiden ilmaisemiseen. Siinä on kolme osaa: ehto, suoritettava lauseke, jos ehto on tosi, ja lauseke, joka suoritetaan, jos se on epätosi.

Tämä operaattori osoittautuu erityisen hyödylliseksi tehtäessä ehtoihin perustuvia päätöksiä ja määritettäessä eri arvoja niiden mukaisesti.

Harkitse seuraavaa esimerkkiä:

konst ikä = 20;
konst ikätyyppi = ikä >= 18? "Aikuinen": "Lapsi";
konsoli.log (ageType); // Tulos: "Aikuinen"

Tämä esimerkki käyttää kolmiosaista operaattoria tarkistaakseen, onko muuttuja

instagram viewer
ikä on suurempi tai yhtä suuri kuin 18. Jos on, koodi määrittää arvon Aikuinen muuttujaan ikätyyppi, muuten se antaa arvon "Lapsi".

2. Mallin kirjaimet

Malliliteraalit tarjoavat tehokkaan ja tehokkaan tavan JavaScript-merkkijonojen muotoilu ja sisällyttämällä niihin muuttujia tai lausekkeita. Toisin kuin perinteinen merkkijonojen yhdistäminen kerta- tai lainausmerkeillä, mallin literaalit käyttävät backticks (`).

Tämä ainutlaatuinen syntaksi tarjoaa useita etuja, kun työskentelet merkkijonojen kanssa. Harkitse seuraavaa esimerkkiä, joka havainnollistaa malliliteraalien käyttöä:

konst nimi = "Liisa";
konst tervehdys = `Hei, ${name}!`;
konsoli.log (tervehdys); // Tulos: "Hei, Alice!"

Esimerkki sisältää nimi muuttuja mallin literal using ${}. Näin voit helposti rakentaa dynaamisia merkkijonoja.

3. Nullh Coalescing Operator

Tyhjä yhdistämisoperaattori (??) tarjoaa kätevän tavan määrittää oletusarvot, kun muuttuja on jompikumpi tyhjä tai määrittelemätön. Se palauttaa oikeanpuoleisen operandin, jos vasemman puolen operandi on tyhjä tai määrittelemätön.

Harkitse seuraavaa esimerkkiä:

konst käyttäjätunnus = tyhjä;
konst displayName = käyttäjätunnus?? "Vieras";
konsoli.log (näyttönimi); // Lähtö: "Vieras"

Tässä esimerkissä, koska muuttuja käyttäjätunnus On tyhjä, nullish coalescing -operaattori määrittää oletusarvon Vieras muuttujaan näyttönimi.

4. Oikosulkuarviointi

Oikosulkuarvioinnin avulla voit kirjoittaa tiiviitä ehdollisia lausekkeita käyttämällä loogisia operaattoreita, kuten && ja ||. Se hyödyntää sitä tosiasiaa, että looginen operaattori lopettaa lausekkeiden arvioinnin heti, kun se voi määrittää tuloksen.

Harkitse seuraavaa esimerkkiä:

konst nimi = "John";
konst tervehdys = nimi && `Hei, ${name}`;
konsoli.log (tervehdys); // Tulos: "Hei, John"

Tämä esimerkki arvioi vain lausekkeen `Hei, ${name}` jos muuttuja nimi on todellinen arvo. Muussa tapauksessa se oikosulkee ja määrittää arvon nimi itsensä muuttujaan tervehdys.

5. Object Property Assignment Shorthand

Kun luot objekteja, sinulla on mahdollisuus käyttää lyhennettyä merkintää, joka määrittää muuttujat samannimisiksi ominaisuuksiksi.

Tämä lyhennetty merkintätapa eliminoi tarpeen ilmaista sekä ominaisuuden nimeä että muuttujan nimeä, jolloin koodi on selkeämpi ja tiiviimpi.

Harkitse seuraavaa esimerkkiä:

konst etunimi = "John";
konst sukunimi = "Doe";
konst henkilö = { etunimi, sukunimi };
konsoli.log (henkilö); // Tulos: { etunimi: "John", sukunimi: "Doe" }

Tämä esimerkki määrittää ominaisuudet etunimi ja sukunimi käyttämällä lyhennettä.

6. Valinnainen ketjutus

Valinnainen ketjutus (?.) antaa sinun käyttää objektin sisäkkäisiä ominaisuuksia murehtimatta välissä olevista nolla- tai määrittelemättömistä arvoista. Jos ketjun ominaisuus on nolla tai määrittelemätön, lauseke oikosulkee ja palauttaa määrittelemättömän.

Harkitse seuraavaa esimerkkiä:

konst käyttäjä = { nimi: "Liisa", osoite: { kaupunki: "New York", maa: "USA" }};
konst maa = käyttäjä.osoite?.maa;
konsoli.log (maa); // Tulos: "USA"

Yllä olevassa esimerkissä valinnainen ketjutusoperaattori varmistaa, että koodi ei aiheuta virhettä, jos osoite omaisuutta tai maa omaisuus puuttuu.

7. Objektin tuhoaminen

Objektin tuhoaminen on JavaScriptin ja TypeScriptin tehokas ominaisuus, jonka avulla voit poimia objekteista ominaisuuksia ja määrittää ne muuttujiin käyttämällä tiivistä syntaksia.

Tämä lähestymistapa yksinkertaistaa kohteen ominaisuuksien käyttöä ja käsittelyä. Katsotaanpa tarkemmin, kuinka objektien tuhoaminen toimii esimerkin avulla:

konst käyttäjä = { nimi: "John", ikä: 30 };
konst { nimi, ikä } = käyttäjä;
konsoli.log (nimi, ikä); // Tulos: "John" 30

Tämä esimerkki poimii muuttujat nimi ja ikä alkaen käyttäjä objekti kohteen tuhoamisen kautta.

8. Levitä Operaattori

Hajautusoperaattori (...) mahdollistaa iteroitavan elementtien, kuten taulukon tai objektin, laajentamisen yksittäisiksi elementeiksi. Se on hyödyllinen taulukoiden yhdistämiseen tai matalien kopioiden luomiseen niistä.

Harkitse seuraavaa esimerkkiä:

konst numerot = [1, 2, 3];
konst newNumbers = [...numerot, 4, 5];
konsoli.log (newNumbers); // Tulostus: [1, 2, 3, 4, 5]

Yllä olevassa esimerkissä leviämisoperaattori laajentaa numeroita matriisi yksittäisiksi elementeiksi, jotka sitten yhdistetään 4 ja 5 luodaksesi uuden taulukon, uudet numerot.

9. Object Loop Shorthand

Kun iteroitat objektien yli, voit käyttää varten...in silmukka yhdessä objektien rakenteen muuttamisen kanssa, jotta voit kätevästi iteroida kohteen ominaisuuksien yli.

Harkitse tätä esimerkkiä:

konst käyttäjä = { nimi: "John", ikä: 30 };
varten (konst [avain, arvo] /Esine.entries (käyttäjä)) { 
konsoli.Hirsi(`${key}: ${value}`);
}
// Lähtö:
// nimi: John
// ikä: 30

Yllä olevassa esimerkissä Object.entries (käyttäjä) palauttaa joukon avainarvopareja, jotka jokainen iteraatio sitten hajottaa muuttujiksi avain ja arvo.

10. Array.indexOf Shorthand Bitwise-operaattorilla

Voit korvata puhelut numeroon Array.indexOf menetelmä lyhennyksellä käyttäen bittikohtaista operaattoria ~ tarkistaaksesi, onko taulukossa elementtiä. Pikasana palauttaa elementin indeksin, jos se löytyy tai -1 jos ei löydy.

Harkitse seuraavaa esimerkkiä:

konst numerot = [1, 2, 3];
konst index = ~numerot.indexOf(2);
konsoli.log (indeksi); // Tulos: -2

Yllä olevassa esimerkissä ~numbers.indexOf (2) palaa -2 koska 2 on indeksissä 1, ja bittikohtainen operaattori kumoaa indeksin.

11. Casting arvot Boolen kanssa!!

Vastaanottaja muuntaa arvon nimenomaisesti boolen arvoksi voit käyttää kaksoisnegatiooperaattoria (!!). Se muuntaa tehokkaasti totuudenmukaisen arvon totta ja väärä arvo väärä.

Harkitse seuraavaa esimerkkiä:

konst arvo1 = "Hei";
konst arvo2 = "";
konsoli.log(!!arvo1); // Tulos: tosi
konsoli.log(!!arvo2); // Tulos: false

Yllä olevassa esimerkissä !!arvo1 palaa totta koska merkkijono Hei on totta, vaikka !!arvo2 palaa väärä koska tyhjä merkkijono on väärä.

Koodin lukituksen tehokkuus ja luettavuus

Käyttämällä näitä JavaScriptin ja TypeScriptin lyhenteitä voit parantaa koodaustehokkuutta ja tuottaa tiiviimpää ja luettavampaa koodia. Olipa kyseessä kolmiosaisen operaattorin käyttäminen, oikosulkuarviointi tai malliliteraalien tehon hyödyntäminen, nämä lyhenteet tarjoavat arvokkaita työkaluja tehokkaaseen koodaukseen.

Lisäksi objektin ominaisuusmäärityksen pikakirjoitus, valinnainen ketjutus ja objektien rakenteen tuhoaminen yksinkertaistaa työskentelyä objektien kanssa, kun taas hajautusoperaattori ja taulukon lyhennykset mahdollistavat tehokkaan taulukon manipulointi. Näiden lyhennelmien hallitseminen tekee sinusta tuottavamman ja tehokkaamman JavaScript- ja TypeScript-kehittäjän.