Kui tunnete end mugavalt JavaScripti põhiprogrammide kirjutamisega, on aeg õppida täpsemat süntaksit koodi puhastamiseks ja kodeerimise kiirendamiseks.
JavaScript ja TypeScript on veebiarenduses väga populaarsed programmeerimiskeeled. Neil mõlemal on ulatuslikud funktsioonikomplektid ja palju süntaksi otseteid, mis aitavad oluliselt kaasa kodeerimise tõhususe parandamisele.
Siit saate teada, kuidas koodi tihendada ja kasulike otseteede abil neid keeli maksimaalselt ära kasutada.
1. Kolmekordne operaator
Kolmikoperaator pakub tingimuslausete väljendamiseks sisutiheda ja tõhusa süntaksi. Sellel on kolm osa: tingimus, avaldis, mida käivitada, kui tingimus on hinnatud tõeseks, ja avaldis, mida käivitada, kui see on väär.
See operaator osutub eriti kasulikuks tingimustest lähtuvate otsuste tegemisel ja vastavalt erinevate väärtuste määramisel.
Kaaluge järgmist näidet:
konst vanus = 20;
konst vanuseTüüp = vanus >= 18? "Täiskasvanu": "laps";
konsool.log (vanusetüüp); // Väljund: "Täiskasvanu"See näide kasutab muutuja kontrollimiseks kolmekomponentset operaatorit
vanus on suurem või võrdne 18. Kui on, määrab kood väärtuse Täiskasvanu muutujale vanusetüüp, vastasel juhul määrab see väärtuse "Laps".2. Mall Literaalid
Mallliteraalid pakuvad võimsat ja tõhusat viisi JavaScripti stringide vormindamine ja muutujate või avaldiste kaasamine nendesse. Erinevalt traditsioonilisest stringide ühendamisest ühe- või topeltjutumärkidega kasutavad malliliteraalid tagasimärke (`).
See ainulaadne süntaks pakub stringidega töötamisel mitmeid eeliseid. Vaatleme järgmist näidet, mis demonstreerib malliliteraalide kasutamist.
konst nimi = "Alice";
konst tervitus = `Tere, ${name}!`;
konsool.log (tervitus); // Väljund: "Tere, Alice!"Näide sisaldab nimi muutuja mallis literal using ${}. See võimaldab teil hõlpsasti dünaamilisi stringe luua.
3. Nullish Coalescing Operaator
Nulliline koalesseerimisoperaator (??) pakub mugavat viisi vaikeväärtuste määramiseks, kui muutuja on kumbki null või määratlemata. Tagastab parempoolse operandi, kui vasakpoolne operandi on null või määratlemata.
Kaaluge järgmist näidet:
konst kasutajanimi = null;
konst displayName = kasutajanimi?? "Külaline";
konsool.log (kuvanimi); // Väljund: "Külaline"Selles näites, kuna muutuja kasutajanimi on null, määrab null-liitmise operaator vaikeväärtuse Külaline muutujale kuvanimi.
4. Lühise hindamine
Lühise hindamine võimaldab kirjutada sisutihedaid tingimusavaldisi kasutades loogilisi operaatoreid nagu && ja ||. See kasutab ära asjaolu, et loogiline operaator lõpetab avaldiste hindamise niipea, kui saab tulemuse kindlaks teha.
Kaaluge järgmist näidet:
konst nimi = "John";
konst tervitus = nimi && `Tere, ${name}`;
konsool.log (tervitus); // Väljund: "Tere, John"See näide hindab ainult väljendit "Tere, ${name}". kui muutuja nimi on tõene väärtus. Vastasel juhul tekitab see lühise ja määrab väärtuse nimi ise muutujale tervitus.
5. Objekti omaduste määramise stenogramm
Objektide loomisel on võimalus kasutada stenogrammi, mis määrab muutujad samanimeliste omadustena.
See stenogramm välistab vajaduse nii atribuudi nime kui ka muutuja nime üleliigseks esitamiseks, mille tulemuseks on puhtam ja ülevaatlikum kood.
Kaaluge järgmist näidet:
konst eesnimi = "John";
konst perekonnanimi = "Doe";
konst isik = {eesnimi, perekonnanimi };
konsool.log (isik); // Väljund: { eesnimi: "John", perekonnanimi: "Doe" }See näide määrab omadused eesnimi ja perekonnanimi kasutades stenogrammi.
6. Valikuline kettimine
Valikuline aheldamine (?.) võimaldab teil pääseda juurde objekti pesastatud omadustele, muretsemata vahepealsete null- või määratlemata väärtuste pärast. Kui ahela omadus on null või määratlemata, siis avaldis lühistub ja tagastab määramata.
Kaaluge järgmist näidet:
konst kasutaja = { nimi: "Alice", aadress: { linn: "New York", riik: "USA" }};
konst riik = kasutaja.aadress?.riik;
konsool.log (riik); // Väljund: "USA"Ülaltoodud näites tagab valikuline aheldamisoperaator, et kood ei tekita viga, kui aadress vara või riik vara on puudu.
7. Objekti hävitamine
Objekti hävitamine on JavaScripti ja TypeScripti võimas funktsioon, mis võimaldab teil objektidest atribuute eraldada ja need muutujatele kokkuvõtliku süntaksi abil määrata.
See lähenemisviis lihtsustab objekti omadustele juurdepääsu ja nendega manipuleerimise protsessi. Vaatame näitega lähemalt, kuidas objektide struktureerimine toimib:
konst kasutaja = { nimi: "John", vanus: 30 };
konst {nimi, vanus} = kasutaja;
konsool.log (nimi, vanus); // Väljund: "John" 30See näide eraldab muutujad nimi ja vanus alates kasutaja objekt objektide struktureerimise kaudu.
8. Spread Operaator
leviku operaator (...) võimaldab laiendada itereeritava elemente (nt massiivi või objekti) üksikuteks elementideks. See on kasulik massiivide kombineerimiseks või nende madalate koopiate loomiseks.
Kaaluge järgmist näidet:
konst numbrid = [1, 2, 3];
konst newNumbers = [...numbrid, 4, 5];
konsool.log (newNumbers); // Väljund: [1, 2, 3, 4, 5]Ülaltoodud näites laiendab leviku operaator numbrid massiivi üksikuteks elementideks, mis seejärel kombineeritakse 4 ja 5 uue massiivi loomiseks, uuedNumbrid.
9. Objekti silmuse stenogramm
Objektide üle itereerimisel saate kasutada jaoks...sisse silmus koos objektide struktureerimisega, et mugavalt objekti omaduste üle korrata.
Mõelge sellele näitele:
konst kasutaja = { nimi: "John", vanus: 30 };jaoks (konst [võti, väärtus] kohtaObjekt.entries (kasutaja)) {
konsool.log(`${key}: ${value}`);
}
// Väljund:
// nimi: John
// vanus: 30
Ülaltoodud näites Object.entries (kasutaja) tagastab võtme-väärtuste paaride massiivi, mille iga iteratsioon seejärel muutujateks struktureerib võti ja väärtus.
10. Array.indexOf Shorthand Bitioperaatori abil
Saate asendada kõned Array.indexOf meetod stenogrammiga, kasutades bitiviisilist operaatorit ~ et kontrollida, kas element on massiivis olemas. Lühikiri tagastab elemendi indeksi, kui see on leitud või -1 kui ei leita.
Kaaluge järgmist näidet:
konst numbrid = [1, 2, 3];
konst indeks = ~numbers.indexOf(2);
konsool.log (indeks); // Väljund: -2Ülaltoodud näites ~numbers.indexOf (2) naaseb -2 sest 2 on indeksis 1, ja bitipõhine operaator eitab indeksi.
11. Väärtuste ülekandmine Booleaniga!!
To väärtuse selgesõnaliseks teisendamiseks tõeväärtuse jaoks võite kasutada topelt eituse operaatorit (!!). See teisendab tõhusalt tõeväärtuse tõsi ja võltsväärtus vale.
Kaaluge järgmist näidet:
konst väärtus1 = "Tere";
konst väärtus2 = "";
konsool.log(!!väärtus1); // Väljund: tõsi
konsool.log(!!väärtus2); // Väljund: falseÜlaltoodud näites !!väärtus1 naaseb tõsi sest string Tere on tõsi, samas !!väärtus2 naaseb vale sest tühi string on vale.
Koodi avamise tõhusus ja loetavus
Kasutades neid JavaScripti ja TypeScripti kiirsõnu, saate parandada oma kodeerimise tõhusust ning luua kokkuvõtlikumat ja loetavamat koodi. Olenemata sellest, kas tegemist on kolmeosalise operaatori kasutamisega, lühise hindamisega või malliliteraalide võimega, pakuvad need stenogrammid väärtuslikke tööriistu tõhusaks kodeerimiseks.
Lisaks objekti atribuudi määramise stenogramm, valikuline aheldamine ja objektide struktureerimine lihtsustab objektidega töötamist, samal ajal kui levioperaator ja massiivi kiirkirjad võimaldavad tõhusat massiivi manipuleerimine. Nende stenogrammide valdamine muudab teid produktiivsemaks ja tõhusamaks JavaScripti ja TypeScripti arendajaks.