ECMAScript 6 - 10 Awesome New Features

Kas teadsite, et JavaScript (koos JScript ja ActionScript) on üldotstarbelise kliendipoolse skriptikeele spetsifikatsiooni rakendamine, mida nimetatakse ECMAScriptiks? Et see vastik määratlus veidi atraktiivsemaks muuta, võib öelda, et ECMAScript (või ametlikult ECMA-262) on standard, mis määrab, kuidas me JavaScripti kasutame ja mida me saame saavutada sellega.

Viimane, 6. väljaanne, ECMAScript 2015 (või ES6) on tõenäoliselt kõige olulisem uuendus alates esimesest versioonist 1997. aastal. Viimase väljaande peamine eesmärk on pakkuda paremat toetust suuremate rakenduste ja raamatukogude loomiseks. See tähendab küpsemat süntaksit, uusi kiirklahve, mis muudavad kodeerimise lihtsamaks, ning ka uusi meetodeid, märksõnu, andmetüüpe ja paljusid teisi täiustusi.

ES6 dokumentatsioon on ulatuslik, kui soovite palju lugeda, saate kogu specs alla laadida ECMA Internationali veebilehelt. Sellel ametikohal vaatame 10 käsitsi valitud funktsiooni, kuigi ES6 pakub palju rohkem. Kui soovite seda katsetada, on ES6 Fiddle suurepärane koht, kus saate seda teha, ja seal on ka mõned näidiskoodilõigud.

Toetus ECMAScriptile 6

Brauseri tarnijad on järk-järgult lisanud toetust ECMAScript 6 funktsioonidele. Siit leiate lahe ühilduvuse tabeli brauseri ja kompilaatorite toetuse kohta uute funktsioonide jaoks..

Kui olete huvitatud ES6 toetusest Node.js'is, vaadake dokumente siit.

Kuigi kõiki funktsioone praegu ei toetata, saame kasutada ESP-koodi edastamiseks ES6-koodi, nagu näiteks Babel. Babelile on olemas lahe Grunt plugin, paljud suurepärased ES6 pluginad Gruntile ja hämmastav Gulp-Babeli plugin seal, nii et õnneks on meil palju valikuid.

Nii saame hakata kasutama täiustatud süntaksit ja võimeid, samal ajal kui me ei pea muretsema keerukuse probleemide pärast. Nüüd vaatame funktsioone.

1. Uus lase Märksõna

ES6 tutvustab uut lase märksõna, mis võimaldab meil deklareerida lokaalsed muutujad ploki ulatuses, näiteks avalduse, väljenduse või (n sisemise) funktsiooni. Näiteks saame kuulutada a jaoks silmus järgmisel viisil, seejärel kasutage sama muutuja nime (kuna selle ulatus on piiratud jaoks silmus) järgmise sees kui avaldus:

 jaoks (lase i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = Y) // Taaskasutame "i", et i = x * y

Kasutades lase märksõna viib puhtama ja kasutatavama koodi. Erinevus lase ja var on hõlmatud näiteks kohaliku muutujaga, mille määrab var märksõna saab kasutada kogu sulgemisfunktsioonis, samas kui muutujaid on defineeritud lase töötada ainult oma (alam) plokis. Lase saab kasutada ka globaalselt, sel juhul käitub see samamoodi nagu var. Loomulikult saame ES6-s siiski kasutada var kui me tahame.

2. Uus const Märksõna

Uus const märksõna abil on võimalik deklareerida konstante, mida nimetatakse ka muutumatuteks muutujateks, millele me ei saa hiljem uut sisu ümber määrata.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Vaikne viga, kuna me ei saa uut väärtust ümber määrata

ECMAScript 6-s ei ole alati muutuvad muutuvad muutumatud, sest kui konstant omab objekti, saame hiljem muuta selle omaduste ja meetodite väärtust. Sama kehtib massiivi elementide kohta.

 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

Ülaltoodud koodilõigu puhul ei saa me ikka veel uut väärtust omistada objektile MY_CONSTANT, mis tähendab, et me ei saa muuta omaduste ja meetodite nimesid, samuti ei saa lisada uut või kustutada olemasolevat, nii et me ei saa seda teha järgmine asi:

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

3. Nool funktsioonid

ECMAScript 6 aitab meil kirjutada anonüümsed funktsioonid, kuna me saame selle täielikult ära jätta funktsiooni märksõna. Me peame kasutama ainult uut süntaksit noolefunktsioonid, nimega => noolemärgi (rasva nool) järgi, mis annab meile suurepärase otsetee.

 // 1. Üks parameeter ES6-s laseb sum = (a, b) => a + b; // in ES5 var sum = funktsioon (a, b) return a + b; ; // 2. ilma parameetriteta ES6-s laske randomNum = () => Math.random (); // in ES5 var randomNum = funktsioon () return Math.random (); ; // 3. ES6 tagastamata jätke teade = (name) => alarm ("Hi" + nimi + "!"); // in ES5 var message = function (yourName) alarm ("Hi" + yourName + "!"); ;

Regulaar- ja noolefunktsioonide vahel on oluline erinevus, st noolefunktsioonid ei saa a seda väärtusega automaatselt sarnased funktsiooniga määratud funktsioonid funktsiooni märksõna teeb. Noole funktsioonid leksiliselt siduvad the seda väärtus praegusele ulatusele. See tähendab, et me saame kergesti taaskasutada seda märksõna sisemises funktsioonis. ES5-s on see võimalik ainult järgmiste häkkidega:

 // ES5 Hack kasutab "seda" märksõna sisemises funktsioonis … addAll: function addAll (tükid) var self = this; _.each (tükid, funktsioon (tükk) self.add (tk);); ,… // ES6 sama sisefunktsioon saab nüüd kasutada oma "seda" … addAll: funktsioon addAll (tükid) _.each (tükid, tükk => this.add (tükk)); ,…

Ülaltoodud kood on Mozilla Hacksilt

4. Uus levinud Operaator

Uus levinud operaator on tähistatud 3 punktiga (…) ja me saame seda kasutada mitme eeldatava elemendi allkirjastamiseks. Üks levinuma operaatori kõige sagedamini kasutatavatest juhtudest on massiivi elementide lisamine teise massiivi:

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

Me võime ka levinud operaator funktsioonikõnedes, milles me soovime massiivist argumente edasi anda:

 lase myArray = [1, 2, 3]; funktsiooni summa (a, b, c) tagasi a + b + c;  console.log (summa (… myArray)); // 6

The levinud operaator on üsna paindlik, kuna seda saab sama massiivi või funktsioonikõne puhul mitu korda kasutada.

5. Parameetrite ja uue puhkuse parameetrite vaikeväärtused

Hea uudis, et ECMAScript 6-s saame lisada funktsiooni parameetritele vaikeväärtusi. See tähendab, et kui me ei edastata argumente hiljem funktsioonikõnes, kasutatakse vaikimisi parameetreid. ES5 puhul on parameetrite vaikeväärtused alati seatud määratlemata, nii et uus võimalus neid seada igale soovile on kindlasti keele suureks täiustamiseks.

 funktsiooni summa (a = 2, b = 4) tagasi a + b;  console.log (summa ()); // 6 konsool.log (summa (3, 6)); // 9

ES6 tutvustab ka uut tüüpi parameetrit ülejäänud parameetrid. Nad näevad välja ja töötavad sarnaselt levinud operaatoritega. Nad tulevad käepärast, kui me ei tea, kui palju argumente hiljem funktsionaalses kõnes edastatakse. Me saame kasutada Array objekti omadusi ja meetodeid puhkeparameetritele:

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

6. Uus … Avaldus

Uue abiga … silmus, mida saab lihtsustada massiivide või muude iterable objektide üle. Koos uue … ECMAScript 6 tutvustab ka kahte uut iterable objekti, kaart võtme / väärtuse kaartide jaoks ja Set ainulaadsete väärtuste kogumite jaoks, mis võivad olla ka primitiivsed väärtused ja objekti viited. Kui me seda kasutame … avaldus, ploki sees olev kood täidetakse iga korduva objekti elemendi jaoks.

 lase myArray = [1, 2, 3, 4, 5]; laske summa = 0; ((i) mArraari i kohta) sum + = i;  console.log (summa); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Template Literals

ECMAScript 6 annab meile uue stringi stringide ühendamiseks. Template literals võimaldame meil hõlpsasti luua malle, milles me saame soovitud väärtustesse lisada erinevaid väärtusi. Selleks peame kasutama $ … süntaks kõikjal, kus me tahame lisada muutujatest, massiividest või objektidest edastatud andmed järgmiselt:

 let customer = title: 'Ms', eesnimi: 'Jane', perekonnanimi: 'Doe', vanus: '34'; let template = 'Kallis $ customer.title $ customer.firstname $ customer.surname! Palju $ customer.age sünnipäeva! '; console.log (mall); // Lugupeetud pr Jane Doe! Õnnelik 34. sünnipäev!

8. Klassid

ES6 tutvustab JavaScript klasse, mis põhinevad olemasoleval prototüübil põhineval pärandil. Uus süntaks muudab objektide loomise lihtsamaks, pärandi võimendamiseks ja koodi korduvkasutamiseks. Samuti lihtsustab see teiste programmeerimiskeeltega saabuvate algajate jaoks, kuidas JavaScript töötab.

ES6-s klassi kuulutatakse uus klassi märksõna ja peate omama a konstruktor () meetod, mida kutsutakse, kui uut objekti kasutatakse uus myClass () süntaks. Samuti on võimalik uue klassi laiendada klass Laps laiendab vanemat süntaks, mis võib olla tuttav muudest objektorienteeritud keeltest nagu PHP. Samuti on oluline teada, et erinevalt funktsiooni- ja muutuvdeklaratsioonidest ei tõsteta klassi deklaratsioone ECMAScript 6-s.

 klass Polygon ehitaja (kõrgus, laius) // klassi konstruktor this.name = 'hulknurk'; see on kõrgus = kõrgus; this.width = laius;  sayName () // klassi meetod console.log ('Tere, ma olen', see.nimi + '.');  lase myPolygon = uus hulknurk (5, 6); console.log (myPolygon.sayName ()); // Tere, ma olen hulknurk.

Kood eespool ES6 viiulite näidetest, .

9. Moodulid

Kas olete kunagi mõelnud, kui lahe oleks, kui JavaScript oleks modulaarne? Loomulikult on selliseid lahendusi nagu CommonJS (mida kasutatakse Node.js'is) või AMD (asünkroonse mooduli määratlus) (mida kasutatakse RequireJS-is) selleks varem, kuid ES6 tutvustab mooduleid emakeelena.

Me peame iga mooduli oma failis määratlema, seejärel kasutama eksport märksõna muutujate ja funktsioonide eksportimiseks kuni muud failid ja import märksõna importimiseks alates muud failid vastavalt järgmisele süntaksile:

 // function.js funktsiooni kuubik (a) naasta * a * a;  funktsioon cubeRoot (a) return Math.cbrt (a);  eksportige cube, cubeRoot // või: eksportige cube as cb, cubeRoot as cr // app.js importige cube, cubeRoot 'funktsioonidest'; console.log (kuubik (4)); // 64 console.log (cubeRoot (125)); // 5

See lahendus on geniaalne, sest moodulis salvestatud kood on väljastpoolt nähtamatu ja me peame eksportima ainult osa, mida me soovime saada teiste failidega. Me saame teha ES6 moodulitega palju hämmastavamaid asju, siin on nende kohta suurepärane ja üksikasjalik selgitus.

10. Uute meetodite koormused

ECMAScript 6 tutvustab mitmeid uusi meetodeid olemasoleva String Prototype, Array Object, Array Prototype ja Math Object jaoks. Uued meetodid võivad oluliselt parandada nende üksuste manipuleerimise viisi. Mozilla Devil on suurepärased koodide näited uutest täiendustest, tasub aega võtta ja neid põhjalikult uurida.

Lihtsalt selleks, et näidata, kui lahe need tegelikult on, on siin minu lemmik: Array prototüübi leidmismeetod, mis võimaldab meil testida massiivi elementide teatud kriteeriume, rakendades iga elemendi tagasihelistamisfunktsiooni, seejärel tagastades esimese elemendi, mis naaseb tõsi.

 funktsioon isPrime (element, indeks, massiiv) var start = 2; samas (algus <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, ei leitud console.log ([4, 5, 8, 12] .find (isPrime)); // 5

Kood eespool: Mozilla Dev