ECMAScript 6 - 10 Awesome New Features

Tiesitkö, että JavaScript (yhdessä JScriptin ja ActionScriptin kanssa) on yleiskäyttöisen asiakaspuolen skriptikielen määrittely, jota kutsutaan nimellä ECMAScript? Jotta tämä ikävä määritelmä olisi hieman houkuttelevampi, voimme sanoa, että ECMAScript (tai virallisesti ECMA-262) on standardi, joka määrittelee, miten käytämme JavaScriptiä ja mitä voimme saavuttaa sen kanssa.

Tuorein, 6. painos, ECMAScript 2015 (tai ES6) on luultavasti merkittävin päivitys vuoden 1997 ensimmäisestä versiosta lähtien. Viimeisimmän julkaisun päätavoitteena on ollut tarjota parempaa tukea suurempien sovellusten ja kirjastojen luomiselle. Tämä tarkoittaa kypsempää syntaksia, uusia pikakuvakkeita, jotka helpottavat koodausta, sekä uusia menetelmiä, avainsanoja, tietotyyppejä ja monia muita parannuksia.

ES6-dokumentaatio on laaja, jos haluat lukea paljon, voit ladata kaikki tiedot ECMA Internationalin verkkosivuilta. Tässä viestissä tarkastelemme 10: ää valittua ominaisuutta, vaikka ES6: lla on paljon enemmän tarjottavaa. Jos haluat kokeilla sitä, ES6 Fiddle on loistava paikka tehdä niin, ja voit myös löytää joitakin näytekoodinpätkiä.

Tuki ECMAScript 6: lle

Selaimen toimittajat ovat lisänneet vähitellen tukea ECMAScript 6: n ominaisuuksille. Täältä löydät viileän yhteensopivuustaulukon selaimesta ja kääntäjien tuesta uusille ominaisuuksille.

Jos olet kiinnostunut ES6-tuesta Node.jsissa, tutustu asiakirjoihin täällä.

Vaikka kaikkia ominaisuuksia ei tällä hetkellä tueta, voimme käyttää translaattoreita, kuten Babel, siirtämään ES6-koodimme ES5: ksi. Babelille on viileä Grunt-laajennus, monia mahtavia ES6-laajennuksia Gruntille ja hämmästyttävää Gulp-Babel-laajennusta siellä, joten onneksi meillä on runsaasti valintoja.

Tällä tavoin voimme aloittaa parannetun syntaksin ja ominaisuuksien käytön, mutta meidän ei tarvitse huolehtia ongelmista. Nyt katsotaan ominaisuudet.

1. Uusi päästää avainsana

ES6 esittelee uuden päästää avainsana, jonka avulla voimme julistaa paikalliset muuttujat lohkon piirissä, kuten lausunnon, lausekkeen tai (n sisäisen) toiminnon. Esimerkiksi voimme julistaa a varten silmukka seuraavalla tavalla, käytä sitten samaa muuttujan nimeä (koska sen soveltamisala on rajoitettu varten silmukka) seuraavassa jos toteamus:

 varten (anna i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Käytämme uudelleen "i": tä i = x * y

Käyttämällä päästää avainsana johtaa puhtaampaan ja käyttökelpoisempaan koodiin. Ero päästää ja var on piirissä, esimerkiksi paikallinen muuttuja, jonka määrittelee var avainsanaa voidaan käyttää koko suljetussa toiminnossa, kun taas muuttujat määritellään päästää toimivat vain omassa (alaryhmässä). Päästää voidaan käyttää myös maailmanlaajuisesti, tässä tapauksessa se toimii samalla tavalla kuin var. Tietenkin ES6: ssa voimme silti käyttää var jos haluamme.

2. Uusi const avainsana

Uusi const avainsanan avulla voidaan ilmoittaa vakiot, joita kutsutaan myös muuttumattomiksi muuttujiksi, joihin emme voi siirtää uutta sisältöä myöhemmin.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Hiljainen virhe, koska emme voi määrittää uutta arvoa vakiona

Mahdolliset muuttujat eivät ole aina täysin muuttumattomia ECMAScript 6: ssa, sillä jos vakiona on objekti, voimme myöhemmin muuttaa sen ominaisuuksien ja menetelmien arvoa. Sama pätee myös massiivin elementteihin.

 const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22

Emme edelleenkään voi siirtää uutta arvoa suoraan MY_CONSTANT-objektille yllä olevalla koodinpätkällä, mikä tarkoittaa, että emme voi muuttaa ominaisuuksien ja menetelmien nimiä, eikä myöskään voi lisätä uutta tai poistaa olemassa olevaa, joten emme voi tehdä sitä seuraava asia:

 MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // virhe

3. Nuoli toimii

ECMAScript 6 helpottaa kirjoittamista anonyymit toiminnot, koska voimme jättää kokonaan pois toimia avainsana. Meidän on vain käytettävä uutta syntaksi nuoli toimii, nimetty => nuolen merkin (rasva-nuoli) jälkeen, joka antaa meille suuren pikakuvakkeen.

 // 1. Yksi parametri ES6: ssa antaa summan = (a, b) => a + b; // in ES5 var sum = toiminto (a, b) return a + b; ; // 2. Ilman parametreja ES6: ssa anna randomNum = () => Math.random (); // in ES5 var randomNum = toiminto () return Math.random (); ; // 3. Ilman paluuta ES6: ssa anna viesti = (nimi) => hälytys ("Hi" + nimi + "!"); // in ES5 var message = function (yourName) hälytys ("Hi" + yourName + "!"); ;

Normaali- ja nuolitoimintojen välillä on tärkeä ero, ts. Nuolitoiminnot eivät saa a Tämä arvo automaattisesti, kuten toimia avainsana tekee. Nuoli toimii sitoo Tämä arvo nykyiselle soveltamisalalle. Tämä tarkoittaa, että voimme helposti käyttää sitä uudelleen Tämä avainsana sisäisessä toiminnossa. ES5: ssä se on mahdollista vain seuraavalla hakata:

 // ES5 Hack käyttää "tätä" avainsanaa sisäisessä toiminnossa … addAll: toiminto addAll (kappaleet) var self = this; _.each (kappaletta, toiminto (pala) self.add (pala);); ,… // ES6 sama sisäinen toiminto voi nyt käyttää omaa "tätä" … addAll: toiminto addAll (kappaletta) _.each (kappaletta, pala => tämä.add (pala)); ,…

Yllä oleva koodi on Mozilla Hacksilta

4. Uusi levitä operaattori

Uusi levitä operaattorilla on 3 pistettä (…), ja voimme käyttää sitä allekirjoittamaan useiden odotettujen kohteiden sijainnin. Yksi levinneen operaattorin yleisimmistä käyttötapauksista on joukon elementtien lisääminen toiseen ryhmään:

 anna myArray = [1, 2, 3]; anna uudenArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6 

Voimme myös hyödyntää levitä operaattori toimintopuheluissa, joissa haluamme siirtää argumentteja ryhmästä:

 anna myArray = [1, 2, 3]; funktion summa (a, b, c) palaa a + b + c;  console.log (summa (… myArray)); // 6

levitä operaattori on melko joustava, koska sitä voidaan käyttää useita kertoja samassa matriisissa tai toimintopuhelussa.

5. Oletusarvot parametreille ja uusille lepo-parametreille

Hyvä uutinen, että ECMAScript 6: ssa voimme lisätä oletusarvoja funktion parametreihin. Tämä tarkoittaa, että jos emme välitä argumentteja myöhemmin funktiokutsussa, käytetään oletusparametreja. ES5: ssä parametrien oletusarvot on aina asetettu määrittelemätön, joten uusi mahdollisuus asettaa heidät mihin tahansa haluamme on ehdottomasti hyvä kieli.

 funktion summa (a = 2, b = 4) palaa a + b;  console.log (summa ()); // 6 konsoli.log (summa (3, 6)); // 9

ES6 esittelee myös uudenlaisen parametrin lepoparametrit. He näyttävät ja toimivat samalla tavalla kuin levittäjät. Ne tulevat käteviksi, jos emme tiedä, kuinka monta argumenttia lähetetään myöhemmin funktiopuhelussa. Voimme käyttää Array-objektin ominaisuuksia ja menetelmiä lepoparametreilla:

 funktio putInAlphabet (… args) let sorted = args.sort (); palautus lajiteltu;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t

6. Uusi … selvitys

Uuden avulla … silmukka voimme iteroida massiivien tai muiden iteroituvien kohteiden yli helposti. Uuden kanssa … ECMAScript 6 esittelee kaksi uutta iteroitavaa objektia, karttaa avain- / arvokartoille ja Set for uniikkeja arvoja, jotka voivat olla myös primitiivisiä arvoja ja objektiviitteitä. Kun käytämme … lause, lohkon sisällä oleva koodi suoritetaan kullekin iteroitavan objektin elementille.

 anna myArray = [1, 2, 3, 4, 5]; anna summan = 0; ((myArray): n i) (summa + = i;  console.log (summa); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Template Literals

ECMAScript 6 tarjoaa meille uuden vaihtoehdon merkkikonsentraatiolle. Mallien kirjaimet voit luoda helposti malleja, joissa voimme upottaa eri arvoja mihin tahansa paikkaan, jota haluamme. Voit tehdä niin $ … syntaksi kaikkialla, missä haluamme lisätä tiedot, joita voimme siirtää muuttujista, ryhmistä tai kohteista seuraavalla tavalla:

 let customer = title: 'Ms', etunimi: 'Jane', sukunimi: 'Doe', ikä: '34'; anna mallin = 'Hyvä $ customer.title $ customer.firstname $ customer.surname! Hyvää $ customer.age syntymäpäivää! '; console.log (malli); // Hyvä Jane Doe! Hyvää 34. syntymäpäivää!

8. Luokat

ES6 esittelee JavaScript-luokat, jotka perustuvat olemassa olevaan prototyyppipohjaiseen perintöön. Uuden syntaksin avulla on helpompi luoda objekteja, ottaa käyttöön perintöä ja käyttää uudelleen koodia. Se helpottaa myös aloittelijoille saapumista muista ohjelmointikielistä ymmärtämään, miten JavaScript toimii.

ES6: ssa luokat ilmoitetaan uudella luokka avainsanan, ja sinun täytyy olla rakentaja() menetelmää, jota kutsutaan, kun uutta kohdetta käytetään uusi myClass () syntaksi. On myös mahdollista laajentaa uusia luokkia luokka Lapsi ulottuu vanhempaan syntaksi, joka voi olla tuttu muilta esine-suuntaisilta kieliltä, ​​kuten PHP: ltä. On myös tärkeää tietää, että toisin kuin funktio- ja muuttujailmoitukset, luokanilmoituksia EI kannata ECMAScript 6: ssa.

 luokka Polygon rakentaja (korkeus, leveys) // luokka rakentaja this.name = 'monikulmio'; tämä.leveys = korkeus; this.width = leveys;  sayName () // luokan menetelmä console.log ('Hei, minä olen', tämä.nimi + '.');  anna myPolygon = uusi monikulmio (5, 6); console.log (myPolygon.sayName ()); // Hei, olen monikulmio.

Koodi edellä ES6: n viuluesimerkistä, .

9. Moduulit

Oletko koskaan miettinyt, kuinka siistiä olisi, jos JavaScript olisi modulaarinen? Tietysti on tapahtunut sellaisia ​​ratkaisuja, kuten CommonJS (jota käytetään Node.js: ssa) tai AMD (Asynchronous Module Definition) (jota käytetään RequireJS: ssä), jotta se voidaan tehdä aikaisemmin, mutta ES6 esittelee moduulit alkuperäisenä ominaisuutena.

Meidän on määriteltävä jokainen moduuli omaan tiedostoonsa ja sitten käytettävä viedä avainsanan avulla voit viedä muuttujia ja toimintoja että muita tiedostoja ja tuonti avainsana tuoda ne alkaen muut tiedostot seuraavan syntaksin mukaan:

 // func.js-funktion kuutio (a) palaa * a * a;  toiminto cubeRoot (a) return Math.cbrt (a);  vie cube, cubeRoot // tai: vie cube as cb, cubeRoot as cr // app.js tuo cube, cubeRoot osoitteesta 'toiminnot'; console.log (kuutio (4)); // 64 console.log (cubeRoot (125)); // 5

Tämä ratkaisu on loistava, koska moduuliin tallennettu koodi on näkymätön ulkopuolelta, ja meidän on vietävä vain se osa, jonka haluamme päästä muihin tiedostoihin. Voimme tehdä paljon hämmästyttävämpiä asioita ES6-moduuleilla, täältä löytyy suuri ja yksityiskohtainen selitys niistä.

10. Uusien menetelmien kuormitus

ECMAScript 6 esittelee monia uusia menetelmiä olemassa olevalle String Prototype-, Array Object-, Array Prototype- ja Math-objektille. Uudet menetelmät voivat merkittävästi parantaa tapaa, jolla voimme manipuloida näitä kokonaisuuksia. Mozilla Devilla on hyvät koodikoodit uusista lisäyksistä, kannattaa ottaa aikaa ja tutkia niitä perusteellisesti.

Vain näyttääkseni kuinka viileä he todella ovat, tässä on suosikkini: Array-prototyypin etsintämenetelmä, jonka avulla voimme testata tiettyjä kriteereitä joukon elementeistä suorittamalla soittopyynnön jokaisella elementillä ja palauttamalla sitten ensimmäisen elementin, joka tuotto totta.

 toiminto isPrime (elementti, indeksi, taulukko) var start = 2; kun taas (aloita <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, ei löydy console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Koodi yllä: Mozilla Dev