Kai jaučiatės patogiai rašydami pagrindines „JavaScript“ programas, laikas išmokti pažangios sintaksės, kad išvalytumėte kodą ir paspartintumėte kodavimą.
JavaScript ir TypeScript yra labai populiarios programavimo kalbos žiniatinklio kūrimo srityje. Jie abu turi platų funkcijų rinkinį ir daug sintaksės nuorodų, kurios labai padeda pagerinti kodavimo efektyvumą.
Sužinokite, kaip sugriežtinti kodą ir išnaudoti visas šių kalbų galimybes naudodami keletą naudingų sparčiųjų klavišų.
1. Trečias operatorius
Trinaris operatorius siūlo glaustą ir efektyvią sintaksę sąlyginiams teiginiams išreikšti. Jį sudaro trys dalys: sąlyga, reiškinys, kurį reikia vykdyti, jei sąlyga vertinama kaip tiesa, ir išraiška, kuri vykdoma, jei ji klaidinga.
Šis operatorius ypač naudingas priimant sprendimus pagal sąlygas ir atitinkamai priskiriant skirtingas reikšmes.
Apsvarstykite šį pavyzdį:
konst amžius = 20;
konst ageType = amžius >= 18? "Suaugęs": "Vaikas";
konsolė.log (ageType); // Išvestis: "Suaugęs"Šiame pavyzdyje naudojamas trinarinis operatorius, kad patikrintų, ar kintamasis
amžiaus yra didesnis arba lygus 18. Jei taip, kodas priskiria reikšmę Suaugęs į kintamąjį amžiaus tipas, kitu atveju priskiria reikšmę „Vaikas“.2. Šablonų raidės
Šablonų literalai siūlo galingą ir efektyvų būdą „JavaScript“ eilučių formatavimas ir įtraukiant juose kintamuosius ar išraiškas. Skirtingai nuo tradicinių eilučių sujungimo naudojant viengubas arba dvigubas kabutes, šablono literaluose naudojamos atgalinės varnelės (`).
Ši unikali sintaksė suteikia keletą privalumų dirbant su eilutėmis. Apsvarstykite toliau pateiktą pavyzdį, kuris parodo šablono literalų naudojimą:
konst vardas = "Alisa";
konst pasisveikinimas = `Sveiki, ${name}!`;
konsolė.log (pasveikinimas); // Išvestis: "Sveika, Alisa!"Pavyzdys apima vardas kintamasis šablone literal using ${}. Tai leidžia lengvai sukurti dinamines eilutes.
3. Nulinis sujungimo operatorius
Nulinis sujungimo operatorius (??) yra patogus būdas priskirti numatytąsias reikšmes, kai kintamasis yra bet kuris nulinis arba neapibrėžtas. Jis grąžina dešinės pusės operandą, jei yra kairiosios pusės operandas nulinis arba neapibrėžtas.
Apsvarstykite šį pavyzdį:
konst vartotojo vardas = nulinis;
konst displayName = vartotojo vardas?? "Svečias";
konsolė.log (vaizdo pavadinimas); // Išvestis: "Svečias"Šiame pavyzdyje, kadangi kintamasis Vartotojo vardas yra nulinis, nulinio sujungimo operatorius priskiria numatytąją reikšmę Svečias į kintamąjį rodomas pavadinimas.
4. Trumpojo jungimo įvertinimas
Trumpojo jungimo įvertinimas leidžia rašyti glaustas sąlygines išraiškas naudojant loginius operatorius, pvz && ir ||. Jis naudojasi tuo, kad loginis operatorius nustos vertinti išraiškas, kai tik galės nustatyti rezultatą.
Apsvarstykite šį pavyzdį:
konst vardas = "Jonas";
konst sveikinimas = vardas && `Sveiki, ${name}`;
konsolė.log (pasveikinimas); // Išvestis: "Sveikas, Jonai"Šis pavyzdys įvertins tik išraišką „Sveiki, ${name}“. jei kintamasis vardas turi tikrą vertę. Priešingu atveju jis sujungia trumpąjį jungimą ir priskiria vertę vardas save į kintamąjį pasisveikinimas.
5. Objekto nuosavybės priskyrimo stenografija
Kurdami objektus turite galimybę naudoti sutrumpintą žymėjimą, kuris priskiria kintamuosius kaip ypatybes tuo pačiu pavadinimu.
Šis sutrumpintas žymėjimas pašalina poreikį pertekliškai nurodyti nuosavybės pavadinimą ir kintamojo pavadinimą, todėl kodas yra aiškesnis ir glaustesnis.
Apsvarstykite šį pavyzdį:
konst vardas = "Jonas";
konst pavardė = "Eiras";
konst asmuo = { vardas, pavardė };
konsolė.log (asmuo); // Išvestis: { vardas: "Jonas", pavardė: "Doe" }Šis pavyzdys priskiria savybes Pirmas vardas ir pavardė naudojant trumpąją žymėjimą.
6. Pasirenkamas grandinės sujungimas
Pasirinktinai grandininis (?.) leidžia pasiekti įdėtąsias objekto ypatybes nesijaudinant dėl tarpinių nulinių ar neapibrėžtų reikšmių. Jei grandinės ypatybė yra nulinė arba neapibrėžta, išraiška trumpai sujungiama ir grąžinama neapibrėžta.
Apsvarstykite šį pavyzdį:
konst vartotojas = { vardas: "Alisa", adresu: { miestas: "Niujorkas", Šalis: "JAV" }};
konst šalis = vartotojas.adresas?.šalis;
konsolė.log (šalis); // Išvestis: "USA"Aukščiau pateiktame pavyzdyje pasirenkamas grandinės operatorius užtikrina, kad kodas nekeltų klaidos, jei adresu turtas arba Šalis turto trūksta.
7. Objekto sunaikinimas
Objekto sunaikinimas yra galinga JavaScript ir TypeScript funkcija, leidžianti išgauti ypatybes iš objektų ir priskirti jas kintamiesiems naudojant glaustą sintaksę.
Šis metodas supaprastina objekto savybių prieigos ir manipuliavimo jomis procesą. Pažvelkime atidžiau, kaip veikia objektų naikinimas, pateikdami pavyzdį:
konst vartotojas = { vardas: "Jonas", amžiaus: 30 };
konst {vardas, amžius} = vartotojas;
konsolė.log (vardas, amžius); // Išvestis: „Jonas“ 30Šis pavyzdys išskiria kintamuosius vardas ir amžiaus nuo Vartotojas objektas per objekto sunaikinimą.
8. Sklaidos operatorius
Sklaidos operatorius (...) leidžia išplėsti kartojamo elemento elementus, pvz., masyvą ar objektą, į atskirus elementus. Tai naudinga derinant masyvus arba kuriant seklias jų kopijas.
Apsvarstykite šį pavyzdį:
konst skaičiai = [1, 2, 3];
konst newNumbers = [...skaičiai, 4, 5];
konsolė.log (nauji skaičiai); // Išvestis: [1, 2, 3, 4, 5]Aukščiau pateiktame pavyzdyje sklaidos operatorius išplečia numeriai masyvą į atskirus elementus, kurie vėliau sujungiami 4 ir 5 sukurti naują masyvą, nauji Skaičiai.
9. Objekto kilpos stenografija
Kai kartojate objektus, galite naudoti už...į kilpa kartu su objekto naikinimo funkcija, kad būtų patogu kartoti objekto savybes.
Apsvarstykite šį pavyzdį:
konst vartotojas = { vardas: "Jonas", amžiaus: 30 };dėl (konst [raktas, vertė] apieObjektas.entries (vartotojas)) {
konsolė.log(`${key}: ${value}`);
}
// Išvestis:
// vardas: Jonas
// Amžius: 30
Aukščiau pateiktame pavyzdyje Objektas.įrašai (vartotojas) grąžina rakto-reikšmių porų masyvą, kurią kiekviena iteracija vėliau suardo į kintamuosius Raktas ir vertė.
10. Array.indexOf Shorthand naudojant bitų operatorių
Galite pakeisti skambučius į Array.indexOf metodas su trumpiniu, naudojant bitų operatorių ~ patikrinti, ar elementas egzistuoja masyve. Sutrumpinimas grąžina elemento indeksą, jei rasta arba -1 jei nerasta.
Apsvarstykite šį pavyzdį:
konst skaičiai = [1, 2, 3];
konst indeksas = ~numbers.indexOf(2);
konsolė.log (indeksas); // Išvestis: -2Aukščiau pateiktame pavyzdyje ~numbers.indexOf (2) grįžta -2 nes 2 yra indekse 1, o bitų operatorius paneigia indeksą.
11. Perkelkite vertes į Būlio reikšmę!!
Į aiškiai konvertuoti vertę į loginį, galite naudoti dvigubo neigimo operatorių (!!). Jis efektyviai konvertuoja tikrąją vertę į tiesa ir klaidinga vertė klaidinga.
Apsvarstykite šį pavyzdį:
konst reikšmė1 = "Sveiki";
konst vertė2 = "";
konsolė.log(!!value1); // Išvestis: tiesa
konsolė.log(!!value2); // Išvestis: klaidingaAukščiau pateiktame pavyzdyje !!vertė1 grįžta tiesa nes styga Sveiki yra tiesa, tuo tarpu !!vertė2 grįžta klaidinga nes tuščia eilutė yra klaidinga.
Kodo atrakinimo efektyvumas ir skaitomumas
Naudodami šiuos „JavaScript“ ir „TypeScript“ sutrumpinimus galite pagerinti kodavimo efektyvumą ir sukurti glaustesnį bei įskaitomesnį kodą. Nesvarbu, ar tai būtų trijų dalių operatorius, trumpojo jungimo įvertinimas, ar šabloninių raidžių galios panaudojimas, šie sutrumpinimai suteikia vertingų efektyvaus kodavimo įrankių.
Be to, objekto ypatybių priskyrimo stenografija, pasirenkamas grandinės sujungimas ir objekto naikinimas supaprastina darbą su objektais, o sklaidos operatorius ir masyvo trumpiniai įgalina efektyvų masyvą manipuliavimas. Įvaldę šiuos trumpinius, būsite produktyvesni ir efektyvesni „JavaScript“ ir „TypeScript“ kūrėjai.
