Az ECMAScript 6 (ES6) funkciókat fel lehet osztani olyan tulajdonságokra, amelyek tiszta szintaktikus cukor (például: osztály ), a JavaScriptet javító funkciókra (például import ) és a JavaScript egyes „rossz” részeit (például a let kulcsszót) javító funkciókra oszthatók . A legtöbb blog és cikk mindhárom típust ötvözi, és elboríthatja az újonnan érkezőket. Tehát ezt a bejegyzést írom, amely csak az ES6 legfontosabb jellemzőire összpontosít, amelyek kijavítják a „rossz” részeket.
Remélem, hogy a blog végére rájön, hogy csak néhány ES6 funkció, például a let és a fat-arrow használatával hatalmas hozamot érhet el.Rendben, kezdjük.
1. Blokk hatálya
Az ES5-nek csak „függvényszintű hatóköre” volt (vagyis a kódot a függvények létrehozásához függvényekbe csomagolja), és sok problémát okozott. Az ES6 „blokk” -szintű skálázást biztosít (azaz a göndör zárójeleket a hatókörhöz), amikor a „ let ” vagy „ const ” szót használjuk a „ var ” helyett .
A változó emelés megakadályozása a hatókörön kívül
Az alábbi kép azt mutatja, hogy a „bónusz” változót nem emelik fel az „if” blokkon kívül, így a legtöbb programozási nyelv működik.
Megjegyzés: Kattintson a képekre a nagyításhoz és az olvasáshoz
Akadályozza meg a duplikált változó deklarációt
Az ES6 nem engedélyezi a változók duplikált deklarálását, ha deklaráljuk őket ugyanazon hatókörben a „let” vagy „const” használatával . Ez nagyon hasznos a különböző könyvtárakból származó ismétlődő függvény-kifejezések elkerülése érdekében (például az alábbi „add” függvény-kifejezés).
Megszünteti az IIFE szükségességét
Az ES5-ben az alábbihoz hasonló esetekben azonnali hívott funkciókifejezést (IIFE) kellett használnunk annak biztosítására, hogy ne szennyezzük és ne írjuk felül a globális hatókört. A ES6 tudjuk csak használni kapcsos zárójelek ({}) és használata const vagy hagyja, hogy ugyanazt a hatást.
babel - eszköz az ES6 konvertálására ES5-re
Végül futtatnunk kell az ES6-ot egy szokásos böngészőben. A Bábel a legnépszerűbb eszköz, amelyet az ES6 konvertálására ES5-re váltanak. Különböző interfészekkel rendelkezik, mint például egy CLI, Node-modul és egy online konverter. Alkalmazásaimhoz a csomópont modult használom, és az online verzió segítségével gyorsan megismerhetem a különbségeket. Az alábbi képen látható, hogy a Babel hogyan nevezi át a változókat a „let” és „const” szimulálására!
Triválissá teszi a funkciók hurokban történő használatát
Ha az ES5-ben van egy függvénye egy hurokban (például a (var i = 0; i <3; i ++) {…} számára), és ha ez a függvény megpróbálta elérni az „i” ciklusos változót, akkor baj az emelés miatt. Az ES6-ban, ha nekünk „ enged”, akkor a funkciókat bármilyen probléma nélkül használhatja.
Megjegyzés: Az const nem használható,
mert
konstans, hacsak nem az új for..of ciklust használja.
2. Lexikai „ez” (nyílfüggvényekkel)
Az ES5-ben „ez” változhat attól függően, hogy hol hívják, sőt, hogyan is hívják, és mindenféle fájdalmat okozott a JS fejlesztőknek. Az ES6 kiküszöböli ezt a fő kérdést azzal, hogy ezt „lexikailag”.
Lexikai „ez” egy olyan tulajdonság, amely arra kényszeríti az „ezt” változót, hogy mindig arra az objektumra mutasson, ahol fizikailag található.A probléma és két megoldás az ES5-ben:
Az alábbi képen megpróbáljuk kinyomtatni a felhasználó keresztnevét és fizetését. De a fizetést a szervertől kapjuk (szimulálva). Figyelje meg, hogy amikor a válasz visszajön, a „személy” objektum helyett ez „ablak”.
A megoldás az ES6-ban
Egyszerűen használja a zsír-nyíl => függvényt, és megkapja a lexikális „ezt” automatikát .
Az alábbi kép azt mutatja be, hogy a Babel hogyan alakítja a zsír-nyíl funkciót normál ES5 funkcióvá a megkerüléssel úgy, hogy az a jelenlegi böngészőkben is működjön.
3. Az „érvek” kezelése
Az ES5-ben az „érvek” tömbként viselkednek (azaz át tudunk hurkolni rajta), de nem tömb. Tehát az összes tömbfunkció, például a rendezés, a szelet és így tovább, nem érhető el.
Az ES6-ban használhatunk egy új funkciót, a „Rest” paramétereket. 3 ponttal és olyan névvel ábrázolják, mint … érvel. A Rest paraméterek egy tömb, így használhatjuk az összes tömb funkciót.
4. Osztályok
Fogalmilag a JS-ben nem létezik olyan „osztály” (azaz tervrajz), mint más OO nyelvekben, például a Java-ban. De az emberek sokáig kezelték azt a „függvényt” (más néven: „funkciókonstruktorok”), amely létrehozza az Objektumokat, amikor az „új” kulcsszót osztályként használjuk.
Mivel a JS nem támogatja az „Osztályokat”, és csak „prototípusokon” keresztül szimulálja, a szintaxisa nagyon zavaró mind a meglévő JS-fejlesztők, mind az újonnan érkezők számára, akik hagyományos OO-módon akarják használni. Ez különösen igaz az olyan dolgokra, mint: alosztályok létrehozása, függvények meghívása szülő osztályban és így tovább.
Az ES6 új szintaxist hoz létre, amely a különböző programozási nyelvekben elterjedt, és egyszerűvé teszi az egészet. Az alábbi kép az ES5 és ES6 osztályok egymás melletti összehasonlítását mutatja.
Megjegyzés: Kattintson a képre a nagyításhoz, és olvassa el az
UPDATE: Feltétlenül olvassa el: Az ES6-ban „osztály” az új „rossz” rész? (Ezt követően)
5. Szigorú mód
A szigorú mód („szigorú használat”) segít a gyakori problémák (vagy a „rossz” részek) azonosításában, valamint a JavaScript „biztonságossá tételében”. Az ES5-ben a szigorú mód opcionális, de az ES6-ban sok ES6-szolgáltatáshoz szükséges. Tehát a legtöbb ember és olyan eszköz, mint a babel, automatikusan hozzáadja a „use szigorú” szót a fájl tetejére, a teljes JS kódot szigorú módba állítva, és arra kényszerítve minket, hogy jobb JavaScript-t írjunk.
Ez az! ?
Ha ez hasznos volt, kattintson a tapsra? gombot néhányszor lejjebb, hogy megmutassa támogatását! ⬇⬇⬇ ??
Egyéb hozzászólásaim
//medium.com/@rajaraodv/latest
ECMAScript 2015+
- Nézze meg ezeket a hasznos ECMAScript 2015 (ES6) tippeket és trükköket
- 5 JavaScript „rossz” alkatrész, amelyek javítva vannak az ES6-ban
- Az ES6 „osztálya” az új „rossz” rész?
Terminál fejlesztések
- Hogyan keltsd fel a terminált - lépésről lépésre útmutató képekkel
- Jazz fel „ZSH” terminálját hét lépésben - vizuális útmutató
WWW
- A web és a JavaScript lenyűgöző és rendetlen története
Virtuális DOM
- A virtuális DOM belső működése
React Performance
- Két gyors módszer a React App méretének csökkentésére a gyártásban
- A React helyett az Preact használata
Funkcionális programozás
- A JavaScript befejeződik - elmagyarázva
- Funkcionális programozás JS-ben - gyakorlati példákkal (1. rész)
- Funkcionális programozás JS-ben - gyakorlati példákkal (2. rész)
- Miért van szükség a Redux reduktoraira, hogy „tiszta funkciók” legyenek
WebPack
- Webpack - A zavaró alkatrészek
- Webcsomag és forró modul cseréje [HMR] (a motorháztető alatt)
- A Webpack HMR és React-Hot-Loader - hiányzik a kézikönyve
Draft.js
- Miért kell a Draft.js és miért kell hozzájárulnia
- A Draft.js hogyan jeleníti meg a gazdag szöveges adatokat
React és Redux:
- Lépésről lépésre útmutató a React Redux alkalmazások felépítéséhez
- Útmutató a React Redux CRUD alkalmazás felépítéséhez (3 oldalas alkalmazás)
- Középáruk használata a React Redux alkalmazásokban
- Robusztus űrlapellenőrzés hozzáadása a Redux alkalmazások reagálásához
- A React Redux alkalmazások biztosítása JWT tokenekkel
- Tranzakciós e-mailek kezelése a React Redux alkalmazásokban
- A React Redux alkalmazás anatómiája
- Miért van szükség a Redux reduktoraira, hogy „tiszta funkciók” legyenek
- Két gyors módszer a React App méretének csökkentésére a gyártásban