Íme néhány példa az ECMAScript 2016, 2017 és 2018

által rajaraodv

nehéz nyomon követni a JavaScript (ECMAScript) újdonságait. És még nehezebb hasznos kód példákat találni.

tehát ebben a cikkben kitérek mind a 18 szolgáltatásra, amelyek szerepelnek a TC39 kész javaslataiban, amelyeket az ES2016, az ES2017 és az ES2018 (végleges tervezet) adtak hozzá, és hasznos példákkal mutatom be őket.

ez egy nagyon hosszú bejegyzés, de könnyen olvashatónak kell lennie. Gondolj erre ,mint ” Netflix mértéktelen olvasás.”Ennek végére ígérem, hogy rengeteg ismerete lesz ezekről a funkciókról.

OK, nézzük át ezeket egyesével.

tömb.prototípus.includes

includes egy egyszerű példány módszer a tömb, és segít könnyen megtalálja, ha egy elem a tömbben (beleértve NaNellentétben indexOf).

ECMAScript 2016 vagy ES7 — Array.prototípus.tartalmazza()

apróságok: a JavaScript spec emberek akarták nevezni contains, de ez nyilvánvalóan már használta Mootools így használták includes.

Hatványozás infix operator

a matematikai műveletek , mint az összeadás és a kivonás, infix operátorokkal rendelkeznek, mint a + és a -. Hozzájuk hasonlóan a ** infix operátort általában használják az exponens működéséhez. Az ECMAScript 2016-ban a ** került bevezetésre a Math.pow helyett .

ECMAScript 2016 vagy ES7 – * * Exponent infix operátor

tárgy.értékek()

Object.values() egy új függvény, amely hasonló a Object.keys() – hoz, de visszaadja az objektum saját tulajdonságainak összes értékét, kivéve a prototípusos lánc bármely értékét.

ECMAScript 2017 (ES8)— objektum.értékek()

tárgy.bejegyzések()

Object.entries() a Object.keys – hez kapcsolódik, de ahelyett, hogy csak kulcsokat adna vissza, mind a kulcsokat, mind az értékeket tömbszerűen adja vissza. Ez nagyon egyszerűvé teszi olyan dolgok elvégzését, mint például az objektumok használata hurkokban vagy az objektumok Térképekké konvertálása.

példa 1:

ECMAScript 2017 (ES8) — objektum használata.bejegyzések() hurkokban

példa 2:

ECMAScript 2017 (ES8) — objektum használata.bejegyzések () az objektum térképpé konvertálásához

karakterlánc — kitöltés

két példánymódszert adtak a karakterlánchoz — String.prototype.padStart és String.prototype.padEnd -, amelyek lehetővé teszik az üres karakterlánc vagy más karakterlánc hozzáfűzését/elöljárását az eredeti karakterlánc kezdetéhez vagy végéhez.

'someString'.padStart(numberOfCharcters ); '5'.padStart(10) // ' 5''5'.padStart(10, '=*') //'=*=*=*=*=5''5'.padEnd(10) // '5 ''5'.padEnd(10, '=*') //'5=*=*=*=*='

ez akkor hasznos, ha a dolgokat olyan forgatókönyvekhez akarjuk igazítani, mint a pretty print display vagy a terminal print.

3.1 padStart példa:

az alábbi példában különböző hosszúságú számok listája található. A “0” – t úgy akarjuk betűzni, hogy az összes elem azonos hosszúságú legyen 10 számjegy megjelenítés céljából. Ezt a padStart(10, '0') segítségével könnyen elérhetjük.

ECMAScript 2017-padStart példa

3.2 padEnd példa:

padEnd nagyon hasznos, ha több különböző hosszúságú elemet nyomtatunk, és helyesen szeretnénk igazítani őket.

az alábbi példa jó reális példa arra, hogy a padEnd, padStart és Object.entries hogyan jönnek össze, hogy gyönyörű kimenetet hozzanak létre.

ECMAScript 2017 — padEnd, padStart és Object.Bejegyzés példa

3.3 ⚠️ padStart és padEnd az Emojikon és más kétbájtos karaktereken

a hangulatjelek és más kétbájtos karakterek több bájtos unicode-ot használnak. Tehát a padStart és a padEnd nem biztos, hogy a várt módon működik!6867>

például: tegyük fel, hogy a heart karakterláncot próbáljuk betűzni, hogy 10 karaktert érjünk el a (Z) 6.számú emojival. Az eredmény az alábbiakban fog kinézni:

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'

ez azért van, mert a 6 kódpont hosszú ('\u2764\uFE0F' )! Maga a heart szó 5 karakterből áll, tehát összesen 5 karakter maradt a padra. Tehát az történik, hogy a JS '\u2764\uFE0F' – vel két szívet nyom meg, és ez a szám pedig a következők szerint alakul: 6659. Az utolsóhoz egyszerűen a szív \u2764 első bájtját használja, amely

– et eredményez, így a végén: ❤️❤️❤heart

PS: ezt a linket használhatja az unicode char konverziók megtekintéséhez.

objektum.getOwnPropertyDescriptors

ez a módszer visszaadja az összes adatot (beleértve a getter getés a setter set metódusokat) egy adott objektum összes tulajdonságára vonatkozóan. Ennek hozzáadásának fő motivációja az, hogy lehetővé tegye egy objektum sekély másolását / klónozását egy másik objektumba, amely szintén másolja a getter és a setter függvényeket, szemben a Object.assign – vel .

objektum.az eredeti forrásobjektum getter és setter függvényei kivételével minden részletet sekély másolatokhoz rendelhet.

az alábbi példa a Object.assign és a Object.getOwnPropertyDescriptors közötti különbséget mutatja a Object.defineProperties mellett egy eredeti objektum Car új objektumba másolásához ElectricCar. Látni fogja, hogy a Object.getOwnPropertyDescriptors használatával adiscount getter és setter függvények is átmásolódnak a célobjektumba.

előtt…

előtt-objektum használata.hozzárendelés

után…

ECMAScript 2017 (ES8) – objektum.getOwnPropertyDescriptors

záró vesszők hozzáadása a függvényparaméterekhez

ez egy kisebb frissítés, amely lehetővé teszi számunkra, hogy az utolsó függvényparaméter után vesszők legyenek. Miért? Segíteni olyan eszközökkel, mint a git blame, hogy csak az új fejlesztőket hibáztassák.

az alábbi példa a problémát és a megoldást mutatja be.

ECMAScript 2017 (ES 8) — záró vessző a függvény paraméterben

megjegyzés: a függvényeket vesszővel is hívhatja!

aszinkron/várakozás

ez messze a legfontosabb és leghasznosabb funkció, Ha engem kérdezel. Az aszinkron funkciók lehetővé teszik számunkra, hogy ne foglalkozzunk a visszahívási pokolgal, és az egész kódot egyszerűvé tegyük.

a async kulcsszó azt mondja a JavaScript fordítónak, hogy másképp kezelje a függvényt. A fordító szünetel, amikor eléri a await kulcsszót a függvényen belül. Feltételezi, hogy a await utáni kifejezés visszaad egy ígéretet, és megvárja, amíg az ígéret megoldódik vagy elutasításra kerül, mielőtt tovább lépne.

az alábbi példában a getAmount függvény két aszinkron függvényt hív meg getUser és getBankBalance. Ezt ígéretesen megtehetjük, de a async await használata elegánsabb és egyszerűbb.

ECMAScript 2017 (ES 8) – aszinkron várja az alapvető példát

6.1 az aszinkron függvények maguk is ígéretet adnak.

ha egy aszinkron függvény eredményére vár, akkor a Promise then szintaxisát kell használnia az eredmény rögzítéséhez.

a következő példában az eredményt console.log használatával szeretnénk naplózni, de nem a doubleAndAdd-n belül. Tehát várni akarunk, és a then szintaxist használjuk, hogy az eredményt console.log – re adjuk át .

ECMAScript 2017 (ES 8) – Async várják magukat visszatér ígéret

6.2 hívás aszinkron / várakozás párhuzamosan

az előző példában kétszer hívunk várakozást, de minden alkalommal egy másodpercet várunk (összesen 2 másodperc). Ehelyett párhuzamosíthatjuk, mivel a a és a bnem függ egymástól a Promise.all használatával.

ECMAScript 2017 (ES 8) — ígéret használata.minden az aszinkron/várakozás párhuzamosításához

6.3 hibakezelés aszinkron / várakozás funkciók

az aszinkron várakozás használatakor a hibák kezelésére többféle mód van.

1. Lehetőség-használja a try catch funkciót

ECMAScript 2017-használja a try catch funkciót az async/wait funkcióban

2.lehetőség— minden várakozás kifejezés fogása

mivel minden await kifejezés ígéretet ad vissza, minden sorban hibákat kaphat az alábbiak szerint.

ECMAScript 2017-használja a try catch minden várakozás kifejezést

3. lehetőség-fogja meg a teljes aszinkron-várakozás funkciót

ECMAScript 2017-fogja meg a teljes aszinkron/várakozás funkciót a végén

az ECMAScript jelenleg a végleges tervezetben van, és 2018 júniusában vagy júliusában jelenik meg. Az alábbiakban bemutatott összes funkció a 4. szakaszban található, és az ECMAScript 2018 része lesz.

1. Megosztott memória és atomika

ez egy hatalmas, nagyon fejlett funkció, és a JS motorok alapvető továbbfejlesztése.

a fő ötlet az, hogy valamilyen többszálú funkciót hozzunk a JavaScripthez, hogy a JS fejlesztői nagy teljesítményű, egyidejű programokat írhassanak a jövőben azáltal, hogy lehetővé teszik a memória önálló kezelését, ahelyett, hogy a JS engine kezelné a memóriát.

ezt egy új típusú globális objektum, a SharedArrayBuffer végzi, amely lényegében megosztott memóriaterületen tárolja az adatokat. Tehát ezek az adatok megoszthatók a fő js szál és a web-worker szálak között.

eddig, ha meg akarjuk osztani az adatokat a fő js szál és a webmunkások között, át kellett másolnunk az adatokat, és el kellett küldenünk a másik szálhoz a postMessage használatával . Már nem!

egyszerűen használja SharedArrayBuffer és az adatok azonnal elérhető mind a fő szál és több web-worker szálak.

de a memória megosztása a szálak között versenyfeltételeket okozhat. A versenyfeltételek elkerülése érdekében bevezetésre kerül az” Atomics ” globális objektum. Az Atomics különféle módszereket kínál a megosztott memória zárolására, amikor egy szál az adatait használja. Ezenkívül módszereket kínál az ilyen adatok biztonságos frissítésére az adott megosztott memóriában.

javasoljuk, hogy ezt a funkciót valamilyen könyvtáron keresztül használja, de jelenleg nincsenek erre a funkcióra épülő könyvtárak.

ha érdekel, azt javaslom, olvassa el:

  1. a munkásoktól a megosztott memóriáig-lucasfcosta
  2. rajzfilm intro a Megosztáshozarraybuffers — Lin Clark
  3. megosztott memória és atomika — Dr. Axel Rauschmayer

2. Tagged Template literal restriction removed

először is tisztáznunk kell, hogy mi a “Tagged Template literal”, hogy jobban megértsük ezt a funkciót.

az ES2015+ programban van egy tagged template literal nevű szolgáltatás, amely lehetővé teszi a fejlesztők számára, hogy testre szabják a karakterláncok interpolálását. Például a szokásos módon a karakterláncokat az alábbiak szerint interpolálják…

a tagged literal-ban írhat egy függvényt, amely a string literal keménykódolt részeit, például , és a helyettesítő változókat, például, paraméterként fogadja egy egyéni függvénybe (például greet), és bármit visszaad az adott egyéni függvényből.

az alábbi példa azt mutatja, hogy az egyéni “Tag” funkció greet hozzáfűzi a napszak, mint a “jó reggelt!””Jó napot” , és így tovább, attól függően, hogy a napszak a string literal és visszaad egy egyéni string.

Címkefunkció példa, amely egyéni karakterlánc-interpolációt mutat

most, hogy megvitattuk, mi a “címkézett” funkció, sokan szeretnék használni ezt a funkciót különböző tartományokban, például a Terminalban parancsokhoz és HTTP-kérésekhez URI-k összeállításához stb.

a címkézett karakterlánc literál problémája

tehát ha van olyan címkézett függvénye, amely belsőleg más tartomány szabályait használja (például a terminál szabályait), amelynek \ubla123abla-t kell használnia, amely nem úgy néz ki, mint \u0049 vagy \u{@f804}, akkor szintaktikai hibát kap.

az ES2018-ban a szabályok enyhülnek, hogy lehetővé tegyék az ilyen látszólag érvénytelen escape karaktereket, amíg a címkézett függvény visszaadja az értékeket egy “szakács” tulajdonsággal rendelkező objektumban (ahol az érvénytelen karakterek “meghatározatlanok”), majd egy “nyers” tulajdonsággal (bármit is akarsz).

” dotall”zászló reguláris kifejezés

jelenleg RegEx, bár a pont (“.”) állítólag egyetlen karakternek felel meg, nem felel meg az új sor karaktereknek, mint például a \n \r \f etc.

például:

//Before/first.second/.test('first\nsecond'); //false

ez a javítás lehetővé teszi, hogy a dot operátor egyetlen karakterhez illeszkedjen. Annak érdekében, hogy ez ne törjön meg semmit, a \s jelzőt kell használnunk, amikor létrehozzuk a Regexet, hogy ez működjön.

//ECMAScript 2018/first.second/s.test('first\nsecond'); //true Notice: /s ?? 

itt a teljes API a javaslat doc:

ECMAScript 2018-Regex dotAll funkció lehetővé teszi megfelelő még \n keresztül”.”via / s zászló

RegExp nevű csoport rögzíti ?

ez a fejlesztés egy hasznos RegExp funkciót hoz létre más nyelvekből, például Pythonból, Java-ból és így tovább, az úgynevezett “Named Groups.”Ez a funkció lehetővé teszi a regexp-t író fejlesztők számára, hogy(?<name>...) formátumú neveket (azonosítókat) adjanak meg a regexp csoport különböző részeihez. Ezután ezt a nevet könnyedén megragadhatják, hogy melyik csoportra van szükségük.

4.1 Basic nevű csoport példa

ECMAScript 2018-Regex nevű csoportok példa

4.2 az elnevezett csoportok használata magában a regexben

a \k<group name> formátumot használhatjuk a csoport visszahivatkozására magában a regexben. A következő példa bemutatja, hogyan működik.

ECMAScript 2018-Regex nevű csoportok vissza hivatkozási keresztül \ k< csoport neve>

4.3 elnevezett csoportok használata karakterláncban.prototípus.replace

a megnevezett csoport funkció mostantól a String replace példány metódusába kerül. Így könnyen cserélhetünk szavakat a karakterláncban.

például változtassa meg a “vezetéknév, vezetéknév” szót “vezetéknév, keresztnév” – re.

ECMAScript 2018-használata RegEx nevű csoportok funkció csere funkció

Rest tulajdonságok objektumok

Rest operator ... (három pont) lehetővé teszi számunkra, hogy kivonat objektum tulajdonságait, amelyek még nem bontott.

5.1 A rest segítségével csak a kívánt tulajdonságokat tudja kibontani

ECMAScript 2018-objektum megsemmisítése a rest segítségével

5.2 még jobb, akkor távolítsa el a nem kívánt elemeket! ??

ECMAScript 2018 — Object destructuring via rest

Spread properties for Objects

a Spread properties ugyanúgy néz ki, mint a rest properties három ponttal ... de a különbség az, hogy a spread használatával új objektumokat hozhat létre (átalakíthat).

tipp: a spread operátort az egyenlőségjel jobb oldalán használják. A többit az egyenlőségjel bal oldalán használják.

ECMAScript 2018 — objektum szerkezetátalakítás spreaden keresztül

RegExp Lookbehind állítások

ez a RegEx továbbfejlesztése, amely lehetővé teszi számunkra, hogy bizonyos karakterláncok közvetlenül *más karakterláncok előtt* létezhessenek.

most már használhatja a csoport (?<=…) (kérdőjel, kevesebb, mint, egyenlő), hogy vizsgálja meg mögött pozitív állítás.

pozitív állítás: tegyük fel, hogy biztosítani akarjuk, hogy a # jel létezik a winning szó előtt (azaz: #winning), és azt akarjuk, hogy a regex csak a “nyerő”karakterláncot adja vissza. Itt van, hogyan írnád.

ECMAScript 2018 — (?<=…) for positive assertion

negatív állítás: tegyük fel, hogy olyan sorokból szeretnénk kivonni a számokat, amelyeknek a számok előtt van a szám, és nem a $ jelekből.

ECMAScript 2018 — (?<!… ) negatív állítások esetén

regexp Unicode tulajdonság menekül

nem volt könnyű Regexet írni, hogy megfeleljen a különböző unicode karaktereknek. Olyan dolgok, mint \w , \W , \d az etc csak angol karaktereket és számokat tartalmaz. De mi a helyzet a számokkal más nyelveken, például Hindi, Görög, stb?

ez az, ahol Unicode tulajdonság menekül jön. Kiderült, hogy az Unicode metaadat-tulajdonságokat ad hozzá minden szimbólumhoz (karakterhez), és ezeket használja különböző szimbólumok csoportosítására vagy jellemzésére.

például az Unicode adatbázis csoportosítja az összes Hindi karaktert (xhamstereket) egy Script nevű tulajdonság alá, amelynek értéke Devanagari, és egy másik, Script_Extensions nevű tulajdonság alá, amelynek értéke Devanagari. Tehát kereshetünk Script=Devanagari és megkaphatjuk az összes Hindi karaktert.

a Devanagari különféle indiai nyelvekhez használható, például Marathi, Hindi, szanszkrit stb.

az ECMAScript 2018-tól kezdve a \p – et használhatjuk a karakterek elkerülésére a {Script=Devanagari} mellett, hogy megfeleljen az összes indiai karakternek. Vagyis használhatjuk: \p{Script=Devanagari} a Regexben, hogy megfeleljen az összes Devanagari karakternek.

ECMAScript 2018-megjelenítve \p
//The following matches multiple hindi character/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true //PS:there are 3 hindi characters h

Hasonlóképpen, az Unicode adatbázis az összes görög karaktert Script_Extensions (és Script ) tulajdonság alá csoportosítja Greek értékkel . Tehát az összes görög karaktert kereshetjük a Script_Extensions=Greek vagy a Script=Greek használatával .

Vagyis használhatjuk: \p{Script=Greek} a Regexben, hogy megfeleljen az összes görög karakternek.

ECMAScript 2018-megjelenítve \p
//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

ezenkívül az Unicode adatbázis különféle típusú hangulatjeleket tárol a logikai tulajdonságok alattEmoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, és Emoji_Modifier_Base tulajdonságértékekkel ‘true’. Tehát az összes hangulatjelet kereshetjük úgy, hogy egyszerűen kiválasztjuk a Emoji értéket, hogy igaz legyen.

Vagyis használhatjuk: \p{Emoji}, \Emoji_Modifier stb.

a következő példa mindent világossá tesz.

ECMAScript 2018 — megmutatja, hogyan használható \p különböző hangulatjelekhez

végül használhatunk Nagy “P”(\P) escape karaktert a kis p (\p) helyett, hogy érvénytelenítsük az egyezéseket.

  1. ECMAScript 2018 Javaslat

Ígéret.prototípus.végül()

finally() egy új példány módszer, amelyet hozzáadtak az ígérethez. A fő ötlet az, hogy lehetővé tegye a visszahívás futtatását a resolve vagy a reject után, hogy segítsen megtisztítani a dolgokat. A finally visszahívást érték nélkül hívják meg, és mindig végrehajtásra kerül, bármi is legyen.

nézzük meg a különböző eseteket.

ECMAScript 2018-végül () megoldási ügyben
ECMAScript 2018-végül () elutasító esetben
ECMASCript 2018-végül () hiba dobott ígéret esetén
ECMAScript 2018-hiba dobott belülről * * catch * * case

aszinkron iteráció

ez egy *rendkívül* hasznos funkció. Alapvetően ez lehetővé teszi számunkra, hogy hozzon létre hurkok aszinkron kód könnyedén!

ez a funkció egy új “for-wait-of” hurkot ad hozzá, amely lehetővé teszi számunkra, hogy olyan aszinkron függvényeket hívjunk meg, amelyek ígéreteket (vagy egy csomó ígérettel rendelkező tömböket) adnak vissza egy hurokban. A klassz dolog az, hogy a hurok megvárja az egyes ígéretek megoldását, mielőtt a következő hurokra lépne.

ECMAScript 2018-aszinkron Iterátor keresztül for-vár-a

ez nagyjából azt!

ha ez hasznos volt, kattintson a taps ? gomb lejjebb egy párszor, hogy mutassa meg a támogatást! ⬇⬇⬇ ??

Egyéb bejegyzéseim

  1. nézze meg ezeket a hasznos ECMAScript 2015 (ES6) tippeket és trükköket
  2. 5 JavaScript “Rossz” alkatrészek, amelyek az ES6-ban vannak rögzítve
  3. az “osztály” az ES6-ban az új “rossz” rész?

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.