Bár ES6 specifikáció nem szuper-friss, azt hiszem, hogy sokan a fejlesztők még mindig nem ugrik ismerős., Ennek fő oka valószínűleg rossz támogatás a webböngészőkben közvetlenül a specifikáció kiadása után. Jelenleg a specifikáció több mint 2 éves, sok modern webböngésző jól működik az ES6-tal. Még akkor is, ha Ön (vagy ügyfelei) nem használja a webböngésző legfrissebb verzióját, használhat transpilereket (például Babel), amelyek az ES6 forrásokat ES5 forrásokká alakítják át az alkalmazás építési folyamata során. Ez azt jelenti, hogy itt az ideje, hogy egy lépést előre tanulni ES6.
ebben a cikkben megpróbálom röviden bemutatni a leghasznosabb funkciókat., Miután a bemutató, akkor rendelkeznek az alapvető készségek, valamint képes lesz arra, hogy alkalmazza őket egy igazi projekt. Ne kezelje útmutatóként vagy dokumentációként. Célom az, hogy ösztönözzelek arra, hogy mélyebbre áss és ismerkedj meg az ES6-tal.
const és let kulcsszavak
const lehetővé teszi, hogy meghatározza állandók (végül!). lehetővé teszi a változók meghatározását. Ez nagyszerű, de nincs már Változónk a JavaScriptben? Igen, ez igaz, de a var által deklarált változók függvény hatókörrel rendelkeznek, és a tetejére kerülnek. Ez azt jelenti, hogy egy változó használható a deklarálás előtt., legyen változók és állandók blokk hatókör (körül {}), és nem lehet használni, mielőtt nyilatkozat.
Array helper functions
új cool helper funkciók jelentek meg, amelyek megkönnyítik a JS tömbökkel való munkát a legtöbb hasznos esetben. Hányszor hajtotta végre a logikát, mint például: szűrés, annak ellenőrzése, hogy bármelyik vagy az összes elem megfelel-e a feltételnek, vagy elemek átalakítása? Valószínűleg nagyon gyakran. Most már nagy nyelvi funkciók, hogy ezt a munkát az Ön számára., Véleményem szerint itt vannak a legértékesebb funkciók:
forEach
végrehajtja a megadott funkciót a tömb minden eleméhez, argumentumként átadva a tömb elemet.
térkép
létrehoz egy új tömböt, amely azonos számú elemet tartalmaz, de a kimeneti elemeket a megadott függvény hozza létre. Ez csak átalakítja minden tömb elem valami mást.,
szűrő
létrehoz egy új tömböt, amely az eredeti tömb egy részhalmazát tartalmazza. Az eredménynek vannak olyan elemei, amelyek átmennek a megadott funkció által végrehajtott teszten, amelynek igaznak vagy hamisnak kell lennie.
find
megtalálja az első elemet, amely átmegy a megadott funkció által végrehajtott teszten, amelynek igaznak vagy hamisnak kell lennie.,
minden
ellenőrzi, hogy a tömb minden eleme megfelel-e a megadott függvény által végrehajtott tesztnek, amelynek igaznak vagy hamisnak kell lennie.
néhány
ellenőrzi, hogy a tömb bármely eleme megfelel-e a megadott funkció által végrehajtott tesztnek, amelynek igaznak vagy hamisnak kell lennie.,
reduce
Az első paraméterként átadott függvényt alkalmazza egy akkumulátorral és a tömb minden elemével szemben (balról jobbra), így egyetlen értékre redukálja. Az akkumulátor kezdeti értékét a csökkentési funkció második paramétereként kell megadni.
Nyílfüggvények
nagyon egyszerű funkciók (mint például a fent említett összeg vagy termék) végrehajtása sok boilerplate írását igényli., Van erre valami megoldás? Igen, csak próbálja nyíl funkciók!
Nyílfüggvények is lehetnek inline. Ez nagyon leegyszerűsíti a kód:
Nyíl funkciók is összetettebb, sok sornyi kódot:
Osztályok
Ami Java fejlesztő nem az órákról, amikor a váltás egy JS projekt?, Ki nem szereti az explicit örökséget, mint például a Java nyelven, ahelyett, hogy mágikus kódot írna a prototípus örökléshez? Bár néhány js Fejlesztő panaszkodott, osztályokat vezettek be az ES6-ban. Nem változtatják meg az öröklés fogalmát. Ezek csak szintaktikai cukor a prototípus örökléshez.
Enhanced object literals
Object literals have been enhanced., Most már tudjuk, hogy sokkal könnyebb:
- adjuk meg a mezők változó feladat ugyanaz a neve,
- define funkciók
- define dinamikus (kiszámított) tulajdonságok
Sablon húrok
Aki szeret írni nagy húr, a változók összefűzés? Hiszek egy kisebbségben. Ki utálja elolvasni? Biztos vagyok benne, mindenki. Szerencsére az ES6 nagyon könnyen használható karakterlánc-sablonokat vezet be a változók helyőrzőivel.,
kérjük, vegye figyelembe, hogy többsoros szöveget írhatunk.
fontos: az aposztrófok helyett használjon backstick-eket a szöveg csomagolásához.
alapértelmezett függvény argumentumok
nem tetszik az összes lehetséges funkcióparaméter biztosítása? Használja az alapértelmezett értékeket.
Rest and spread operátorok
Spread
lehetővé teszi a tömb vagy az objektum tartalmának kivonását egyetlen elemként.,
Példa—, hogy a sekély példányát tömb:
Példa — merge tömbök:
Többit
szeretné, hogy kötődik az első néhány funkció paraméterek, változók, mások meg, hogy egyes változók, mint egy tömb? Most meg tudod csinálni elég könnyen.,
Destructuring
array
lehetővé teszi a kért elemek kivonását a tömbből és a változókhoz való hozzárendelését.
objektum
lehetővé teszi a kért tulajdonságok kivonását az objektumból, és hozzárendeli azokat a tulajdonságokkal azonos nevű változókhoz.,
ígéret ígéretek (igen, tudom, hogy furcsán hangzik), hogy a halasztott vagy hosszú távú feladatok jövőbeli eredményeihez jut. Az ígéretnek két csatornája van: az első az eredményekhez, a második a lehetséges hibákhoz. Az eredmény eléréséhez a visszahívási funkciót “akkor” funkcióparaméterként adja meg. A hibák kezeléséhez a visszahívási funkciót “catch” funkcióparaméterként adja meg.
kérjük, vegye figyelembe, hogy a példa kimenete eltérhet minden végrehajtásnál, véletlenszerű függvényhívás miatt.,
összefoglaló
remélem, élvezte a cikket. Ha valamilyen gyakorlatot szeretne, használhatja a homokozót a tanulási folyamathoz: https://es6console.com/. Ha további információra van szüksége, itt találja: