ECMAScript 6 - 10 nuostabių naujų funkcijų
Ar žinote, kad „JavaScript“ (kartu su „JScript“ ir „ActionScript“) yra bendrosios paskirties kliento skriptų kalbos specifikacijos, vadinamos ECMAScript, įgyvendinimas? Kad šis bjaurus apibrėžimas būtų šiek tiek patrauklesnis, galime pasakyti, kad ECMAScript (arba oficialiai ECMA-262) yra standartas, kuris apibrėžia, kaip mes naudojame „JavaScript“ ir ką galime atlikti su tuo.
Naujausias 6-asis leidimas, ECMAScript 2015 (arba ES6), tikriausiai yra svarbiausias atnaujinimas nuo pirmosios versijos 1997 metais. Paskutinės versijos pagrindinis tikslas buvo suteikti geresnę paramą kuriant didesnes programas ir bibliotekas. Tai reiškia labiau subrendusią sintaksę, naujus sparčiuosius klavišus kodavimui palengvinti ir naujus metodus, raktinius žodžius, duomenų tipus ir daugelį kitų patobulinimų.
ES6 dokumentai yra išsamūs, jei norite skaityti daug, galite atsisiųsti visą specifikaciją iš ECMA International interneto svetainės. Šiame pranešime apžvelgsime 10 pasirinktų funkcijų, nors ES6 siūlo daug daugiau. Jei norite su juo eksperimentuoti, ES6 „Fiddle“ yra puiki vieta tai padaryti, taip pat galite rasti kai kuriuos kodo fragmentų fragmentus.
Parama ECMAScript 6
Naršyklės pardavėjai palaipsniui prisidėjo prie „ECMAScript 6“ funkcijų. Čia rasite vėsią suderinamumo lentelę apie naršyklės ir kompiliatoriaus palaikymą naujoms funkcijoms.
Jei Jus domina „ES6“ palaikymas „Node.js“, apsilankykite čia.
Nors ne visos funkcijos šiuo metu palaikomos, mes galime naudoti transpilerius, tokius kaip Babel, kad galėtume persiųsti ES6 kodą į ES5. Yra kietas „Grunt“ įskiepis „Babel“, daugybė nuostabių ES6 įskiepių „Grunt“ ir nuostabus „Gulp-Babel“ papildinys, todėl, laimei, turime daug pasirinkimų.
Tokiu būdu mes galime pradėti naudoti išplėstinę sintaksę ir galimybes, o mes neturime nerimauti dėl kompiliavimo problemų. Dabar pažiūrėkime funkcijas.
1. Naujas leisti Raktinis žodis
ES6 pristato naują leisti raktinis žodis, leidžiantis deklaruoti vietinius kintamuosius bloko srityje, pvz., pareiškimą, išraišką arba (n vidinę) funkciją. Pavyzdžiui, galime paskelbti a dėl toliau nurodytu būdu, tada pakartotinai naudokite tą patį kintamojo pavadinimą (kadangi jo taikymo sritis apsiriboja dėl kilpa) viduje jei pareiškimas:
už (tegul i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Mes pakartotinai naudojame „i“ leisti i = x * y
Naudojant leisti raktinis žodis veda prie švaresnio ir naudingesnio kodo. Skirtumas tarp leisti ir var yra taikymo sritis, pavyzdžiui, vietinis kintamasis, kurį apibrėžia var raktinis žodis gali būti naudojamas visai uždarymo funkcijai, o kintamieji, apibrėžti leisti veikia tik savo (sub) bloke. Leisti taip pat gali būti naudojamas visame pasaulyje, šiuo atveju jis elgiasi taip pat kaip ir var. Žinoma, ES6 mes vis dar galime naudoti var jei norime.
2. Naujas const Raktinis žodis
Nauja const raktinis žodis leidžia deklaruoti konstantas, dar vadinamas nekintamaisiais kintamaisiais, į kuriuos vėliau negalime priskirti naujo turinio.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Tyli klaida, nes negalime perduoti naujos reikšmės į konstantą
Neįmanoma keisti kintamieji ECMAScript 6 vis dar nėra visiškai pakitę, nes, jei konstanta turi objektą, vėliau galime pakeisti jo savybių ir metodų vertę. Tas pats pasakytina ir apie masyvo elementus.
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
Mes vis dar negalime tiesiogiai perduoti naujos vertės į MY_CONSTANT objektą aukščiau pateiktame kodo fragmente, o tai reiškia, kad negalime pakeisti savybių ir metodų pavadinimų, taip pat negalime pridėti naujo ar ištrinti esamo, todėl negalime padaryti šis dalykas:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // klaida
3. Rodyklės funkcijos
ECMAScript 6 palengvina tai, kaip mes rašome anonimines funkcijas, kaip mes galime visiškai praleisti funkcija raktinis žodis. Mums reikia naudoti tik naują sintaksę rodyklės funkcijos, pavadintas => rodyklės ženklu (riebalų rodyklė), kuris suteikia mums puikų nuorodą.
// 1. Vienas ES6 parametras leidžia sumą = (a, b) => a + b; // į ES5 var sum = function (a, b) return a + b; ; // 2. Be parametrų ES6 leiskite randomNum = () => Math.random (); // in ES5 var randomNum = funkcija () return Math.random (); ; // 3. Be grįžimo į ES6 tegul message = (name) => įspėjimas ("Hi" + pavadinimas + "!"); // in ES5 var message = function (yourName) įspėjimas ("Hi" + yourName + "!"); ; Yra reikšmingas skirtumas tarp įprastinių ir rodyklių funkcijų, ty rodyklės funkcijos negauna tai vertė automatiškai prilygsta funkcijoms, apibrėžtoms funkcija raktinis žodis. Rodyklės funkcijos leksiškai susieti tai vertę pagal dabartinę taikymo sritį. Tai reiškia, kad mes galime lengvai panaudoti tai raktinis žodis vidinėje funkcijoje. ES5 atveju tai įmanoma tik tada, kai:
// ES5 Hack naudoti „šį“ raktinį žodį vidinėje funkcijoje … addAll: function addAll (vienetų) var self = this; _.kamba (gabalai, funkcija (gabalas) self.add (gabalas);); ,… // ES6 toje pačioje vidinėje funkcijoje dabar galima naudoti savo „šį“ … addAll: funkcija addAll (vienetai) _.each (vienetai, gabalas => this.add (gabalas)); ,…
Aukščiau pateiktas kodas yra iš „Mozilla Hacks“
4. Nauja išplito operatorius
Nauja išplito operatorius pažymėtas 3 taškais (…), ir mes galime jį naudoti, kad pasirašytume kelis tikėtinus elementus. Vienas iš dažniausiai naudojamų plitimo operatoriaus atvejų yra masyvo elementų įterpimas į kitą masyvą:
tegul myArray = [1, 2, 3]; tegul newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
Taip pat galime pasinaudoti svertu išplito operatorius funkcijų skambučiuose, kuriuose norime perduoti argumentus iš masyvo:
tegul myArray = [1, 2, 3]; funkcijų suma (a, b, c) grįžti a + b + c; console.log (suma (… myArray)); // 6
The išplito operatorius yra gana lankstus, nes jis gali būti naudojamas kelis kartus tame pačiame masyvo arba funkcijų skambutyje.
5. Numatytosios parametrų ir naujų poilsio parametrų vertės
Geros naujienos, kad ECMAScript 6 galime pridėti numatytųjų reikšmių funkcijai. Tai reiškia, kad jei funkcijų skambutyje vėliau nepateikiame argumentų, bus naudojami numatytieji parametrai. ES5 visada yra numatytos parametrų reikšmės neapibrėžtas, taigi nauja galimybė nustatyti juos bet kokiam, ko norime, yra puikus kalbos tobulinimas.
funkcijos suma (a = 2, b = 4) return a + b; console.log (suma ()); // 6 konsolės.log (suma (3, 6)); // 9
ES6 taip pat pristato naują tipo parametrą poilsio parametrai. Jie atrodo ir veikia panašiai kaip platintojai. Jie yra patogūs, jei nežinome, kiek argumentų bus perduoti vėliau funkcijų skambutyje. Mes galime naudoti „Array“ objekto savybes ir metodus poilsio parametrais:
funkcija putInAlphabet (… args) let sorted = args.sort (); grąžinti rūšiuojami; console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. Naujas už… Pareiškimas
Naujojo pagalba už… kontūro, mes galime lengvai kartoti masyvus ar kitus iterable objektus. Kartu su nauja už… „ECMAScript 6“ pristato du naujus iterable objektus, „Key for value / value maps“ ir „Set for unikalų reikšmių rinkinius, kurie taip pat gali būti primityvios reikšmės ir objektų nuorodos“. Kai mes naudojame už… pareiškimas, kodas bloko viduje yra atliekamas kiekvienam iterable objekto elementui.
tegul myArray = [1, 2, 3, 4, 5]; tegul suma = 0; už (leiskite i iš myArray) sum + = i; console.log (suma); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Šablonų rašmenys
ECMAScript 6 suteikia mums naują alternatyvą styginių susietimui. Šablonų literatūra leiskite mums lengvai sukurti šablonus, kuriuose mes galime įdėti skirtingas vertes į bet kurią norimą vietą. Norėdami tai padaryti, turime naudoti $ … sintaksė visur, kur norime įterpti duomenis, kuriuos galime perduoti iš kintamųjų, masyvų ar objektų, taip:
let customer = title: „Ms“, vardas: „Jane“, pavardė: „Doe“, amžius: „34“; let template = 'Gerb. $ customer.title $ customer.firstname $ customer.surname! Laimingas $ customer.age gimtadienis! “; console.log (šablonas); // Gerb. Jane Doe! Laimingas 34-asis gimtadienis!
8. Klasės
ES6 pristato JavaScript klases, kurios yra sukurtos remiantis esamu prototipo paveldu. Nauja sintaksė leidžia lengviau kurti objektus, imtis paveldėjimo ir pakartotinio kodo. Taip pat bus lengviau pradedantiesiems, atvykstantiems iš kitų programavimo kalbų, suprasti, kaip veikia „JavaScript“.
ES6 klasėse skelbiama nauja klasė raktinis žodis ir turi turėti konstruktorius () metodas, kuris vadinamas nauju objektu, naudojant naujas „myClass“ () sintaksė. Taip pat galima išplėsti naujas pamokas klasė vaikas tęsia tėvą sintaksė, kuri gali būti pažįstama iš kitų objektų orientuotų kalbų, tokių kaip PHP. Taip pat svarbu žinoti, kad, skirtingai nuo funkcijų ir kintamųjų deklaracijų, klasės deklaracijos NEKILNOJAMOS ECMAScript 6.
klasės poligonas konstruktorius (aukštis, plotis) // klasės konstruktorius this.name = 'daugiakampis'; tai. aukštis = aukštis; this.width = plotis; sayName () // klasės metodas console.log ('Labas, aš esu', tai.name + '.'); tegul myPolygon = naujas daugiakampis (5, 6); console.log (myPolygon.sayName ()); // Sveiki, aš esu daugiakampis. Kodas aukščiau iš ES6 paslapčių pavyzdžių, .
9. Moduliai
Ar kada nors susimąstėte, kaip vėsioje būtų, jei „JavaScript“ būtų modulinė? Žinoma, buvo atlikti tokie sprendimai, kaip CommonJS (naudojama Node.js) arba AMD (asinchroninio modulio apibrėžimas) (naudojama „RequireJS“), kad tai atliktumėte anksčiau, tačiau ES6 įveda modulius kaip vietinę funkciją.
Turime apibrėžti kiekvieną modulį savo faile, tada naudoti eksportuoti raktinis žodis, skirtas eksportuoti kintamuosius ir funkcijas į kiti failai ir importuoti raktinis žodis, kad juos importuotumėte nuo kiti failai, pagal šią sintaksę:
// function.js funkcijos kubas (a) grąžinti * a * a; funkcija cubeRoot (a) return Math.cbrt (a); eksportuoti cube, cubeRoot // arba: eksportuoti cube kaip cb, cubeRoot kaip cr // app.js importuoti cube, cubeRoot iš „funkcijų“; console.log (kubas (4)); // 64 console.log (cubeRoot (125)); // 5
Šis sprendimas yra puikus, nes modulyje saugomas kodas yra nematomas iš išorės, ir mes turime eksportuoti tik tą dalį, kurią norime pasiekti kitais failais. Su ES6 moduliais galime padaryti daug daugiau nuostabių dalykų, čia galite rasti puikų ir išsamų jų paaiškinimą.
10. Naujų metodų apkrovos
ECMAScript 6 pristato daug naujų metodų esamam Styginių prototipui, „Array Object“, „Array Prototype“ ir „Math Object“. Nauji metodai gali žymiai pagerinti būdą, kaip galime manipuliuoti šiais subjektais. „Mozilla Dev“ turi puikių naujų papildymų kodų pavyzdžių, verta apsvarstyti laiko ir kruopščiai juos išnagrinėti.
Tiesiog norėdami parodyti, kaip gerai jie yra, čia yra mano mėgstamiausia: „Array“ prototipo paieškos metodas, leidžiantis mums išbandyti tam tikrus masyvo elementų kriterijus, atlikdami kiekvieno elemento atgalinio ryšio funkciją, tada grąžinant pirmąjį elementą, kuris grąžina tiesa.
funkcija isPrime (elementas, indeksas, masyvas) var start = 2; o (pradėti) <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // neapibrėžta, nerasta console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Kodas aukščiau: Mozilla Dev
