5 huippuluokan JavaScript-ominaisuutta koodin parantamiseksi

JavaScript-ominaisuudet kasvavat jatkuvasti ja saavat uusia, kuten operaattoreita, syntaksirakenteita, lausekkeita. Monet niistä on otettu käyttöön viime vuosina ja osa niistä on jo toista luontoa, kuten rasvanuolilauseke =>tai objektin leviämisoperaattori ....

JavaScript-ominaisuudet alkavat ehdotuksista

Kaikki nämä JavaScript-ominaisuudet alkavat TC 39:lle lähetetyistä ehdotuksista. Tekninen toimikunta 39 vastaa standardoinnista:

yleiskäyttöinen, monialustainen, toimittajaneutraali ohjelmointikieli ECMAScript (JavaScript). Tämä sisältää kielen syntaksin, semantiikan ja kieltä tukevat kirjastot ja täydentävät tekniikat.

JavaScript-kääntäjän Babelin ansiosta voimme aloittaa lukuisten JavaScript-ehdotusten lisäämisen jo tänään. Jotkut niistä tarjoavat enemmän selkeyttä, kuten numeerinen erotin. Toiset, kuten dolausekkeet, tarjoavat mahdollisuuden yhdistää monimutkaisia ​​ehtoja React JSX -tunnisteiden kanssa.

Katsotaanpa tässä artikkelissa viittä JavaScript-ominaisuutta, jotka ovat vielä ehdotusvaiheessa, mutta joita voimme käyttää Babelin kanssa ja jotka parantavat merkittävästi koodauskokemustasi.

Jokaisella on linkki sen Babel-sivulle, jossa voit nähdä kuinka Babel määritetään käyttämään sitä, vaikka tässä kuvatut ehdotetut JavaScript-ominaisuudet sisältyvät jo Babel 7:ään. Jokaisessa osiossa on myös linkki ehdotukseensa Ecma TC39 -organisaatiossa osoitteessa GitHub.

Tyhjä yhdistämisoperaattori

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

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

Tämä JavaScript-ehdotus kuvaa operaattorin, joka mahdollistaa vara-arvon tarjoamisen operaattorin oikealle puolelle, kun muuttuja tai objektin ominaisuus on määrittelemätön. Jos se ei ole määrittelemätön, se käyttää operaattorin vasenta puolta:

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

Tämä on samanlainen kuin sen kirjoittaminen kolmiosaisena operaattorina:

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

Huomaa, että tämä operaattori ei tarkista, että muuttujaa ei ole olemassa. Tämä antaa virheilmoituksen:

const val = maybeUndef ?? 2021;  

Mutta varovainen, tämä operaattori ei ole 100 % kuin kolmiosainen operaattori, joka palauttaa ensimmäisen puolen, jos arvioitu ehto on tosi. Se ei arvioi arvoja, jotka ovat tavallisesti vääriä JavaScriptissä, arvoon false. Esimerkiksi tyhjää merkkijonoa ei oteta huomioon false:

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

Toisin kuin tämä nullish coalescing -operaattori, kolmiosainen operaattori olisi heittänyt fallbacktämän arvioinnin tuloksena.

Valinnainen ketjutusoperaattori

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

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

Tämä operaattori toimii myös muuttujien ja objektien ominaisuuksien kanssa: se tarkistaa, ovatko läpikäymiämme sisäkkäisiä ominaisuuksia olemassa vai eivät. Ilman tätä operaattoria meidän on tarkistettava jokainen sisäkkäinen ominaisuus:

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

Uuden valinnaisen ketjutusoperaattorin avulla voimme tehdä jotain seuraavista:

const val = anObj.aProp?.aNestedProp

Tämä näyttää paljon selkeämmältä ja sitä on lyhyempi kirjoittaa. Tämä operaattori toimii myös numeeristen taulukoiden kanssa, joten kokoelmien kanssa on hyvä työskennellä:

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

Ja voimme pinota useita operaattoreita:

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

Entä jos yhdistämme tämän edelliseen, tyhjään yhteenliittämiseen? Saamme syntaksin, joka tarkistaa, että jokainen läpikäynyt omaisuus on olemassa, ja jos ei ole, tarjoaa varaarvon:

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

Jos jotakin arvoista ei ole olemassa, se palauttaa someDefaultValue. Näiden kahden operaattorin yhdistäminen on loistava tapa korvata lodash’s get -toiminto.

Putkilinjan operaattori

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

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

Tämä operaattori on osa useita kokeellisia JavaScript-ominaisuuksia, ja tämä tarjoaa paremman luettavuuden ketjutettaessa useita toimintoja yhteen. Harkitse seuraavaa toimintoa:

Jos meidän on käytettävä uudelleen näitä yhteen ketjutettuja osittaisia ​​muunnoksia, voimme jakaa ne eri funktioihin ja muodostaa sitten tuloksen niiden avulla:

Outoa tässä on se, että meidän on aloitettava tämän lukeminen alhaalta, splitBySpaceriviltä ylös, ymmärtääksemme merkkijonoon sovelletut muunnokset. Tämä on vastoin luonnollista lukuvirtaamme ylhäältä alas. Päädymme myös kaikkiin niihin rumiin roikkuviin sulkeisiin. Tämän voisi kirjoittaa yhdelle riville, eikä se ole paljon kauniimpi:

Tässä meidän on aloitettava lukeminen keskifunktiosta kohti ulompia funktioita tai oikealta vasemmalle, mikä on vastoin intuitiivista länsimaiselle vasemmalta oikealle -lukemiselle.

Liukulinjan operaattori voi tehdä näistä rakenteista paljon luettavampia ja samankaltaisia ​​kuin ketjutus, joka meillä oli alun perin ennen muunnosten siirtämistä erillisiin toimintoihin:

Nyt käytetyt muunnokset on kirjoitettu samalla tavalla kuin kirjoitustapamme, ylhäältä alas, ne ovat selkeämmin luettavia, eikä meillä ole sulkuja roikkumassa. Menestys!

Numeroerotin

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

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

Tämä numeerinen erotin eroaa muista JavaScript-ominaisuuksista, koska se ei ole operaattori. Se on syntaksirakenne, joka tekee numeerisista literaaleista luettavampia luomalla visuaalisen erottelun numeroryhmien välille. Suuria numeerisia literaaleja on vaikea jäsentää ja ymmärtää nopeasti, varsinkin kun numeroa toistetaan useita kertoja. Esimerkiksi:

const longNum = 1000000000000;

Sitä on vaikea ymmärtää nopealla silmäyksellä. Tämä erotin tekee siitä luettavamman:

const longNum = 1_000_000_000_000;

Nyt voimme nopeasti ymmärtää, että tämä on biljoona.

Tee ilmaisuja

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

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

Viimeinen uusista JavaScript-ominaisuuksista, jonka käymme läpi, on lauseke, joka voidaan arvioida. Tämän lausekkeen tulos tulee sen jälkeen, kun on suoritettu lohko, jonka sisällä voi olla useita lauseita. Voimme helposti ymmärtää do-lausekkeet, jos käännämme kolmiosaisen operaattorilausekkeen, kuten tämä:

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

Kirjoittaisimme vastaavan do{}lausekkeen näin:

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

Huomaa, että meidän ei tarvitse palauttaa arvoa, koska tämä ei ole funktio. Vaikka tässä nimenomaisessa tapauksessa tämä voidaan kirjoittaa ytimekkäämmin kolmiosaisena, do-lausekkeet ovat paljon tehokkaampia, mikä mahdollistaa useiden lausumien, esimerkiksi:

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

Tämä on todella tehokasta JSX:ssä, jossa voimme sekoittaa sen tagien kanssa ilman, että meidän tarvitsee ensin laskea tulosta ulkoisesti. Voisimme tehdä esimerkiksi seuraavan, jos käyttäisimme Reactia näiden komponenttien hahmontamiseen:

Lisää JavaScript-ehdotuksia

Joka päivä keskustellaan enemmän ehdotuksista mielenkiintoisten ominaisuuksien lisäämiseksi JavaScript-kieleen. Yhä kasvava luettelo näistä ehdotetuista JavaScript-ominaisuuksista on luettavissa osoitteessa https://github.com/tc39/proposals#ecmascript-proposals. Tässä esitetyt ehdotukset ovat lähellä valmistumista ja siten lähellä ECMAScript – standardiin lisäämistä, kuten tässä hyväksymisprosessia kuvaavassa taulukossa selitetään .

Jotkut tässä artikkelissa tutkimistamme uusista JavaScript-ominaisuuksista, kuten do-lausekkeet tai liukuhihnaoperaattori, ovat vaiheen 1 ehdotuksia, mikä tarkoittaa, että niillä on vielä tehtävää, ennen kuin niistä tulee osa ECMAScript-standardia.