ECMAScript 6 - 10 Awesome New Features
Vai zinājāt, ka JavaScript (kopā ar JScript un ActionScript) ir vispārējas nozīmes klientu puses skriptu valodas specifikācija, ko sauc par ECMAScript? Lai padarītu šo šķebinošo definīciju nedaudz pievilcīgāku, varam teikt, ka ECMAScript (vai oficiāli ECMA-262) ir standarts, kas nosaka, kā mēs izmantojam JavaScript, un to, ko mēs varam paveikt ar to.
Jaunākais, 6. izdevums valodai, ECMAScript 2015 (vai ES6), iespējams, ir visnozīmīgākais atjauninājums kopš pirmās versijas 1997. gadā. Jaunākās versijas galvenais mērķis ir nodrošināt labāku atbalstu, lai izveidotu lielākas lietojumprogrammas un bibliotēkas. Tas nozīmē vairāk nobriedušu sintaksi, jaunus īsceļus, lai atvieglotu kodēšanu, kā arī jaunas metodes, atslēgvārdus, datu tipus un daudzus citus uzlabojumus.
ES6 dokumentācija ir plaša, ja vēlaties lasīt daudz, jūs varat lejupielādēt visas specifikācijas no ECMA International tīmekļa vietnes. Šajā amatā mēs apskatīsim 10 izvēlētās funkcijas, lai gan ES6 ir daudz ko piedāvāt. Ja vēlaties to izmēģināt, ES6 Fiddle ir lieliska vieta, kur to izdarīt, un jūs varat arī atrast dažus koda fragmenta fragmentus.
Atbalsts ECMAScript 6
Pārlūkprogrammas pārdevēji pakāpeniski pievienoja atbalstu ECMAScript 6 funkcijām. Šeit varat atrast atdzist saderības tabulu par pārlūkprogrammu un kompilatoru atbalstu jaunajām funkcijām..
Ja jūs interesē ES6 atbalsts Node.js, pārbaudiet dokumentus šeit.
Lai gan ne visas funkcijas pašlaik tiek atbalstītas, mēs varam izmantot transpilatorus, piemēram, Babeli, lai pārraidītu ES6 kodu uz ES5. Babelam ir atdzist Grunt spraudnis, daudzi lieliski ES6 spraudņi Gruntam un pārsteidzošs Gulp-Babel spraudnis, tāpēc par laimi mums ir daudz izvēles.
Tādā veidā mēs varam sākt izmantot uzlaboto sintaksi un iespējas, bet mums nav jāuztraucas par sarežģītības problēmām. Tagad aplūkosim funkcijas.
1. Jauns ļaut Atslēgvārds
ES6 ievieš jaunu ļaut atslēgvārds, kas ļauj mums deklarēt lokālos mainīgos bloka darbības jomā, piemēram, paziņojumu, izteiksmi vai (n iekšējo) funkciju. Piemēram, mēs varam deklarēt a par cilpa šādā veidā, pēc tam atkārtoti izmanto to pašu mainīgo nosaukumu (jo tā darbības joma ir ierobežota ar par cilpa) ja paziņojums, apgalvojums:
par (ļaujiet i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Mēs atkārtoti izmantojam "i", lai i = x * y
Izmantojot ļaut atslēgvārds noved pie tīrāka un izmantojamāka koda. Starpība starp ļaut un var ir ietverts lokālais mainīgais, ko nosaka var atslēgvārdu var izmantot visā norobežojošajā funkcijā, kamēr mainīgie ir definēti ļaut darbojas tikai savā (apakš) blokā. Ļaujiet var izmantot arī visā pasaulē, šajā gadījumā tā darbojas tāpat kā var. Protams, ES6 mēs joprojām varam izmantot var ja mēs vēlamies.
2. Jauns const Atslēgvārds
Jauno const atslēgvārds ļauj deklarēt konstantes, kas pazīstamas arī kā nemainīgus mainīgos, kam mēs nevaram piešķirt jaunu saturu vēlāk.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; / / Klusa kļūda, jo mēs nevaram piešķirt jaunu vērtību konstantai
Tomēr ECMAScript 6 ne vienmēr ir nemainīgi mainīgie, jo, ja konstante satur objektu, mēs vēlāk varam mainīt tā īpašību un metožu vērtību. Tas pats attiecas uz masīva elementiem.
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
Mēs joprojām nevaram atkārtoti piešķirt jaunu vērtību MY_CONSTANT objektam iepriekš minētajā koda fragmentā, kas nozīmē, ka mēs nevaram mainīt īpašību un metožu nosaukumus, kā arī nevar pievienot jaunu vai dzēst esošo, tāpēc mēs nevaram darīt šāda lieta:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // kļūda
3. Bultas funkcijas
ECMAScript 6 atvieglo to, kā mēs rakstām anonīmas funkcijas, jo mēs varam pilnīgi izlaist funkciju atslēgvārdu. Mums tikai jāizmanto jaunā sintakse bultiņu funkcijas, nosaukts pēc => bultiņas (tauku bultiņa), kas nodrošina mums lielisku saīsni.
// 1. Viens parametrs ES6 ļauj summa = (a, b) => a + b; // in ES5 var sum = funkcija (a, b) return a + b; ; // 2. Bez parametriem ES6 ļaut randomNum = () => Math.random (); // in ES5 var randomNum = funkcija () return Math.random (); ; // 3. Bez atgriešanās ES6 ļaujiet ziņu = (nosaukums) => brīdinājums ("Hi" + nosaukums + "!"); // in ES5 var message = function (yourName) brīdinājums ("Hi" + yourName + "!"); ; Pastāv būtiska atšķirība starp regulārajām un bultiņu funkcijām, proti, bultiņu funkcijas nesaņem to vērtība automātiski līdzinās funkcijām, kas definētas ar funkciju atslēgvārds dara. Bultas funkcijas leksiski saistās the to vērtību pašreizējai darbības jomai. Tas nozīmē, ka mēs varam viegli atkārtoti izmantot to atslēgvārdu iekšējā funkcijā. ES5 tas ir iespējams tikai ar šādu hack:
// ES5 Hack izmantot "šo" atslēgvārdu iekšējā funkcijā … addAll: function addAll (gab.) Var self = this; _.izveidot (gabali, funkcija (gabals) self.add (gabals);); ,… // ES6 tā pati iekšējā funkcija tagad var izmantot savu "šo" … addAll: funkcija addAll (gab.) _.Each (gabali, gabals => this.add (gabals)); ,…
Iepriekš minētais kods ir no Mozilla Hacks
4. Jauns izplatīties Operators
Jauno izplatīties operators ir atzīmēts ar 3 punktiem (…), un mēs varam to izmantot, lai parakstītu vairāku sagaidāmo objektu vietu. Viens no izplatītākā operatora visbiežāk lietotajiem gadījumiem ir masīva elementu ievietošana citā blokā:
let myArray = [1, 2, 3]; let newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Mēs varam arī izmantot sviras efektu izplatīties operatoram funkciju zvanos, kuros mēs vēlamies nodot argumentus no masīva:
let myArray = [1, 2, 3]; funkciju summa (a, b, c) atgriezties a + b + c; console.log (summa (… myArray)); 6
The izplatīties operators ir diezgan elastīgs, jo to var izmantot vairākas reizes vienā un tajā pašā masīvā vai funkciju zvanā.
5. Parametru un jauno atpūtas parametru noklusējuma vērtības
Labas ziņas, ka ECMAScript 6 varam pievienot noklusējuma vērtības funkcijas parametriem. Tas nozīmē, ka, ja vēlāk neizdosim argumentus funkciju zvans, tiks izmantoti noklusējuma parametri. ES5 parametru noklusējuma vērtības vienmēr ir iestatītas uz nenoteikts, tātad jaunā iespēja tos uzstādīt neatkarīgi no tā, ko mēs vēlamies, ir lielisks valodas uzlabojums.
funkciju summa (a = 2, b = 4) atgriezties a + b; console.log (summa ()); // 6 konsole.log (summa (3, 6)); // 9
ES6 ievieš arī jauna veida parametru atpūtas parametri. Viņi izskatās un strādā līdzīgi izplatītajiem operatoriem. Viņi ir ērti, ja nezinām, cik daudz argumentu tiks nodoti vēlāk funkcijās. Mēs varam izmantot Array objekta īpašības un metodes uz atpūtas parametriem:
funkcija putInAlphabet (… args) let sorted = args.sort (); atgriezties sakārtoti; console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. Jauns par… Paziņojums, apgalvojums
Ar jaunā palīdzību par… cilpa mēs varam iterēt ar masīviem vai citiem iterable objektiem. Kopā ar jauno par… paziņojums, ECMAScript 6 ievieš arī divus jaunus iterable objektus, kartes atslēgu / vērtību kartēm un iestatiet unikālu vērtību kolekcijām, kas var būt arī primitīvas vērtības un objektu atsauces. Kad mēs izmantojam par… paziņojums, kods bloka iekšienē tiek izpildīts katram iterējamā objekta elementam.
let myArray = [1, 2, 3, 4, 5]; ļaujiet summa = 0; par (let i no myArray) sum + = i; console.log (summa); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Veidnes literārie
ECMAScript 6 piedāvā jaunu alternatīvu stīgu sakabināšanai. Veidņu literāti ļauj mums viegli izveidot veidnes, kurās mēs varam ievietot dažādas vērtības jebkurai vietai, kuru mēs vēlamies. Lai to izdarītu, mums ir jāizmanto $ … sintakse visur, kur mēs vēlamies ievietot datus, kurus varam nodot no mainīgajiem, blokiem vai objektiem šādā veidā:
let customer = title: 'Ms', vārds: 'Jane', uzvārds: 'Doe', vecums: '34'; let template = 'Dārgie $ customer.title $ customer.firstname $ customer.surname! Happy $ customer.age dzimšanas diena! ”; console.log (veidne); // Godātais kungs Jane Doe! Labi 34. dzimšanas diena!
8. Klases
ES6 iepazīstina ar JavaScript klasēm, kas veidotas, balstoties uz esošo prototipa mantojumu. Jaunā sintakse atvieglo objektu radīšanu, ņemt mantojuma sviras un atkārtoti izmantot kodu. Tas arī atvieglos iesācējiem, kas ierodas no citām programmēšanas valodām, saprast, kā darbojas JavaScript.
ES6 klasēs tiek deklarētas jaunās klasē atslēgvārdam un nepieciešams konstruktors () metodi, kas tiek saukta, kad jauns objekts tiek parādīts, izmantojot jauns myClass () sintakse. Ir iespējams arī paplašināt jaunas klases klase Bērns paplašina vecāku sintakse, kas var būt pazīstama no citām objektorientētām valodām, piemēram, PHP. Ir svarīgi arī zināt, ka atšķirībā no funkciju un mainīgo deklarāciju klases deklarācijas NAV paceltas ECMAScript 6.
klase Poligons konstruktors (augstums, platums) // klases konstruktors this.name = 'daudzstūris'; tas ir augstums = augstums; this.width = platums; sayName () // klases metode console.log ('Sveiki, es esmu a, šis.name +'. '); let myPolygon = jauns daudzstūris (5, 6); console.log (myPolygon.sayName ()); // Sveiki, es esmu daudzstūris. Kods iepriekš no ES6 Fiddle piemēriem, .
9. Moduļi
Vai esat kādreiz domājuši par to, cik foršs būtu, ja JavaScript būtu modulāra? Protams, ir bijuši tādi risinājumi kā CommonJS (ko izmanto Node.js) vai AMD (asinhronā moduļa definīcija) (ko izmanto pieprasījumā JS), lai to izdarītu agrāk, bet ES6 ievieš moduļus kā vietējo funkciju.
Mums ir jādefinē katrs modulis savā failā, pēc tam jāizmanto eksportēt atslēgvārdu, lai eksportētu mainīgos lielumus un funkcijas uz citus failus un importēt lai importētu tos no citi faili, saskaņā ar šādu sintaksi:
// funkcijas.js funkciju kubs (a) atgriezties * a * a; funkcija cubeRoot (a) return Math.cbrt (a); eksportēt cube, cubeRoot // vai: eksportēt kubu kā cb, cubeRoot kā cr // app.js importēt cube, cubeRoot no “funkcijas”; console.log (kubs (4)); // 64 console.log (cubeRoot (125)); 5
Šis risinājums ir izcils, jo modulī saglabātais kods ir neredzams no ārpuses, un mums ir jāeksportē tikai tā daļa, kuru mēs vēlamies piekļūt citiem failiem. Ar ES6 moduļiem mēs varam darīt daudz pārsteidzošākas lietas, šeit jūs varat atrast lielisku un detalizētu skaidrojumu par tiem.
10. Jaunas metodes
ECMAScript 6 ievieš daudzas jaunas metodes esošajai String Prototype, Array Object, Array Prototype un Math Object. Jaunās metodes var ievērojami uzlabot veidu, kā mēs varam manipulēt ar šīm vienībām. Mozilla Dev ir lielisks jauno papildinājumu koda piemērs, ir vērts ņemt laiku un rūpīgi pārbaudīt tos.
Vienkārši, lai parādītu, cik atdzist tie patiešām ir, šeit ir mans mīļākais: Array prototipa meklēšanas metode, kas ļauj pārbaudīt noteiktus kritērijus masīva elementiem, izpildot atzvanīšanas funkciju katrā elementā, pēc tam atgriežot pirmo elementu, kas atgriežas taisnība.
funkcija isPrime (elements, indekss, masīvs) var start = 2; kamēr (sāk <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // undefined, nav atrasts console.log ([4, 5, 8, 12] .find (isPrime)); 5
Kods iepriekš: Mozilla Dev
