ebben a bemutatóban megtudhatja az új funkciók legújabb verzióját JavaScript.
what is ECMAScript 6 (or ES6)
ECMAScript 2015 (or ES6) is the sixth and major edition of the ECMAScript language specification standard. Meghatározza a JavaScript implementáció szabványát.
az ES6 jelentős változásokat hozott a JavaScript nyelvben., Bevezet több új funkciók, mint például, blokk-távcsöves változók, új hurok a iterációjával tömbök, objektumok, sablon közvetlen használata erősen kerülendő, valamint számos egyéb tartozékok, hogy a JavaScript programozási könnyebb, szórakoztatóbb. Ebben a fejezetben megvitatjuk a legjobb ES6 funkciókat, amelyeket a mindennapi JavaScript kódolásban használhat.
A let kulcsszó
ES6 bemutatja az új let kulcsszót a változók deklarálásához. Az ES6 előtt egy változó JavaScript-ben történő deklarálásának egyetlen módja a var kulcsszó volt., Lássuk, mi a különbség közöttük.
két kritikus különbség van avar ésletközött. A var kulcsszóval deklarált változók függvény-hatókörűek, és a hatókörén belül a felső részbe kerülnek, míg a let kulcsszóval deklarált változók blokk-hatókörűek ({}), és nem kerülnek felsorolásra.
Block scoping egyszerűen azt jelenti, hogy egy új hatókör jön létre egy pár göndör zárójelben, azaz {}., Ezért, ha kijelentem, hogy egy változó a let kulcsszó be a résbe, nem létezik kívül a hurok, amint azt a következő példa:
Mint látható, a fenti példa a változó i az első blokk nem elérhető kívül a for hurok. Ez lehetővé teszi számunkra, hogy ugyanazt a változó nevet többször is újra felhasználjuk, mivel hatóköre a blokkra korlátozódik ({}), ami kevesebb változó deklarációt és tisztább kódot eredményez.,
A const kulcsszó
az új const kulcsszó lehetővé teszi az állandók meghatározását. Az állandók csak olvashatók, nem lehet új értékeket hozzárendelni hozzájuk. Ezek is blokk-scoped, mint a let.
példa
próbálja ki ezt a kódot “
const PI = 3.14;console.log(PI); // 3.14PI = 10; // errorazonban továbbra is megváltoztathatja az objektum tulajdonságait vagy tömb elemeit:
A for…a Loop
az új for...of hurok lehetővé teszi számunkra, hogy iterálja át tömbök vagy más iterálható objektumok nagyon könnyen., Ezenkívül a hurok belsejében lévő kódot az iterable objektum minden elemére végrehajtják. Íme egy példa:
a for...of hurok nem működik az objektumokkal, mert nem iterable. Ha egy objektum tulajdonságait szeretné megismételni, használhatja afor-in hurkot.
sablon Literals
sablon literals egy egyszerű és tiszta módon létre többsoros húrok és végre string interpoláció. Most már beágyazni változók vagy kifejezések egy string bármely helyszínen gond nélkül.,
sablon literals jönnek létre back-tick (` `) (grave accent) karakter helyett a szokásos kettős vagy egyetlen idézetek. A változók vagy kifejezések a ${...} szintaxis segítségével helyezhetők el a karakterláncban. Hasonlítsa össze a következő példákat, és nézze meg, mennyire hasznos:
míg az ES5-ben ugyanezt kellett írnunk:
alapértelmezett értékek a
Függvényparaméterekhez most az ES6-ban megadhatja az alapértelmezett értékeket a funkcióparaméterekhez., Ez azt jelenti, hogy ha nincs argumentum a funkcióhoz, amikor ezeket az alapértelmezett paraméterek értékeit használják. Ez a JavaScript egyik leginkább várt funkciója. Íme egy példa:
míg az ES5-ben ugyanezt kellett írni:
Nyílfüggvények
a Nyílfüggvények egy másik érdekes funkció az ES6-ban. Tömörebb szintaxist biztosít a függvénykifejezések írásához a function és return kulcsszavak kiválasztásával.,
A Nyílfüggvényeket egy új szintaxis, a fat arrow (=>) jelöléssel definiáljuk. Lássuk, hogyan néz ki:
amint láthatja, a thre nem function és return kulcsszó a nyíl funkciónyilatkozatban.
kihagyhatja a zárójeleket is, azaz () abban az esetben, ha pontosan egy paraméter van, de mindig akkor kell használni, ha nulla vagy több paraméter van.,
Továbbá, ha egynél több kifejezés van a funkciótestben, akkor be kell csomagolnia zárójelek ({}). Ebben az esetben a return nyilatkozatot is használnia kell egy érték visszaadásához.
a nyílfüggvények írásának számos változata létezik. Itt vannak a leggyakrabban használt:
fontos különbség van a szabályos függvények és a nyílfüggvények között., A normál függvénytől eltérően a nyílfüggvénynek nincs saját this, a külső függvényből, ahol meg van határozva, this. A JavaScript-ben a this egy függvény aktuális végrehajtási kontextusa.,
ahhoz, Hogy megértsük ezt egyértelműen, nézzük meg a következő példát:
Átírása ugyanez a példa segítségével ES6 sablon közvetlen használata erősen kerülendő, illetve nyíl funkció:
Mint az világosan látható, hogy a this kulcsszó a fenti példa utal az összefüggésben, hogy a funkció mellékelve a nyíl funkció, amely Személy, objektum (vonal-9), ellentétben a korábbi példa, ahol van, hogy az említett globális objektum Ablak (vonal-9).
az ECMAScript 5-ben és korábban az osztályok soha nem léteztek JavaScript-ben., Az osztályokat az ES6-ban vezetik be, amely hasonlít más objektumorientált nyelvek osztályaihoz, például Java, PHP stb., azonban nem működnek pontosan ugyanúgy. Az ES6 osztályok megkönnyítik az objektumok létrehozását, az öröklést a extends kulcsszó használatával valósítják meg, majd újra felhasználják a kódot.
az ES6-ban deklarálhat egy osztályt az új class kulcsszóval, amelyet egy osztálynév követ. Konvenció szerint az osztálynevek TitleCase-ben vannak írva (azaz az egyes szavak első betűjének kapitalizálása).,
a fenti példában a Négyzetosztály örökli a téglalapot a extends kulcsszóval. Az osztályokat, amelyek más osztályoktól örökölnek, származtatott osztályoknak vagy gyermekosztályoknak nevezik.
is, meg kell hívni super() a gyermek osztály konstruktor elérése előtt a kontextus (this)., Például, ha kihagyja asuper() és hívja agetArea() módszer négyzet objektum ez hibát eredményez, mivelgetArea() módszer hozzáférést igényel athis kulcsszó.
megjegyzés: a függvénynyilatkozatokkal ellentétben az osztály deklarációkat nem emelik fel. Az osztály deklarációk a temporális dead zónában (TDZ) vannak, amíg a végrehajtás el nem éri az osztály deklaráció pontját, hasonlóan a let és const deklarációkhoz., Ezért a hozzáférés előtt deklarálnia kell az osztályát, különben ReferenceError fog bekövetkezni.
modulok
az ES6 előtt nem volt natív támogatás a modulok számára a JavaScriptben. A JavaScript alkalmazáson belül minden, például a különböző JavaScript fájlok változói, ugyanazt a hatókört osztották meg.
az ES6 fájl alapú modult vezet be, amelyben minden modult külön .js fájl képvisel., Most használhatja aexport vagyimport nyilatkozatot egy modulban változók, funkciók, osztályok vagy bármely más egység exportálására vagy importálására más modulokból vagy fájlokból.
hozzunk létre egy modult, azaz egy JavaScript fájlt ” main.js “helyezze be a következő kódot:
most hozzon létre egy másik JavaScript fájlt” app.js “a következő kóddal:
végül hozzon létre egy HTML fájlt” teszt.html”, valamint a következő kódot, majd nyissa meg ezt a HTML fájlt a böngészőben HTTP protokoll (vagy használja localhost). Szintén észre atype="module" a script tag.,
A többi paraméter
ES6 rest paramétereket vezet be, amelyek lehetővé teszik számunkra, hogy tetszőleges számú paramétert továbbítsunk egy függvénynek tömb formájában. Ez különösen hasznos olyan helyzetekben, amikor paramétereket szeretne átadni egy funkciónak, de fogalma sincs, hogy hányra lesz szüksége.
a rest paramétert úgy határozzuk meg, hogy egy megnevezett paramétert rest operátorral (...), azaz három ponttal. A Rest paraméter csak az utolsó lehet a paraméterek listájában, csak egy rest paraméter lehet., Vessen egy pillantást a következő példa, hogy lásd, hogyan működik:
Ha a többi paraméter a paraméter csak egy funkció, ez lesz az érvek telt el, hogy a funkció, különben ez lesz a többi érv, amely meghaladja a száma, neve paraméterek.
Megjegyzés: Ne keverje össze a rest paraméterek kifejezést a többivel (Reprezentációs Állapotátvitel). Ennek semmi köze a nyugodt webes szolgáltatásokhoz.,
A Spread operátor
a spread operátor, amelyet szintén jelöl (...), elvégzi a rest operátor pontos ellentétes funkcióját. A spread operátor szétterít egy tömböt, és az értékeket a megadott függvénybe továbbítja, amint az a következő példában látható:
a spread operátor egy tömb elemeinek egy másik tömbbe történő beillesztésére is használható, anélkül, hogy a push(), unshift() concat() stb.,
Destructuring hozzárendelés
a destructuring hozzárendelés olyan kifejezés, amely megkönnyíti az értékek kivonását tömbökből vagy objektumokból, különálló változókká, rövidebb szintaxis biztosításával.
kétféle destruktív hozzárendelési kifejezés létezik—a tömb és az objektum destructuring hozzárendelés.,nem ugyanaz a dolog, csak egy vonal segítségével az array destructuring feladat:
is lehet használni a többi üzemeltető a tömb destructuring feladat, amint az itt látható:
A tárgy destructuring feladatot
A ES5 kivonat az ingatlan értékét egy tárgyat kell írni, hogy valami ilyesmi:
De ES6, kivonat objektum tulajdonság értékek hozzárendelése őket, hogy a változók könnyen, mint ez:
a Legtöbb funkció már fent tárgyalt támogatja a legújabb verzió a főbb böngészők, mint a Google Chrome, Mozilla Firefox, Microsoft Szélén, Safari, stb.,