Mūsdienīgs JavaScript ar ES6 līdz ES13

Valoda: vācu

Mūsdienīgs JavaScript ar ES6–ES13 (JS pamācības materiāls)

JavaScript jums labi padod, bet jaunāko JS versiju funkcijas jūs ne pārvaldat? Tad šis kurss ir pareizais ceļš! Iepazīstieties ar visām ES6 līdz ES13 funkcijām, kas praktiski tiek izmantotas visbiežāk un sniedz lielāko labumu - lai iegūtu saprotamāku, kompaktāku, vieglāk uzturamu kodu ar mazāku kļūdu iespējamību. Jūsu apmācītājs: programmatūras attīstītājs Stephans Haeweß. Jūsu apmācības ilgums: vairāk nekā 6 stundas. Jūsu mācību sasniegumi: Kā tīmekļa attīstītājs jūs tiesības uzrakstiet mūsdienīgu JavaScript!

Uzlabo savu kodu tīmekļa vietnēm un tīmekļa lietotnēm ar modernām JavaScript funkcijām.
Iepazīstieties detalizēti ar visiem ES6 līdz ES13 praktiski svarīgiem un noderīgiem elementiem.
Raksti biezsvara, kļūdu minimizējošu, viegli uzturamu kodu.
Vairāk nekā 6 stundu ilgs pamācību materiāls no programmatūras izstrādātāja Stefana Haewß.

Atklāj, kas jauns un svarīgs tika pievienots JavaScript skriptu valodai kopš ECMAScript 6 - ar vienu, visaptverošu pamācību!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Sīkāka informācija

Saturs: 7 h Video mācību kurss
Licence: privāta un komerciāla Lietošanas tiesības

Kategorijas

Tīmekļa dizains, CMS un attīstība

Ar mīlestību izveidots no:

Stephan Haewß

Lietošanas piemēri

Pāries no vecā uz moderno JavaScript - vienā pamācībā!

Atvērt galeriju

Pārgriezieties no vecā JavaScript uz moderno JavaScript - tikai vienā pamācībā!

Iepazīsties ar visām svarīgajām, praktiski nozīmīgajām JS funkcijām ES6 līdz ES13 versijām.

Atvērt galeriju

Izmācies visus svarīgos, praktiski noderīgos JS funkcijas ES6 līdz ES13 versijām.

Raksti eleganta, smalka un viegli saprotama JavaScript koda.

Atvērt galeriju

Raksti eleganta, izsmalcināta un viegli saprotama JavaScript koda.

Ievads kursā

JavaScript ES6–ES13: 1 | Ko tevi gaida kursā?

Tevi gaida šajā JavaScript ES6 kursā.

Ievads

JavaScript ES6–ES13: 2.1 | Kāpēc ES6? Vai es nevaru palikt pie vecā, labā JavaScript?

JavaScript ES6–ES13: 2.1 | Kāpēc ES6? Vai es nevaru palikt pie vecās labās JavaScript?

Jau daudzus gadus JavaScript eksistē pārlūkprogrammās. Gandrīz katrs tīmekļa vietne satur vairāk vai mazāk JS kodu. Lai arī pirmās versijas bija diezgan neveiklas, ar ES5 standartu joprojām bija iespējams strādāt diezgan veiksmīgi, vismaz ja varēja vērā ņemt ganas un neparedzamības. Tāpēc kāpēc mācīties kaut ko jaunu un neielikt uz pārbaudītā? Šajā nodarbībā es parādīšu ES6 jaunā standarta priekšrocības un iemeslus, kāpēc būtu neiespējami palikt bez tā.

JavaScript ES6–ES13: 2.2 | Izveidot attīstības vidi

Šajā nodarbībā tiks piedāvāts veids, kā iestatīt izstrādes vidi. Tam mēs izmantojam IDE Visual Studio Code no MS un ViteJS kā Dev serveri.

ECMAScript: ES6 uz ES13 - jaunās funkcijas

JavaScript ES6–ES13: 3.1 | mainīgo deklarēšana ar let un const pretī var

Līdz un ar ES5 atslēgvārds var bija vienīgais veids, kā deklarēt mainīgos, un ar savām īpatnībām bieži vien rada nevēlētu uzvedību vai pat kļūdas. ES6 ievieš divus jaunus atslēgvārdus let un const, kas novērš dažas var trūkumus.

JavaScript ES6–ES13: 3.2 | For cikls

Ikvienam tīmekļa izstrādātājam ir zināma For cikla funkcija. Bieži to izmanto, lai caurietu masīvus. Ar ES6 tika ieviesta For cikla versija, kas šo darbību ļauj veikt īsāk un kompaktāk.

JavaScript ES6-ES13: 3.3 | Streļfunkcijas

Funkcijas ir būtiskas JS un līdz šim tika deklarētas un definētas tikai ar atslēgvārdu funkcija. ES6 ievieš ļoti elegantu un īsu pierakstu, kas ne tikai padara kodu lasāmāku, bet arī piedāvā risinājumu par problēmu ar this.

JavaScript ES6–ES13: 3.4 | Iepriekšējie funkciju parametri

JavaScript ES6–ES13: 3.4 | Neobligātie funkciju parametri

ES5 ir iespējams īstenot neobligātos parametrus nedaudz sarežģītā veidā, un tie netiek atklāti funkcijas izsaukumā. Ar ES6 neobligātie parametri ar to noklusētajām vērtībām var tikt tieši iekļauti funkcijas signatūrā.

JavaScript ES6–ES13: 3.5 | Destrukturēšana

JavaScript ES6–ES13: 3.5 | Iznīcināšana

Destrukturizācija ļauj īpaši izcelt elementus no objektiem un masīviem. Rūpīgi pārskatot, rodas daudzas pielietošanas iespējas, kas padara JS kodu eleganteru un kompaktāku.

JavaScript ES6–ES13: 3.6 | Atlikušo parametru

JavaScript ES6–ES13: 3.6 | Atlikušais parametrs

Ar arguments-mainīgo darbošanās bija nepieciešama līdz ES6, lai ļautu funkcijām pieļaut mainīgu parametru skaitu. Šis ES6 ir daudz vieglāks ar tā sauktajiem atlikuma parametriem.

JavaScript ES6–ES13: 3.7 | Atlikuma operators

JavaScript ES6–ES13: 3.7 | Atlikušais operators

Ne tikai funkciju definīcijās atlikuma parametru gadījumā tiek izmantots operators ..., bet arī masīva destrukturizēšanās laikā, lai noķertu "atlikumu" un to piedāvātu kā masīvu.

JavaScript ES6-ES13: 3.8 | Atlikušais operators ar objektiem

JavaScript ES6-ES13: 3.8 | atlikšanās operators ar objektiem

Ne tikai priekš masīviem var izmantot atlikumu operators, tas var tikt izmantots arī objektos, lai uzņemtu atlikušās īpašības un nodrošinātu tās kā objektu.

JavaScript ES6–ES13: 3.9 | Izplatīšanas operators masīvos

Atlikuma operators pretējs ir izplatīšanas operators. Tas izskatās tāpat (…), bet atrodas otrā pusē no piešķiršanas un izplata masīvu atsevišķos gabalos.

JavaScript ES6-ES13: 3.10 | Izplatīšanas operators objektos.

Ar "triku" izplatītāja operatoru strādā arī ļoti labi ar objektiem. Tādējādi objektos var "iekrāsot" objektus. Ar Object.assign() šim mērķim ir ļoti laba alternatīva.

JavaScript ES6–ES13: 3.11 | Metožu deklarācijas objekta literāļos

JavaScript ES6–ES13: 3.11 | Metožu deklarēšana objektu literālos

Funkcijas objektliterālos ir ļoti apjomīgas rakstīt ar funkcija-Vārdu. Ar ES6 to var rakstīt daudz īsāk un saprotamāk.

JavaScript ES6–ES13: 3.12 | Noderīgas un jaunas virknes funkcijas

JavaScript ES6–ES13: 3.12 | Noderīgas un jaunas virkņu funkcijas

Strādājot ar virkņu virknes **zu hantieren**, tas ir katra programmētāja pamata rīks. Labi, ka ES6 piedāvā dažas jaunas un ļoti noderīgas virkņu funkcijas, kas ietaupa daudz rakstīšanas darba.

JavaScript ES6–ES13: 3.13 | Veidnes literāļi

JavaScript ES6–ES13: 3.13 | Veidņu literāli

Nav iespējams nepieminēt: Iepriekšējie daudzrindu virknes literāli ar iekļautajām mainīgo vērtībām bija kā ciešanas līdz ES6 un arī bija ļoti nepatīkami lasāmi. TAISNĪGI ES6 jaunie veidnes literāli ir sintaktiska bauda.

JavaScript ES6–ES13: 3.14 | Noderīgas jaunas masīva funkcijas (find, filter, map, reduce ...)

Jau ar ES5 ir dažas ļoti noderīgas masīva funkcijas, kas pieņem vairāk funkcionalitāti. ES6 ir pievienojis vēl dažas citas, kas padara darbu ar masīviem vēl patīkamāku. Tomēr šeit tiek novērtētas arī dažas "vecās" ES5 jau esošās funkcijas.

JavaScript ES6-ES13: 3.15 | Kartiņa kā vārdnīca un atslēgu vērtību krātuve

JavaScript ES6–ES13: 3.15 | Karte kā vārdnīca un atslēga vērtību glabātuve

Objekti vienmēr ir bijuši izmantojami kā atslēgu-vērtību krātuve vai vārdnīca, taču ar dažādiem trūkumiem. Jaunā karte datu struktūra atbrīvojas no šiem trūkumiem un nodrošina stabilu vārdnīcas funkcionalitāti, kā to zina no citām programmēšanas valodām.

JavaScript ES6–ES13: 3.16 | Solījumi

Asinhroni notikumi var tikt apstrādāti ar atpakaļizsaukumu funkcijām

JavaScript ES6–ES13: 3.17 | Asinh un gaida

JavaScript ES6–ES13: 3.17 | Async un await

Pēc promises li usage agrīno atgriezumu ir iespējams izvairīties, async/await-konstrukts vēl vairāk uzlabo sintaktisko saldumu. Tas balstās uz promises un ļauj programmēt asinhronus notikumus gandrīz kā sinhronus. Cilvēks, kurš reizi ir programmējis ar async/await, turpmāk izvairīsies no tiešas then- metodes no promises izmantošanas (un vēl vairāk no callback).

JavaScript ES6–ES13: 3.18 | Modulis

Node.js moduļi tiek izmantoti jau no paša sākuma, bet sākotnēji tika izmantots tikai CommonJS moduļa formāts ar require. Kopš ES6 standarta ir moduļa definēšana un jaunās atslēgas import/export. Šo formātu šobrīd atbalsta gandrīz visi (jauni) JS bibliotēkas, un arī Node.js var darboties ar jaunākajām versijām.

JavaScript ES6–ES13: 3.19 | Dinamiskie importi

JavaScript ES6–ES13: 3.19 | Dinamiskā importēšana

Papildus moduļu statiskajai importēšanai ar atslēgvārdu import, ES6 atbalsta arī dinamisko importēšanu ar import-funkciju. Tā kā viss notiek asinhroni, tiek atgriezts solījums, kuru var labi gaidīt, izmantojot await. Tādējādi moduļu ielāde laikā izmantojot atbilstošus laika punktus vairs nav nekādu šķēršļu.

JavaScript ES6–ES13: 3.20 | Klašu ar klasēm

JavaScript ES6–ES13: 3.20 | Klases ar klasi

Klasiskā objektorientētā programmēšana ar klasēm un mantošanu līdz ES6 bija iespējama tikai caur prototipu konstruktora funkcijā. Tas bija sarežģīti, radīja iespaidu par nekompakto un tāpēc bija pakļauts kļūdām. Jaunais atslēgvārds class tagad ES6 ļauj definēt kompaktā formā, tāpat kā tas ir citās programmēšanas valodās, piemēram, Java, C# un C++. Internāli tas joprojām ir prototipu bāzes sistēma, tikai ar skaistāku sintaksi.

JavaScript ES6–ES13: 3.21 | Mantošana

Mantošana joprojām balstās uz prototipiem, ES6 rakstāsies extends atslēgvārdā, kas ir daudz vienkāršāks un skaidrāks. To izmantojot, bāzes klases konstruktoru ir nepieciešams izsaukt pareizajā laikā ar super. Kā to darīt, protams, tiks skaidrots šajā nodarbībā.

JavaScript ES6–ES13: 3.22 | Lauki klasēs

Ar jaunie standarti ir iespējama arī biedru vai lauku deklarēšana. Tas nodrošina iespēju deklarēt un inicializēt arī statiskus laukus.

JavaScript ES6–ES13: 3.23 | Privātie lauki

Tagad ir iespējams deklarēt arī privātos laukus, un tiem noteikti nav piekļuves no ārpuses. Nedaudz nepierasts ir to deklarēšanas veids, kas atšķiras no citām programmēšanas valodām.

JavaScript ES6–ES13: 3.24 | Izveidojiet objektus bez klases

JavaScript ES6-ES13: 3.24 | Radīt objektus bez klases

Ar jauno atslēgvārdu class un saistītajiem iezīmēm kā mantošana un datu noslēpums (privātie lauki), visi OO programmētāji teorētiski vajadzētu būt apmierināti, vai ne? Šajā nodarbībā es vēlos izplatīt alternatīvu objektu izveidei, kas nesaskan ar klasēm, prototipiem un this, bet sniedz elastīgāku "mantošanas" jēgu jeb "kompozīciju".

Secinājums

JavaScript ES6-ES13: 4 | Kopsavilkums un pārskats

JavaScript ES6–ES13: 4 | Kopsavilkums un izskats

ES6 un jaunāko versiju galvenie elementi tagad vajadzētu būt apskatīti. Tomēr pastāv nepārtrauktas jaunievedumi. Vēl nav pieminētas dažas retāk izmantotās funkcijas. Šajā nodarbībā tiks skaidrots, ko vēl var sagaidīt nākotnē un kuras funkcijas var būt interesantas īpašos gadījumos.

Detaļas par saturu

Kā darbojas JS šodien!
Vai tas būtu ES moduļi, klases vai bezklases objektu orientētā programmēšana vai Arrow funkcijas – ar funkcijām, kas ir pieejamas JavaScript kopš ECMAScript 6 (ES6), šis skriptēšanas valoda būtu kļuvusi gandrīz kā pieauguša. Vai vēlies attīstīties līdzi, lai rakstītu savas koda rindas laikmetīgi? Tad uzsāc šo vairāk nekā 6 stundu garo JS pamācību no programmatūras izstrādātāja Stephan Haewß.

JavaScript no ES6 līdz ES13, ar šīm funkcijām raksti modernu kodu

Pamācība ir domāta tīmekļa izstrādātājiem, tīmekļa dizaineriem un JavaScript izstrādātājiem. Lai varētu saprast saturu, jau priekšzināt JavaScript attīstības pamatus. Kursa laikā tu mācīsies pazīt arī šādas JavaScript funkcijas:

Mainīgo deklarācija ar let un const
For cikli un Arrow funkcijas
Moduļi ES6
Metodju deklarācija objekta burtu virknēs
Noderīgas un jaunas virkņu funkcijas
Noderīgas jaunas masīvu funkcijas kā find, filter, map, reduce
Raksti elegantu un īsu kodu ar Destructuring
Rest un Spread operators
Klases un mantošana ar class-Atslēgas vārdu
Promises izmantošana

Sievētāks, elegants un ar mazāk kļūdām – tavs jaunais JavaScript kods

Vai tā ir jauna moduļu sistēma, Arrow funkcijas, Promises vai async/await – kopš ES6 līdz ES13 JavaScript tika ieviestas daudz noderīgas funkcijas, no kurām arī JS ietvaru kā VueJS, React un Redux izmanto.

un atļauj sev zināt, kā šodien darbojas moderna JS koda rakstīšana!