5 JavaScript „rossz” alkatrész, amelyek javítva vannak az ES6-ban

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 „ constszó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+

  1. Nézze meg ezeket a hasznos ECMAScript 2015 (ES6) tippeket és trükköket
  2. 5 JavaScript „rossz” alkatrész, amelyek javítva vannak az ES6-ban
  3. Az ES6 „osztálya” az új „rossz” rész?

Terminál fejlesztések

  1. Hogyan keltsd fel a terminált - lépésről lépésre útmutató képekkel
  2. Jazz fel „ZSH” terminálját hét lépésben - vizuális útmutató

WWW

  1. A web és a JavaScript lenyűgöző és rendetlen története

Virtuális DOM

  1. A virtuális DOM belső működése

React Performance

  1. Két gyors módszer a React App méretének csökkentésére a gyártásban
  2. A React helyett az Preact használata

Funkcionális programozás

  1. A JavaScript befejeződik - elmagyarázva
  2. Funkcionális programozás JS-ben - gyakorlati példákkal (1. rész)
  3. Funkcionális programozás JS-ben - gyakorlati példákkal (2. rész)
  4. Miért van szükség a Redux reduktoraira, hogy „tiszta funkciók” legyenek

WebPack

  1. Webpack - A zavaró alkatrészek
  2. Webcsomag és forró modul cseréje [HMR] (a motorháztető alatt)
  3. A Webpack HMR és React-Hot-Loader - hiányzik a kézikönyve

Draft.js

  1. Miért kell a Draft.js és miért kell hozzájárulnia
  2. A Draft.js hogyan jeleníti meg a gazdag szöveges adatokat

React és Redux:

  1. Lépésről lépésre útmutató a React Redux alkalmazások felépítéséhez
  2. Útmutató a React Redux CRUD alkalmazás felépítéséhez (3 oldalas alkalmazás)
  3. Középáruk használata a React Redux alkalmazásokban
  4. Robusztus űrlapellenőrzés hozzáadása a Redux alkalmazások reagálásához
  5. A React Redux alkalmazások biztosítása JWT tokenekkel
  6. Tranzakciós e-mailek kezelése a React Redux alkalmazásokban
  7. A React Redux alkalmazás anatómiája
  8. Miért van szükség a Redux reduktoraira, hogy „tiszta funkciók” legyenek
  9. Két gyors módszer a React App méretének csökkentésére a gyártásban

Ha ez hasznos volt, kattintson a tapsra? gombot néhányszor, hogy megmutassa támogatását! ⬇⬇⬇ ??