ECMAScript 6 - 10 Nove funkcije

Ali ste vedeli, da je JavaScript (skupaj z JScript in ActionScript) izvedba splošne specifikacije skriptnega jezika na strani odjemalca, imenovane ECMAScript? Da bi bila ta neprijetna definicija nekoliko privlačnejša, lahko rečemo, da je ECMAScript (ali uradno ECMA-262) standard, ki določa, kako uporabljamo JavaScript in kaj lahko dosežemo z njim.

Najnovejša, 6. izdaja jezika, ECMAScript 2015 (ali ES6) je verjetno najpomembnejša posodobitev od prve različice leta 1997. Glavni cilj zadnje izdaje je bil zagotoviti boljšo podporo za ustvarjanje večjih aplikacij in knjižnic. To pomeni bolj zrelo sintakso, nove bližnjice za lažje kodiranje in nove metode, ključne besede, vrste podatkov in številne druge izboljšave..

Dokumentacija ES6 je obsežna, če želite prebrati veliko, lahko prenesete celotne specifikacije s spletne strani ECMA International. V tem prispevku si bomo ogledali 10 izbranih funkcij, čeprav ima ES6 še veliko več. Če želite eksperimentirati z njo, je ES6 Fiddle odličen kraj za to in tam lahko najdete tudi nekaj vzorčnih kodnih odrezkov..

Podpora za ECMAScript 6

Proizvajalci brskalnikov postopoma dodajajo podporo funkcijam ECMAScripta 6. Tu lahko najdete kul tabelo združljivosti za podporo brskalnika in prevajalnika za nove funkcije.

Če vas zanima podpora za ES6 v Node.js, poglejte dokumente tukaj.

Čeprav vse funkcije trenutno niso podprte, lahko uporabimo transpilerje, kot je Babel, da prekrižemo našo kodo ES6 na ES5. Obstaja krasen Gruntov vtičnik za Babel, veliko čudovitih vtičnikov ES6 za Grunt in neverjeten Gulp-Babel vtičnik, tako da na srečo imamo veliko možnosti..

Na ta način lahko začnemo uporabljati izboljšano sintakso in zmožnosti, medtem ko ni treba skrbeti za težave s kompatibilnostjo. Zdaj pa si oglejmo funkcije.

1. Novo let Ključna beseda

ES6 uvaja novo let ključna beseda, ki nam omogoča, da razglasimo lokalne spremenljivke v obsegu bloka, kot so stavek, izraz ali (n notranja) funkcija. Na primer lahko razglasimo a za zanke na naslednji način, nato pa ponovno uporabite isto ime spremenljivke (ker je njeno področje omejeno na za zanke) znotraj naslednjega če izjava:

 za (let i = 0; i < myArray.length; i++)  // Do something inside the block  if (x > 0 & & x! = Y) // Ponovno uporabljamo "i" in i = x * y

Uporabljati let ključna beseda vodi do čistejše in uporabnejše kode. Razlika med let in var je v obsegu, na primer lokalna spremenljivka, ki jo definira var ključna beseda se lahko uporablja v celotni funkciji zajema, medtem ko spremenljivke definira let deluje samo v svojem (pod) bloku. Let lahko uporabljamo tudi globalno, v tem primeru se obnaša na enak način kot var. Seveda lahko v ES6 še vedno uporabljamo var če hočemo.

2. Novo const Ključna beseda

Novi const ključna beseda omogoča razglasitev konstant, znanih tudi kot nespremenljive spremenljivke, na katere ne moremo kasneje prenesti nove vsebine.

 const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Tiha napaka, ker nove vrednosti ne moremo dodeliti konstanti

Nepromenljive spremenljivke v ECMAScript 6 niso vedno povsem nespremenljive, čeprav, kot če ima konstanta objekt, lahko kasneje spremenimo vrednost njegovih lastnosti in metod. Enako velja za elemente matrike.

 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. \ t

Še vedno ne moremo neposredno prenesti nove vrednosti na objekt MY_CONSTANT v zgornjem odlomku kode, kar pomeni, da ne moremo spremeniti imen lastnosti in metod, prav tako ne moremo dodati novega ali izbrisati obstoječega, zato ne moremo storiti naslednja stvar:

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

3. Funkcije puščic

ECMAScript 6 olajša pisanje anonimne funkcije, ker lahko popolnoma izpustimo funkcijo ključno besedo. Potrebujemo samo novo sintakso za funkcije puščic, imenovan po znaku => puščica (maščobna puščica), ki nam omogoča veliko bližnjico.

 1. En parameter v ES6 pusti sum = (a, b) => a + b; // v ES5 var sum = funkcija (a, b) return a + b; ; // 2. Brez parametrov v ES6 naj slučajNum = () => Math.random (); // v ES5 var randomNum = function () return Math.random (); ; // 3. Brez vrnitve v ES6 pustite sporočilo = (ime) => opozorilo ("Hi" + name + "!"); // v ES5 var sporočilo = funkcija (yourName) alert ("Hi" + yourName + "!"); ;

Obstaja pomembna razlika med običajnimi in puščičnimi funkcijami, kar pomeni, da funkcije puščic ne sprejemajo a to vrednosti, kot so funkcije, določene z funkcijo ključne besede. Funkcije puščic leksično to vrednost trenutnega obsega. To pomeni, da lahko zlahka ponovno uporabimo to ključno besedo v notranji funkciji. V ES5 je to možno le z naslednjim vlomom:

 // ES5 Hack uporabiti "to" ključno besedo v notranji funkciji ... addAll: function addAll (pieces) var self = this; _.each (kosi, funkcija (kos) self.add (piece);); ,… // ES6 ista notranja funkcija lahko sedaj uporablja svojo lastno "to" … addAll: funkcijo addAll (kose) _.each (kose, kos => this.add (kos)); ,…

Zgornja koda je iz Mozilla Hacks

4. Novo širjenja Operater

Novi širjenja operator je označen s tremi pikami (…) in ga lahko uporabimo za podpis mesta več pričakovanih elementov. Eden od najpogostejših primerov uporabe operaterja širjenja je vstavljanje elementov matrike v drugo polje:

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

Lahko vzamemo tudi vzvod širjenja operater v klicih funkcij, v katerem želimo posredovati argumente iz matrike:

 naj myArray = [1, 2, 3]; funkcija sum (a, b, c) vrne a + b + c;  console.log (vsota (… myArray)); 6

The širjenja operater je precej prilagodljiv, saj ga lahko uporabite večkrat v istem polju ali klicu funkcije.

5. Privzete vrednosti za parametre in nove parametre za počitek

Dobra novica je, da lahko v ECMAScript 6 parametrom funkcije dodamo privzete vrednosti. To pomeni, da če poznejših argumentov v funkcijskem klicu ne bomo posredovali, bodo uporabljeni privzeti parametri. V ES5 so privzete vrednosti parametrov vedno nastavljene na nedoločeno, zato je nova možnost, da jih postavimo na tisto, kar hočemo, zagotovo velika izboljšava jezika.

 funkcija sum (a = 2, b = 4) return a + b;  console.log (sum ()); // 6 console.log (vsota (3, 6)); 9

ES6 uvaja tudi novo vrsto parametra parametri počitka. Izgledajo in delujejo podobno kot širjenje operaterjev. Pridejo priročno, če ne vemo, koliko argumentov bomo posredovali pozneje v klicu funkcije. Lastnosti in metode objekta Array lahko uporabimo v parametrih za počitek:

 funkcija putInAlphabet (… args) naj sorted = args.sort (); vrnitev razvrščena;  console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); a, c, c, e, i, m, p, r, s, t

6. Novo za… od Izjava

S pomočjo novega za… od zanke lahko preprosto ponavljamo po nizih ali drugih iterabilnih predmetih. Skupaj z novim za… od Izjava ECMAScript 6 uvaja tudi dva nova ponovljiva predmeta, Map za zemljevide ključ / vrednost in Set za zbirke edinstvenih vrednosti, ki so lahko tudi primitivne vrednosti in reference objektov. Ko uporabimo za… od stavek, se koda znotraj bloka izvede za vsak element iterabilnega objekta.

 naj myArray = [1, 2, 3, 4, 5]; naj vsota = 0; za (let i myArray) sum + = i;  console.log (vsota); // 15 (= 1 + 2 + 3 + 4 + 5)

7. Template Literals

ECMAScript 6 nam daje novo alternativo za povezovanje nizov. Literal za predloge nam omogočite, da enostavno ustvarimo predloge, v katere lahko vstavimo različne vrednosti na katerokoli mesto, ki ga želimo. Za to moramo uporabiti $ … sintaksa povsod, kjer želimo vstaviti podatke, ki jih lahko prenesemo iz spremenljivk, nizov ali objektov na naslednji način:

 naj kupec = naslov: 'Ms', ime: 'Jane', priimek: 'Doe', starost: '34'; let template = 'Spoštovani $ customer.title $ customer.firstname $ customer.surname! Vesel rojstni dan $ customer.age! '; console.log (predlogo); // Draga gospa Jane Doe! Vesel 34. rojstni dan!

8. Razredi

ES6 uvaja razrede JavaScript, ki so zgrajeni na obstoječem podedovanju, ki temelji na prototipu. Zaradi nove sintakse je lažje ustvarjati objekte, vzeti vzvod dedovanja in ponovno uporabiti kodo. To bo tudi olajšalo začetnike, ki prihajajo iz drugih programskih jezikov, da bodo razumeli, kako JavaScript deluje.

V ES6 so razredi prijavljeni z novim razred ključno besedo in potrebujete a konstruktor () metoda, ki se kliče, ko se z uporabo novega objekta ustvari novo myClass () skladnjo. Možno je tudi razširiti nove razrede z razred otrok razširja staršev sintaksa, ki je znana iz drugih objektno usmerjenih jezikov, kot je PHP. Prav tako je pomembno vedeti, da v nasprotju z deklaracijami funkcij in spremenljivk deklaracije razredov NISO dvignjene v ECMAScript 6.

 razred Polygon konstruktor (height, width) // konstruktor razreda this.name = 'Polygon'; this.height = višina; this.width = width;  sayName () // metoda razreda class console.log ('Hi, jaz sem', this.name + '.');  naj myPolygon = novi poligon (5, 6); console.log (myPolygon.sayName ()); // Živjo, jaz sem Poligon.

Oznaka zgoraj iz ES6 Fiddle Primeri, .

9. Moduli

Ste se kdaj spraševali, kako kul je, če bi bil JavaScript modularen? Seveda je prišlo do zaobitja, kot sta CommonJS (uporabljen v Node.js) ali AMD (Asynchronous Module Definition) (uporabljen v RequireJS), vendar ES6 uvaja module kot izvorno funkcijo.

Vsak modul moramo definirati v lastni datoteki, nato uporabiti izvoz za izvoz spremenljivk in funkcij do druge datoteke in uvoz ključne besede, da jih uvozite od druge datoteke v skladu z naslednjo skladnjo:

 // functions.js funkcija kocka (a) vrne a * a * a;  funkcija cubeRoot (a) return Math.cbrt (a);  izvoz kocka, cubeRoot // ali: izvoz kocka kot cb, cubeRoot kot cr // app.js uvoz kocke, kockeRoot iz 'funkcije'; console.log (kocka (4)); // 64 console.log (cubeRoot (125)); 5

Ta rešitev je briljantna, saj je koda, shranjena v modulu, nevidna od zunaj, mi pa moramo izvoziti samo tisti del, do katerega želimo dostopati z drugimi datotekami. Z moduli ES6 lahko naredimo veliko bolj neverjetne stvari, tukaj lahko najdete veliko in podrobno razlago o njih.

10. Obremenitve novih metod

ECMAScript 6 uvaja številne nove metode za obstoječi String Prototype, Array Object, Array Prototype in Math Object. Nove metode lahko bistveno izboljšajo način, kako lahko manipuliramo s temi entitetami. Mozilla Dev ima odlične primere kodiranja novih dodatkov, vredno je vzeti čas in jih temeljito preučiti.

Samo, da pokažem, kako res so res, tukaj je moj najljubši: najti metodo prototipa Array, ki nam omogoča testiranje določenih kriterijev na elemente matrike z izvajanjem funkcije povratnega klica na vsak element, nato pa vrne prvi element, ki vrne prav.

 funkcija isPrime (element, indeks, matrika) var start = 2; (začetek <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1;  console.log ([4, 6, 8, 12]. iskanje (isPrime)); // undefined, not found console.log ([4, 5, 8, 12] .find (isPrime)); 5

Zgornja koda iz: Mozilla Dev