Šiuolaikiškas JavaScript su ES6–ES13 (JS pamokos)

Tave laukia šio JavaScript ES6 kursas.

JavaScript jau daugelį metų yra naršyklėse. Beveik kiekvienas tinklalapis turi daugiau ar mažiau JS kodo. Nors pirmosios versijos buvo gan prastokos, su ES5 standartu vis dar galima buvo gerai dirbti, bent jau jei išmanėte gudrybes ir atsitiktinius sunkumus. Taigi kodėlgi mokytis kažko naujo, o ne pasilikti patiems tikrinamiems ginklus? Šioje pamokoje aš parodysiu naujo standarto ES6 privalumus ir pateiksiu priežastis, kodėl jums iš tikrųjų nereikėtų jo ignoruoti.

Šioje pamokoje pristatoma galimybė įrengti kūrimo aplinką. Tai darome naudodami IDE Visual Studio Code iš MS ir ViteJS kaip Dev-serverį.

Iki ir įskaitant ES5, raktažodis var buvo vienintelis būdas deklaruoti kintamuosius, dažnai sukeliantis nepageidaujamą elgesį ar net klaidas. ES6 į rinką išsiuntė du naujus raktažodžius let ir const, kurie ištaiso kai kurias var trūkumų.

Kiekvienas interneto kūrėjas žino „for“ ciklą. Jis dažnai naudojamas masyvų perėjimui. Su ES6 yra „for“ ciklo variacija, kuri tai leidžia žymiai trumpiau ir kompaktiškiau.

Funkcijos yra esminės JS ir iki šiol buvo deklaruojamos ir apibrėžiamos tik naudojant raktažodį function. ES6 įveda labai elegantišką ir trumpą rašymo būdą, kuris ne tik padaro kodą lengviau skaitomą, bet taip pat siūlo sprendimą vienam nuobodžiam problemos su this.

Neprivalomi parametrai ES5 gali būti įgyvendinami šiek tiek sudėtingai ir nepasireiškia funkcijos šaukėjui. Naudojant ES6, neprivalomi parametrai su savo numatytosiomis vertėmis gali būti tiesiogiai įrašyti į funkcijos parašą.

Destruktūrizavimas leidžia tiksliai išgauti elementus iš objektų ir masyvų. Atidžiau pažvelgus, atsiranda daug taikymo galimybių, kurios JS kodą daro elegantiškesnį ir kompaktiškesnį.

Operacijos su arguments-kintamuoju iki ES6 buvo būtinas, norint leisti funkcijoms priimti kintamą parametrų skaičių. ES6 tai yra daug lengviau su vadinamaisiomis likučių parametrais.

Ne tik funkcijų apibrėžimuose …-operatorius naudojamas likusių parametrų atveju, jis taip pat gali būti naudojamas masyvo dekonstravimo metu, kad būtų galima atkurti „likusias“ elementų dalis ir pateikti jas kaip masyvą.

Ne tik masyvuose galima naudoti liekanos operatorių, bet ir objektuose jis gali sugriebti likusias savybes ir pateikti jas kaip objektą.

Reversas nuo likučio operatoriaus yra išplatinimo operatorius. Jis atrodo taip pat (…), bet yra priešingame priskyrimo pusėje ir išskleidžia masyvą į atskiras dalis.

"Triukas" su skleidimo operatoriumi veikia labai gerai net su objektais. Taip galima įterpti objektus į kitus objektus. Tačiau šiems tikslams yra labai geras Object.assign() alternatyva.

Funkcijos objektų literaluose rašyti labai sudėtinga su function- raktu. Tačiau naudojant ES6, jas galima rašyti daug trumpiau ir aiškiau.

Su eilutėmis manipuliuoti yra kiekvieno programuotojo pagrindinis įrankis. Gerai, kad ES6 siūlo keletą naujų ir labai naudingų eilutės funkcijų, kurios sutaupo daug rašymo darbo.

Niekas negali paneigti: daugelio eilučių simbolių literai su integruotų kintamųjų vertėmis buvo kančia ir labai nemalonus skaityti iki ES6. ES6 nauji šablonai, priešingai, yra sintaksinė palaima.

Jau naudojant ES5 yra keletas labai naudingų masyvo funkcijų, kurios sekia funkcionalų požiūrį. ES6 pridėjo dar keletą kitų, kurie dar labiau palengvina darbą su masyvais. Kai kurios „senosios“ ES5 jau turimos funkcijos čia taip pat yra paminėtos.

Objektai visą laiką galėjo būti naudojami kaip raktų-vertės saugykla ar Žodynas, tačiau su kai kuriais trūkumais. Nauja Map duomenų struktūra atmeta tuos trūkumus ir teikia patikimą žodynų funkcionalumą, toks, kokį žinome iš kitų programavimo kalbų.

Asinchroninės operacijos gali būti apdorotos naudojant atgalinio iškvietimo funkcijas, tačiau kyla pavojus, kad gylės per didelė ir kodas tampa neaiškus (vadinama atgalinio iškvietimo velniavimu). Promisai šį problemą išsprendžia, pasitelkę išvengti gilios gylės ir leisti grandininį asinchroninių operacijų jungimą vienoje plokštumoje.

Po Promisų galima išvengti atgalinio kvietimo pragaro, async/await konstrukcija dar labiau prisideda prie sintaksės paprastumo. Ji remiasi Promisais ir leidžia programuoti asinchroninius procesus beveik taip pat kaip sinchroninius. Kas nors bent kartą programavęs su async/await, nuo to laiko vengia tiesioginio Promisų then-metodo naudojimo (ir dar labiau vengia atgalinių iškvietimų naudojimo).

Node.js modulai naudojami nuo pat pradžių, tačiau pradžioje jie buvo sukurti naudojant tik CommonJS modulų formatą su require. Nuo ES6 yra standartizuotas modulio apibrėžimas su naujais raktažodžiais import/export. Šiuo metu šis formatas yra palaikomas beveik visose (naujosiose) JS bibliotekose, o Node.js taip pat gali su tuo susidoroti naujausiose versijose.

Beu statinio modulių importavimo su raktu import, ES6 taip pat palaiko dinaminį importavimą naudojant import-funkciją. Kadangi viskas veikia asinchroniškai, grąžinamas promises, kurių atsakymą galima palaukti naudojant await funkciją. Taigi, modulių pakrovimui vykdymo metu nieko nekliudo.

Klasikinė objektinis programavimas su klasėmis ir paveldėjimu iki ES6 egzistavo tik per prototipą su konstruktoriumi. Tai buvo apsunkinantis, atrodė mažai kompaktiškai ir todėl buvo linkęs į klaidas. Nauja raktažodis class dabar su ES6 leidžia apibrėžti kompaktiškai, kaip tai daroma kitose programavimo kalbose, tokiomis kaip Java, C# ir C++. Iš esmės tai išlieka prototipų pagrįstas sistema, tik su gražesne sintakse.

Paveldėjimas ir toliau remiasi prototipais, tačiau ES6 jis užrašomas naudojant extends raktažodį, kuris žymiai patogesnis ir aiškesnis. Jį naudojant, būtina tinkamu metu iškviesti pagrindinės klasės konstruktorių naudojant super. Kaip tai padaryti, žinoma, bus paaiškinta šiame pamokoje.

Taip pat narių ar laukų deklaravimas buvo leidžiamas su naujesniais standartais. Taip pat galima deklaruoti ir inicijuoti statinius laukus.

Taip pat galima apibrėžti privačius laukus, prie jų garantuotai nepasieksite iš išorės. Šiek tiek priprasti reikia prie deklaracijos, kuri išsiskiria iš kitų programavimo kalbų.

Naujuoju žodžiu klasė ir susijusiomis funkcijomis, tokiomis kaip paveldėjimas ir duomenų uždarumas (privačios narystės), visi OO-programuotojai turėtų būti patenkinti, ar ne? Šioje pamokoje noriu pristatyti alternatyvą objektų kūrimui, kuri visiškai išsieina be klasių, prototipų ir tėvinio komponento, tačiau leidžia lankstesnį „paveldėjimą“ arba geriau „kompoziciją“.

Svarbiausios ES6 versijos ir naujesnių funkcijos dabar turėtų būti aptartos. Tačiau vis dar pridėjamos naujovės. Kai kurios mažiau naudojamos funkcijos dar nebuvo paminėtos. Šioje pamokoje bus paaiškinta, ką dar galima tikėtis ateityje ir kurios funkcijos gali būti įdomios specialiuose atvejuose.