JavaScript-ES6 Ominaisuuksia

tässä opetusohjelmassa opit uusia ominaisuuksia uusin versio JavaScript.

Mikä on ECMAScript 6 (tai ES6)

ECMAScript 2015 (tai ES6) on kuudes ja suuret painos ECMAScript language specification-standardia. Se määrittelee standardin JavaScript täytäntöönpanoa.

ES6 toi merkittäviä muutoksia JavaScript-kieleen., Siinä otetaan käyttöön useita uusia ominaisuuksia, kuten, lohko-muuttujia scoped, uusi silmukka iteroimalla yli taulukot ja esineitä, malli literaaleja, ja monia muita parannuksia, jotta JavaScript-ohjelmointi helpompaa ja hauskempaa. Tässä luvussa, keskustelemme joitakin parhaista ES6 ominaisuuksia, joita voit käyttää jokapäiväisessä JavaScript koodaus.

anna Hakusana

ES6 esittelee uuden let avainsana julistaa muuttujia. Ennen ES6, ainoa tapa julistaa muuttuja JavaScript oli var avainsana., Katsotaan, mitä eroa niillä on.

On olemassa kaksi kriittiset erot var ja let. Muuttujat julisti, jossa var avainsana on toiminta-scoped ja nostetaan huipulla sen soveltamisalaan, kun taas muuttujat julisti let avainsana ovat lohko-scoped ({}) ja ne eivät ole salkoon.

Block scoping tarkoittaa yksinkertaisesti sitä, että kiharasulkeisten eli {}välille luodaan uusi soveltamisala., Jos siis julistaa muuttuja, jossa let avainsana-silmukan sisällä, sitä ei ole olemassa ulkopuolella silmukan, kuten on osoitettu seuraavassa esimerkissä:

Kuten näet yllä olevassa esimerkissä muuttuja i ensimmäinen lohko ei ole käytettävissä ulkopuolella for silmukka. Tämä mahdollistaa myös saman muuttujan nimen uudelleenkäytön useita kertoja, koska sen soveltamisala rajoittuu lohkoon ({}), jolloin tuloksena on vähemmän muuttuva ilmoitus ja puhtaampi koodi.,

Se Avainsana const

uusi const avainsanan avulla on mahdollista määritellä vakioita. Vakiot luetaan vain, niille ei voi siirtää uusia arvoja. Ne ovat myös lohkokakkosia kuten let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

Kuitenkin, voit silti muuttaa objektin ominaisuuksia tai joukko elementtejä:

varten…Silmukan

uusi for...of silmukan avulla voimme kerrata paneelit tai muut iterable esineitä hyvin helposti., Myös silmukan sisällä oleva koodi suoritetaan iteroitavan kappaleen jokaiselle elementille. Tässä on esimerkki:

for...of silmukka ei toimi esineet, koska ne eivät ole iterable. Jos haluat kerrata ominaisuuksia esineen voit käyttää for-in silmukka.

Template Literals

Template literals tarjoavat helpon ja puhtaan tavan luoda monirivisiä merkkijonoja ja suorittaa string interpolation. Nyt voimme upottaa muuttujat tai lausekkeet merkkijonoon missä tahansa paikassa ilman mitään vaivaa.,

Malli literaaleja on luotu käyttämällä takaisin-rasti (` `) (gravis) merkin sijaan tavallinen yhden tai kahden hengen lainausmerkkejä. Muuttujat tai lausekkeet voidaan sijoittaa merkkijonon sisään käyttäen ${...} syntaksia. Vertaile seuraavia esimerkkejä ja nähdä, kuinka paljon hyödyllistä se on:

Vaikka ES5, saavuttaa sama meidän piti kirjoittaa jotain, kuten tämä:

oletusarvot Funktion Parametrit

Nyt, ES6 voit määrittää oletusarvot funktion parametrit., Tämä tarkoittaa, että jos funktioksi ei anneta argumentteja, kun sitä kutsutaan, käytetään näitä oletusarvoja. Tämä on yksi odotetuimmista ominaisuuksista JavaScript. Tässä on esimerkki:

Vaikka ES5, saavuttaa sama meidän piti kirjoittaa jotain, kuten tämä:

Nuoli Toiminnot

Nuoli Toiminnot ovat toinen mielenkiintoinen ominaisuus ES6. Se tarjoaa enemmän tiivis syntaksin kirjoittaminen toiminto ilmaisuja valitsemalla pois function ja return avainsanat.,

Nuolitoiminnot määritellään uudella syntaksilla, läskinuolella (=>) notaatiolla. Katsotaanpa, miten se näyttää:

Kuten voit nähdä thre ei ole function ja return avainsana nuoli tehtävä ilmoitus.

Voit myös ohittaa suluissa eli () siinä tapauksessa kun on tasan yksi parametri, mutta sinun täytyy aina käyttää sitä, kun sinulla on nolla tai enemmän kuin yksi parametri.,

Lisäksi, jos siellä on enemmän kuin yksi ilme toiminto kehon, sinun täytyy kääri se henkselit ({}). Tällöin sinun on myös käytettävä return – lauseketta palauttaaksesi arvon.

nuolitoimintojen kirjoittamisesta on useita variaatioita. Tässä ovat yleisimmin käytetyt:

säännöllisten funktioiden ja nuolifunktioiden välillä on tärkeä ero., Toisin kuin normaali toiminto nuoli toiminto ei ole omaa this kestää this ulompi toiminto, jossa se on määritelty. Javascriptissä this on funktion nykyinen suoritusyhteys.,

ymmärtää, että tämä selvästi, katsotaanpa tarkistaa seuraavat esimerkit:

Kirjoittamasta samaa esimerkkiä käyttäen ES6 malli literaaleja ja nuoli toiminto:

Kuten voit selvästi nähdä, this avainsana edellä oleva esimerkki viittaa yhteydessä toiminto sulkee arrow toiminto, joka on Henkilö-olio (linja no-9), toisin kuin edellisessä esimerkissä, jossa se viittasi global object-Ikkuna (linja no-9).

luokat

ECMAScript 5: ssä ja aiemmin luokkia ei ollut Javascriptissä., Luokat ovat käyttöön ES6, joka näyttää samanlainen luokissa muissa olio-kielet, kuten Java, PHP, jne., mutta ne eivät toimi täsmälleen samalla tavalla. ES6-luokat helpottavat esineiden luomista, toteuttavat perinnön käyttämällä extends – avainsanaa ja käyttävät koodia uudelleen.

ES6 voit julistaa luokka ei käyttämällä uutta class avainsana, jota seuraa luokan nimi. Konventtiluokan mukaan nimet kirjoitetaan Tittlecasessa (eli kunkin sanan ensimmäisen kirjaimen pääomittaminen).,

yllä olevassa esimerkissä Square luokka perii Suorakulmion käyttäen extends avainsana. Muista luokista periytyvistä luokista käytetään nimitystä johdetut luokat tai lapsiluokat.

Myös, sinun täytyy soittaa super() lapsen luokan rakentaja ennen pääsyä yhteydessä (this)., Esimerkiksi, jos jätät super() soita getArea() menetelmä neliö esine, se aiheuttaa virheen, koska getArea() menetelmä edellyttää pääsyä this avainsana.

Moduulit

Ennen ES6, ei ole natiivi tuki moduulit JavaScript. Kaikki JavaScript-sovelluksen sisällä, esimerkiksi eri JavaScript-tiedostojen muuttujat, jakoivat saman laajuuden.

ES6 esittelee tiedosto-pohjainen moduuli, jossa kukin moduuli edustaa erillinen .js tiedosto., Nyt voit käyttää export tai import ilmoitus moduuli vienti tai tuonti muuttujat, toiminnot, luokat tai muu yhteisö/muut moduulit tai tiedostoja.

luodaan moduuli, eli JavaScript-tiedosto ”tärkein.js” and place the following code in it:

now create another JavaScript file ”app.js” seuraavalla koodilla:

lopulta luo HTML-tiedosto ” – testi.html ” ja seuraavalla koodilla ja avaa tämä HTML-tiedosto selaimessasi HTTP-protokollalla (tai käytä localhostia). Huomaa myös type="module" käsikirjoituksen tag.,

Loput Parametrit

ES6 esittelee loput parametrit, joiden avulla voimme siirtää mielivaltaisen määrän parametreja toiminto muodossa array. Tämä on erityisen hyödyllistä tilanteissa, joissa haluat siirtää parametrit funktioon, mutta sinulla ei ole aavistustakaan, kuinka monta tarvitset.

rest-parametri on määritelty prefixing nimetty parametrin muun toimijan (...) eli kolme pistettä. Lepoparametri voi olla vain parametrien luettelon viimeinen, ja lepoparametri voi olla vain yksi., Katso seuraava esimerkki, miten se toimii:

Kun muu parametri on vain parametrin funktio, se saa kaikki argumentit välitetään toiminnon, muuten se saa loput argumentit, joka ylittää määrän nimettyjä parametreja.

Levitä Toimijan

levitä operaattori, joka on myös merkitty (...), suorittaa päinvastainen toiminto loput operaattorin. Levitä toimijan leviää (eli pätkii) array ja kulkee arvot määritelty toiminto, kuten seuraavassa esimerkissä:

levitä operaattori voidaan käyttää myös lisätä elementtejä array toiseen array ilman array menetelmiä, kuten push(), unshift() concat() jne.,

Tuhoa Toimeksianto

tuhoa tehtävä on ilmaus, joka on helppo poimia arvoja paneelit, tai ominaisuuksia esineitä, osaksi eri muuttujien tarjoamalla lyhyemmän syntaksin.

On olemassa kaksi erilaista tuhoa tehtävä ilmaisuja—array ja objektin tuhoa tehtävän.,tehdä sama asia, vain yksi rivi käyttäen array tuhoa tehtävä:

Voit käyttää myös muun toimijan array tuhoa tehtävä, kuten kuvassa:

kohde tuhoa oppimistehtävä

ES5 poimia kiinteistöjen arvot esine, meidän täytyy kirjoittaa jotain, kuten tämä:

Mutta ES6, voit poimia objektin ominaisuusarvot ja määrittää ne muuttujat helposti, kuten tämä:

Useimmat ominaisuudet olemme keskustelleet edellä ovat tuettuja uusimman version tärkeimmät selaimet, kuten Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, jne.,