5 tipptasemel JavaScripti funktsiooni koodi täiustamiseks

JavaScripti funktsioonid kasvavad pidevalt ja saavad uusi, nagu operaatorid, süntaksikonstruktsioonid, avaldised. Paljud neist on viimastel aastatel kasutusele võetud ja mõned neist on juba teist laadi, näiteks rasva noole =>avaldis või objekti levitamise ...operaator.

JavaScripti funktsioonid algavad ettepanekutest

Kõik need JavaScripti funktsioonid algavad TC 39-le esitatud ettepanekutest. Tehniline komitee 39 vastutab standardimise eest:

üldotstarbeline, platvormidevaheline, müüja-neutraalne programmeerimiskeel ECMAScript (JavaScript). See hõlmab keele süntaksit, semantikat ning keelt toetavaid teeke ja täiendavaid tehnoloogiaid.

Tänu JavaScripti kompilaatorile Babel on palju JavaScripti ettepanekuid, mida saame täna oma voogu lisada. Mõned neist pakuvad rohkem selgust, näiteks numbriline eraldaja. Teised, nagu doavaldised, tutvustavad võimalust segada React JSX-i siltidega keerulisi tingimustingimusi.

Vaatame selles artiklis 5 JavaScripti funktsiooni, mis on veel ettepaneku staadiumis, kuid mida saame Babeliga kasutada ja mis parandavad oluliselt teie kodeerimiskogemust.

Igal neist on link oma Babeli lehele, kus näete, kuidas Paabelit seda kasutama konfigureerida, kuigi siin kirjeldatud JavaScripti pakutavad funktsioonid on juba Babel 7-ga kaasatud. Igal jaotisel on ka link oma ettepanekule Ecma TC39 organisatsioonis GitHub.

Nullh coalescing operaator

Ettepanek: https://github.com/tc39/proposal-nullish-coalescing

Paabel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

See JavaScripti ettepanek kirjeldab operaatorit, mis võimaldab anda operaatori paremal küljel varuväärtuse, kui muutuja või objekti atribuut on määratlemata. Kui see pole määratlemata, kasutab see operaatori vasakut poolt:

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

See sarnaneb kolmepoolse operaatorina kirjutamisega:

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Pange tähele, et see operaator ei kontrolli, kas vari ei eksisteeri. See annab veateate:

const val = maybeUndef ?? 2021;  

Kuid ettevaatlik, see operaator ei ole 100% nagu kolmekomponentne operaator, mis tagastab esimese külje, kui hinnatud tingimus on tõene. See ei hinda väärtusi, mis tavaliselt on JavaScriptis valed, väärtusele false. Näiteks tühja stringi ei võeta arvesse false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

Erinevalt nullist koalesseerimisoperaatorist oleks fallbackselle hindamise tulemusel visanud kolmepoolne operaator.

Valikuline aheldamisoperaator

Ettepanek: https://github.com/tc39/proposal-optional-chaining

Paabel: https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

See operaator töötab ka muutujate ja objekti omadustega: see kontrollib, kas pesastatud omadused, mida me läbime, on olemas või mitte. Ilma selle operaatorita peame kontrollima iga pesastatud atribuuti:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Uue valikulise kettimise operaatoriga saame teha midagi sellist:

const val = anObj.aProp?.aNestedProp

See tundub palju selgem ja kirjutamine on lühem. See operaator töötab ka numbrimassiividega, seega on hea kogudega töötada:

const val = anObj.anArray[0]?.someProp

Ja me saame virnastada mitu operaatorit:

const val = anObj.anArray[0]?.someProp?.aNestedProp

Ja mis siis, kui me ühendame selle eelmise, nullilise ühendamisega? Saame süntaksi, mis kontrollib iga läbitud atribuudi olemasolu ja kui seda ei ole, annab varuväärtuse:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Kui mõni väärtustest puudub, tagastatakse see someDefaultValue. Nende kahe operaatori kombineerimine on suurepärane viis lodashi get funktsiooni asendamiseks .

Torujuhtme operaator

Ettepanek: https://github.com/tc39/proposal-pipeline-operator

Paabel: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

See operaator on osa mitmest eksperimentaalsest JavaScripti funktsioonist ja see pakub mitme funktsiooni aheldamisel paremat loetavust. Kaaluge järgmist funktsiooni:

Kui meil on vaja neid kokku aheldatud osateisendusi uuesti kasutada, saame need jagada erinevateks funktsioonideks ja seejärel nende abil tulemuse koostada:

splitBySpaceSelle juures on veider see, et stringile rakendatud teisenduste mõistmiseks peame hakkama seda lugema alt, reast ülespoole. See on vastuolus meie loomuliku lugemisvooluga, ülalt alla. Samuti lõpetame kõigi nende inetute rippuvate sulgudega. Selle võiks kirjutada ühe reaga ja see pole palju ilusam:

Siin peame alustama lugemist keskfunktsioonist välimiste funktsioonide suunas või paremalt vasakule, mis on lääne vasakult paremale lugemise jaoks vastupidine.

Torujuhtme operaator saab muuta need konstruktsioonid palju loetavamaks ja sarnaseks aheldamisega, mis meil algselt oli enne teisenduste teisaldamist eraldi funktsioonidesse:

Nüüd on rakendatud teisendused kirjutatud sarnaselt meie kirjutamisviisiga, ülalt alla, neid on paremini lugeda ja meil pole ühtegi sulgu rippumas. Edu!

Numbriline eraldaja

Ettepanek: https://github.com/tc39/proposal-numeric-separator

Paabel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

See numbriline eraldaja erineb teistest JavaScripti funktsioonidest, kuna see ei ole operaator. See on süntaksikonstruktsioon, mis muudab numbrilised literaalid loetavamaks, luues numbrirühmade visuaalse eraldamise. Suuri arvulisi literaale on raske sõeluda ja kiiresti mõista, eriti kui numbrit korratakse mitu korda. Näiteks:

const longNum = 1000000000000;

Kiire pilguga on raske aru saada. See eraldaja muudab selle loetavamaks:

const longNum = 1_000_000_000_000;

Nüüd saame kiiresti aru, et see on triljon.

Tehke väljendeid

Ettepanek: https://github.com/tc39/proposal-do-expressions

Paabel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

Viimane uutest JavaScripti funktsioonidest, mida me läbime, on avaldis, mida saab hinnata. Selle avaldise tulemus tuleb pärast ploki täitmist, milles võib olla mitu lauset. Saame hõlpsasti aru do-avaldistest, kui tõlgime sellise kolmeosalise operaatori avaldise:

const res = isCold( color )? 'light-blue': 'orange';

Kirjutaksime samaväärse do{}avaldise järgmiselt:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Pange tähele, et me ei pea väärtust tagastama, kuna see pole funktsioon. Kui sel konkreetsel juhul saab selle kolmeosalisemalt kirjutada, on do-avaldised palju võimsamad, võimaldades näiteks mitut avaldust:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

See on tõesti võimas JSX-is, kus saame selle selle siltidega segada, ilma et peaksime tulemust esmalt väliselt arvutama. Näiteks kui kasutaksime nende komponentide renderdamiseks Reacti, saaksime teha järgmist.

Veel JavaScripti ettepanekuid

Iga päev arutatakse rohkem ettepanekuid JavaScripti keelele huvitavamate funktsioonide lisamiseks. Nende pakutud JavaScripti funktsioonide järjest suurenevat loendit saab lugeda aadressil https://github.com/tc39/proposals#ecmascript-proposals. Siin esitatud ettepanekud on peaaegu lõpule jõudmas ja seega peaaegu lisamisele ECMAScripti standardisse, nagu on selgitatud selles aktsepteerimisprotsessi kirjeldavas tabelis .

Mõned uued JavaScripti funktsioonid, mida me selles artiklis uurisime, nagu do-avaldised või konveierioperaator, on 1 etapi ettepanekud, mis tähendab, et enne ECMAScripti standardi osaks saamist on neil veel palju teha.