JavaScript ES6-write less, do more

JavaScript ES6 hozza az új szintaxis és új fantasztikus funkciók, hogy a kód több modern és olvashatóbb. Ez lehetővé teszi, hogy kevesebb kódot írjon, és többet tegyen. Az ES6 számos nagyszerű funkciót mutat be nekünk, mint például a nyíl funkciók, a sablon karakterláncok,az osztály megsemmisítése, a modulok … stb. Nézzük meg.

const and let

const egy új kulcsszó az ES6-ban a változók deklarálására. const erősebb, mint a var. Használat után a változót nem lehet áthelyezni., Más szavakkal, ez egy megváltoztathatatlan változó, kivéve, ha objektumokkal használják.

Ez nagyon hasznos a kiválasztók célzásához. Például, ha egyetlen gombunk van, amely egy eseményt tüzel, vagy ha HTML elemet szeretne kiválasztani a JavaScriptben, használja a const varhelyett. Ez azért van, mert var “hoisted”. Mindig előnyös a const használata, ha nem szeretné újra hozzárendelni a változót .,

a fenti kódban const nem változik, és nem rendelhető újra. Ha megpróbál új értéket adni neki, akkor hibát fog visszaadni.

let áthelyezhető és új értéket vehet fel. Ez létrehoz egy változó.

let ugyanaz, mint a const, mivel mindkettő blokkolva van-hatókör. Ez azt jelenti, hogy a változó csak a hatókörén belül érhető el.,

Arrow functions

a nyíl funkció valóban félelmetes, és teszi a kódot olvashatóbb, strukturáltabb, és úgy néz ki, mint a modern kódot. Ahelyett, hogy ezt használná:

használja ezt:

mint látható, a nyíl funkció olvashatóbbnak és tisztábbnak tűnik! Nem kell többé használni a régi szintaxist.

amap,filter, ésreduce beépített funkciók.,

a nyilakkal ellátott térképfüggvény tisztább és olvashatóbb, mint a map az ES5-ben. Az ES6 segítségével rövidebb és intelligensebb kódot írhat. Ugyanezt használhatja a filterés reduce.

sablon Literals

sablon literals vagy sablon karakterláncok elég jó. Nem kell a plusz (+) operátort használnunk a karakterláncok összekapcsolásához, vagy ha egy karakterláncon belüli változót akarunk használni.,

a régi szintaxis:

új ES6 szintaxis:

olyan egyszerű! Óriási különbség van a régi szintaxis és az ES6 között. Ha húrokkal játszik, az ES6 szó szerinti karakterlánc szervezettebbnek és jól strukturáltabbnak tűnik, mint az ES5.

alapértelmezett paraméterek

amikor PHP-ben dolgozom, általában alapértelmezett paramétereket használok. Ezek lehetővé teszik egy paraméter előzetes meghatározását.,

tehát, ha elfelejti írni a paramétert, akkor nem ad vissza meghatározatlan hibát, mert a paraméter már meg van határozva az alapértelmezésben. Tehát, ha futtatja a funkciót egy nem fogadott paraméter, akkor az érték az alapértelmezett paraméter t, és nem fog vissza hibát!

nézze meg ezt a példát:

a fenti funkció nem definiált, mert elfelejtettük megadni a második paramétert age.,

de ha az alapértelmezett paramétert használjuk, akkor nem tér vissza meghatározatlanul, és akkor fogja használni az értékét, ha elfelejtünk hozzárendelni egy paramétert!

amint látja, a funkció értéket ad vissza, annak ellenére, hogy elmulasztottuk a második paramétert. Most az alapértelmezett paraméterrel előre tudjuk kezelni a hibát.

Array and object destructing

A Destruction megkönnyíti Egy tömb vagy objektum értékeinek hozzárendelését az új változóhoz.,

a régi szintaxis:

az ES6 szintaxisával:

az ES5-hez minden értéket hozzá kell rendelnünk változó. Az ES6 segítségével csak göndör zárójelbe tesszük értékeinket, hogy megkapjuk az objektum bármely tulajdonságát.

Megjegyzés: Ha olyan változót rendel hozzá, amely nem azonos a tulajdonság nevével, akkor nem definiált. Például, ha a tulajdonság neve name, és hozzárendeljük egy username változóhoz,akkor nem definiált lesz.,

a változót mindig ugyanúgy kell megneveznünk, mint a tulajdonság nevét. De abban az esetben, ha át akarjuk nevezni a változót, ehelyett a : kettőspontot használhatjuk.

a tömbhöz ugyanazt a szintaxist használjuk, mint az objektum. Csak ki kell cserélnünk a göndör zárójeleket szögletes zárójelekkel.

Import és export

használata import és export A JavaScript alkalmazás teszi erősebb., Ezek lehetővé teszik, hogy különálló, újrafelhasználható alkatrészeket hozzon létre.

ha ismeri a JavaScript MVC keretrendszert, látni fogja ,hogy aimport ésexport az összetevők kezelésére a legtöbb időt. Szóval hogyan működnek valójában?

Ez egyszerű! export lehetővé teszi egy másik JavaScript komponensben használt modul exportálását. A modul importálásához aimport elemet használjuk.

például két fájlunk van., Az első neve detailComponent.js, a második neve homeComponent.js.

In detailComponent.js a detail függvényt exportáljuk.

és ha ezt a funkciót a homeComponent.js – ban akarjuk használni, akkor csak a import – t használjuk.

Ha egynél több modult akarunk importálni, csak göndör zárójelbe tesszük őket.,

tehát hűvös, nem?!

az ígéretek

Az ígéretek az ES6 új jellemzője. Ez egy módszer aszinkron kód írására. Akkor használható, ha például adatokat akarunk letölteni egy API-ból, vagy ha van olyan funkciónk, amely időt vesz igénybe a végrehajtáshoz. Az ígéretek megkönnyítik a probléma megoldását, ezért hozzuk létre az első ígéretünket!

Ha bejelentkezik a konzol, akkor visszatér egy ígéretet. Tehát, ha EGY függvényt akarunk végrehajtani az adatok letöltése után, akkor egy ígéretet fogunk használni., Az ígéretnek két paramétere van: resolve és reject egy várható hiba kezeléséhez.

megjegyzés: a lekérési funkció maga is ígéretet ad vissza!

const url='https://jsonplaceholder.typicode.com/posts';

const getData=(url)=&gt;{return fetch(url);}

getData(url).then(data=&gt; data.json()).then(result=> console.log(result));

most, ha bejelentkezik a konzol vissza fog térni egy sor adatot.

Rest paraméter és Spread operátor

a rest paraméterek egy tömb Argumentumának lekérésére, valamint egy új tömb visszaadására szolgálnak.,

a spread operátor szintaxisa megegyezik a többi paraméterével, de a spread operátor maga veszi a tömböt, és nem csak az argumentumokat. A Spread paramétert használhatjuk egy tömb értékeinek megszerzésére, ahelyett, hogy a for loop-ot vagy bármely más módszert használnánk.

osztályok

osztályok az objektumorientált programozás (OOP) magját képezik. Biztonságosabbá teszik a kódodat és beágyazódnak. Az osztályok használata szép struktúrát ad a kódnak, és orientált marad.,

egy osztály létrehozásához használja a class kulcsszót, majd az osztály nevét két göndör zárójelben.

most elérhetjük a class módszereket és tulajdonságokat a new kulcsszóval.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

egy másik osztálytól való örökléshez használja a extends kulcsszót, amelyet az örökölt osztály neve követ.,

az osztályokról itt olvashat bővebben.

az ES6 más csodálatos funkciókkal is rendelkezik-itt felfedezheti őket.

következtetés

remélem, hasznosnak találtátok ezt a cikket, és remélem, be tudtam mutatni néhány ES6 funkciót. Ha igen, iratkozzon fel erre az e-mail listára, hogy többet megtudjon a front-end témákról. Köszönöm az idejét.

egyébként nemrégiben egy erős szoftvermérnök csoporttal dolgoztam az egyik mobil alkalmazásom számára., A szervezet nagyszerű volt, és a termék szállított nagyon gyorsan, sokkal gyorsabb, mint más cégek, szabadúszók dolgoztam, és azt hiszem, őszintén ajánlom őket más projektek odakinn. Lődd le nekem egy e-mailt, ha azt szeretnénk, hogy a kapcsolatot — [email protected].

JavaScript ES6-write less, do more (Magyar)