Tässä esimerkkejä kaikesta uudesta ECMAScript 2016, 2017, ja 2018

esittäjä rajaraodv

on vaikea seurata, mitä uutta JavaScript (ECMAScript). Vielä vaikeampaa on löytää hyödyllisiä koodiesimerkkejä.

joten tässä artikkelissa käsittelen kaikkia 18 ominaisuutta, jotka on lueteltu TC39: n valmiissa ehdotuksissa, jotka on lisätty es2016: een, ES2017: ään ja ES2018: aan (lopullinen luonnos), ja näytän ne hyödyllisillä esimerkeillä.

tämä on aika pitkä postaus, mutta sen pitäisi olla helppolukuista. Ajattele tätä ” Netflixin ahmimislukemana.”Tämän loppuun mennessä lupaan, että sinulla on ton tietoa kaikista näistä ominaisuuksista.

OK, käydään nämä läpi yksitellen.

asetelma.prototyyppi.includes

includes on yksinkertainen esiintymistapa Array ja auttaa helposti löytämään, jos kohde on Array (mukaan lukien NaN toisin kuin indexOf).

Trivia: JavaScript spec-ihmiset halusivat nimetä sen contains , mutta tämä oli ilmeisesti jo Mootoolsin käytössä, joten he käyttivät includes .

Eksponentiaatio infix operator

matemaattisissa operaatioissa, kuten yhteen-ja vähennyslaskussa, on infix-operaattoreita , kuten + ja -. Niiden tapaan ** infix-operaattoria käytetään yleisesti eksponenttioperaatiossa. ECMAScript 2016: ssa ** otettiin käyttöön Math.pow sijasta .

vastalause.arvot()

Object.values() on uusi funktio, joka on samankaltainen kuin Object.keys(), mutta palauttaa kaikki kohteen omien ominaisuuksien arvot pois lukien kaikki prototyyppiketjun arvot.

vastalause.merkinnät()

Object.entries() on sukua Object.keys: lle , mutta pelkkien avainten palauttamisen sijaan se palauttaa array-tyyliin sekä avaimet että arvot. Tämän vuoksi on hyvin yksinkertaista tehdä asioita, kuten käyttää esineitä silmukoissa tai muuntaa esineitä Kartoiksi.

Esimerkki 1:

Esimerkki 2:

String padding

merkkijonoon — String.prototype.padStart ja String.prototype.padEnd — lisättiin kaksi instanssimenetelmää, jotka mahdollistavat joko tyhjän merkkijonon tai jonkin muun merkkijonon liittämisen/preppaamisen alkuperäisen Merkkijonon alkuun tai loppuun.

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

tämä on kätevä, kun haluamme kohdistaa asioita skenaarioihin, kuten pretty print display tai terminal print.

3.1 padStart esimerkki:

alla olevassa esimerkissä on eripituisia lukuja. Haluamme etukäteen ” 0 ” niin, että kaikki kohteet ovat yhtä pitkiä 10 numeroa näytön tarkoituksiin. Voimme käyttää padStart(10, '0') tätä helposti.

3.2 padEnd esimerkki:

padEnd todella on kätevä, kun tulostamme useita eripituisia kohteita ja haluamme kohdistaa ne oikein.

alla oleva esimerkki on hyvä realistinen esimerkki siitä, miten padEnd, padStart ja Object.entries kaikki yhdessä tuottavat kauniin tuotoksen.

3.3 ⚠️ padStart ja padEnd emojeilla ja muilla kaksitavuisilla merkeillä

emojeilla ja muilla kaksitavuisilla merkeillä esitetään useita tavuja unicode-merkillä. Joten padStart ja padEnd eivät ehkä toimi odotetusti!⚠️

esimerkiksi: Let ’ s say we are trying to pad the string heart to reach 10 characters with the ❤️ emoji. Tulos näyttää alla:

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

tämä johtuu siitä, että ❤️ is 2 code points long ('\u2764\uFE0F')! Sana heart itsessään on 5 merkkiä,joten jäljellä on enää 5 merkkiä. Joten mitä tapahtuu on, että JS pads two hearts using '\u2764\uFE0F' and that produces ❤️❤️. Viimeiselle se vain käyttää sydämen ensimmäistä tavua \u2764, joka tuottaa ❤

niin päädymme: ❤️❤️❤heart

PS: voit käyttää tätä linkkiä tarkistaa unicode char tuloksia.

objekti.getOwnPropertyDescriptors

tämä menetelmä palauttaa kaikki yksityiskohdat (mukaan lukien getter getja setter set – menetelmät) kaikista tietyn kohteen ominaisuuksista. Tärkein motivaatio lisätä tämä on sallia pinnallinen kopiointi / Kloonaus objekti toiseen objektiin, joka myös kopioi getter ja setter toimintoja toisin kuin Object.assign .

objekti.määritä shallow kopiot kaikki yksityiskohdat paitsi getter ja setter toimintoja alkuperäisen lähdeobjektin.

alla olevassa esimerkissä näkyy ero Object.assign ja Object.getOwnPropertyDescriptors sekä Object.defineProperties alkuperäisen objektin Car kopioimiseksi uudeksi objektiksi ElectricCar . Näet, että käyttämällä Object.getOwnPropertyDescriptors, discount getter-ja setter-funktiot kopioidaan myös kohdeobjektiin.

ennen…

jälkeen…

lisää perään pilkut funktioparametreihin

tämä on pieni päivitys, joka mahdollistaa perään pilkut viimeisen funktioparametrin jälkeen. Miksi? Auttaa työkaluja, kuten Git blame varmistaa vain uusia kehittäjiä syytetään.

alla oleva esimerkki näyttää ongelman ja ratkaisun.

Huom: funktioita voi kutsua myös perään pilkuilla!

Async / wait

tämä on ylivoimaisesti tärkein ja hyödyllisin ominaisuus, jos minulta kysytään. Async-toimintojen avulla voimme olla käsittelemättä takaisinsoittohelvettiä ja saada koko koodin näyttämään yksinkertaiselta.

async avainsana käskee JavaScript-kääntäjää kohtelemaan funktiota eri tavalla. Kääntäjä pysähtyy aina, kun se saavuttaa await – hakusanan kyseisen funktion sisällä. Se olettaa, että await jälkeen lauseke palauttaa lupauksen ja odottaa, kunnes lupaus ratkeaa tai hylätään, ennen kuin etenee pidemmälle.

alla olevassa esimerkissä getAmount funktio kutsuu kahta asynkronista funktiota getUser ja getBankBalance . Voimme tehdä tämän lupaavasti, mutta async await käyttäminen on tyylikkäämpää ja yksinkertaisempaa.

6.1 Async-toiminnot palauttavat itse lupauksen.

jos odotat tulosta async-funktiolta, sinun on käytettävä Promise-funktion then syntaksia sen tuloksen kuvaamiseen.

seuraavassa esimerkissä haluamme kirjata tuloksen käyttämällä console.log, mutta ei doubleandaddin sisällä. Haluamme siis odottaa ja käyttää then syntaksia siirtääksemme tuloksen console.log .

6.2 Soita Async/odota rinnakkain

edellisessä esimerkissä soitamme odota kahdesti, mutta joka kerta odotamme yhden sekunnin (yhteensä 2 sekuntia). Sen sijaan voimme paralleloida sen, koska a ja b eivät ole riippuvaisia toisistaan käyttäen Promise.all.

6.3 Async / wait-toimintojen käsittely

on olemassa useita tapoja käsitellä virheitä käytettäessä Async wait-toimintoa.

vaihtoehto 1 — Käytä try catch in the function

Option 2— Catch every wait-lauseke

koska jokainen await – lauseke palauttaa lupauksen, voit napata virheitä jokaisella rivillä alla olevalla tavalla.

vaihtoehto 3-Catch the entire async-wait-toiminto

ECMAScript on tällä hetkellä lopullisessa luonnoksessa ja ilmestyy kesä-tai heinäkuussa 2018. Kaikki alla mainitut ominaisuudet ovat vaiheessa 4 ja ne ovat osa ECMAScript 2018: aa.

1. Jaettu muisti ja atomiikka

tämä on valtava, melko kehittynyt ominaisuus ja on JS-moottoreiden perusparannus.

pääidea on tuoda Javascriptiin jonkinlainen monisäikeinen ominaisuus, jotta JS-kehittäjät voivat tulevaisuudessa kirjoittaa suorituskykyisiä, samanaikaisia ohjelmia antamalla hallita muistia itse sen sijaan, että JS engine hallitsisi muistia.

tämän tekee uudenlainen globaali olio nimeltä SharedArrayBuffer, joka käytännössä tallentaa dataa jaettuun muistiavaruuteen. Joten nämä tiedot voidaan jakaa pääjs säiettä ja web-worker kierteet.

tähän asti, jos haluamme jakaa tietoja JS: n pääjanan ja verkkotyöntekijöiden välillä, meidän oli kopioitava tiedot ja lähetettävä ne toiselle langalle käyttäen postMessage . Ei enää!

käytät vain Sharedarraybufferia ja tiedot ovat välittömästi saatavilla sekä pääkierteen että useiden web-työntekijäketjujen kautta.

mutta muistin jakaminen kierteiden kesken voi aiheuttaa kisaolosuhteita. Kisaolosuhteiden välttämiseksi käyttöön otetaan” Atomics ” – niminen globaali objekti. Atomics tarjoaa erilaisia menetelmiä lukita jaettu muisti, kun säie käyttää sen tietoja. Se tarjoaa myös menetelmiä päivittää tällaisia tietoja kyseisessä jaetussa muistissa turvallisesti.

suositus on käyttää tätä ominaisuutta jonkin kirjaston kautta, mutta tällä hetkellä tämän ominaisuuden päälle ei ole rakennettu kirjastoja.

jos olet kiinnostunut, suosittelen lukemista:

1. työläisistä jaettuun muistiin-lucasfcosta
2. sarjakuvamainen intro SharedArrayBuffers – Lin Clark
3. Jaettu muisti ja atomiikka – tohtori Axel Rauschmayer

2. Tagged Template literal restriction removed

First, we need to clarify what a ”Tagged Template literal” is so we can understand this feature better.

Es2015+: ssa on ominaisuus nimeltä tagged template literal, jonka avulla kehittäjät voivat muokata merkkijonojen interpolointia. Esimerkiksi vakiotavalla merkkijonot interpoloidaan kuten alla…

merkittyyn kirjaimeen voi kirjoittaa funktion, joka vastaanottaa merkkijonon kovakoodatut osat, esimerkiksi , ja korvaavat muuttujat, esimerkiksi, parametreina mukautettuun funktioon (esimerkiksi greet), ja palauttaa mitä haluat kyseiseltä mukautetulta funktiolta.

alla oleva esimerkki osoittaa, että oma ” Tag ”- funktiomme greet liittää kellonajan kuten ” Good Morning!””Hyvää iltapäivää,” ja niin edelleen riippuen kellonajasta merkkijono kirjaimellisesti ja palauttaa mukautetun merkkijono.

nyt kun keskustelimme siitä, mitä ”Tagged” – funktiot ovat, monet ihmiset haluavat käyttää tätä ominaisuutta eri alueilla, kuten päätteessä komentoja ja HTTP-pyyntöjä urien kirjoittamiseen ja niin edelleen.

️ ️ Tagged String literal

joten jos sinulla on Tagged-funktio, joka käyttää sisäisesti jonkin muun verkkotunnuksen sääntöjä (kuten päätteen sääntöjä), joka saattaa joutua käyttämään \ubla123ablaa, joka ei näytä \u0049: ltä tai \u{@F804}: ltä, saat syntaksivirheen.

ES2018: ssa sääntöjä on höllennetty niin, että tällaiset näennäisesti virheelliset pakomerkit sallitaan, kunhan merkitty funktio palauttaa arvot objektissa, jossa on ”keitetty” ominaisuus (jossa virheelliset merkit ovat ”määrittelemätön”), ja sitten ”raaka” ominaisuus (millä tahansa haluat).

”dotall” lippu säännölliselle lausekkeelle

tällä hetkellä Regexissä, vaikka piste(”.”) oletetaan vastaavan yhtä merkkiä, se ei vastaa uusia rivihahmoja kuten \n \r \f etc.

esimerkiksi:

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

tämän parannuksen ansiosta pisteoperaattori voi vastata mitä tahansa yksittäistä merkkiä. Jotta tämä ei rikkoisi mitään, meidän on käytettävä \s lippua luodessamme Regexiä, jotta tämä toimisi.

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

tässä on ehdotuksen KOKONAISRAJAPINTA doc:

RegExp nimetty ryhmä kaappaa ?

tämä parannus tuo hyödyllisen RegExp-ominaisuuden muista kielistä, kuten Pythonista, Javasta ja niin edelleen, nimeltään ” nimetyt ryhmät.”Tämän ominaisuuden avulla regexp: tä kirjoittavat kehittäjät voivat antaa nimiä (tunnisteita) muodossa(?<name>...) ryhmän eri osille RegExp: ssä. He voivat sitten käyttää tätä nimeä napata kumpi ryhmä he tarvitsevat helposti.

4.1 Basic nimetty ryhmä esimerkki

4.2 Käyttämällä nimettyjä ryhmiä itse regexissä

voimme käyttää \k<group name> muotoa viitataksemme ryhmän takaisin regexissä itsessään. Seuraava esimerkki osoittaa, miten se toimii.

4.3 nimettyjen ryhmien käyttäminen merkkijonossa.prototyyppi.korvaa

nimetty ryhmäominaisuus on nyt leivottu stringin replace instanssimenetelmään. Joten voimme helposti vaihtaa sanoja merkkijono.

vaihda esimerkiksi ”etunimi, sukunimi” muotoon ”sukunimi, etunimi”.

Rest properties for Objects

Rest operator ... (kolme pistettä) voimme poimia objektin ominaisuuksia, joita ei ole vielä purettu.

5.1 voit käyttää lepoa auttaaksesi purkamaan vain haluamiasi ominaisuuksia

5.2 vielä parempi, voit poistaa ei-toivottuja kohteita! ??

Spread properties for Objects

Spread properties näyttää myös aivan samalta kuin rest properties kolmella pisteellä ..., mutta erona on, että spreadilla luodaan (uudelleenjärjestellään) uusia objekteja.

Vihje: hajaoperaattoria käytetään yhtäsuuruusmerkin oikeassa reunassa. Loput käytetään yhtäsuuruusmerkin vasemmalla puolella.

RegExp Lookbehind Assertions

tämä on parannusta Regexiin, jonka avulla voimme varmistaa jonkin merkkijonon olemassaolon välittömästi *ennen* jotain muuta merkkijonoa.

voit nyt käyttää ryhmää (?<=…) (kysymysmerkki, pienempi kuin, yhtä suuri) positiivisen väitteen etsimiseen.

positiivinen väite: sanotaan, että haluamme varmistaa, että # – merkki on olemassa ennen sanaa winning (eli: #winning) ja haluamme regeksin palauttavan vain merkkijonon ”voittaa”. Näin kirjoittaisit sen.

negatiivinen väite: sanotaan, että haluamme poimia numeroita riveistä, joilla on € merkkejä eikä $ merkkejä ennen näitä numeroita.

RegExp Unicode-ominaisuus pakenee

ei ollut helppoa kirjoittaa Regexiä vastaamaan eri unicode-merkkejä. Asioita kuten \w , \W , \d etc vain vastaavat Englanti merkkejä ja numeroita. Mutta entä numerot muilla kielillä, kuten hindiksi, kreikaksi ja niin edelleen?

siinä kohtaa Unicode-omaisuuden Karkaamiset tulevat vastaan. Käy ilmi, että Unicode lisää metatieto-ominaisuuksia jokaiselle symbolille (merkille) ja käyttää sitä ryhmittelemään tai luonnehtimaan erilaisia symboleita.

esimerkiksi Unicode-tietokanta ryhmittelee kaikki Hindinkieliset merkit (sananjulistusdynamiikka) alle ominaisuuden nimeltä Script, jonka arvo on Devanagari, ja toisen ominaisuuden nimeltä Script_Extensions, jonka arvo on sama Devanagari. Joten voimme etsiä Script=Devanagari ja saada kaikki Hindinkieliset merkit.

Devanagarista voidaan käyttää useita intialaisia kieliä, kuten Marathia, hindiä, sanskritia ja niin edelleen.

alkaen ECMAScript 2018: sta voimme käyttää \p pakomerkkejä yhdessä {Script=Devanagari}: n kanssa vastaamaan kaikkia noita intialaisia merkkejä. Toisin sanoen voimme käyttää: \p{Script=Devanagari} Regexissä kaikkia Devanagari-merkkejä vastaaviksi.

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

vastaavasti Unicode-tietokanta ryhmittelee kaikki kreikkalaiset merkit alle Script_Extensions (ja Script) – ominaisuuden arvolla Greek . Voimme siis etsiä kaikkia kreikkalaisia merkkejä käyttämällä Script_Extensions=Greek tai Script=Greek .

eli Regeksissä voidaan käyttää: \p{Script=Greek} kaikkia kreikkalaisia merkkejä.

//The following matches a single Greek character/\p{Script_Extensions=Greek}/u.test('π'); // true

edelleen, Unicode tietokanta tallentaa erilaisia Emojis alla boolean ominaisuudet Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, ja Emoji_Modifier_Base, jossa omaisuusarvot ovat ”tosi”. Voimme siis etsiä kaikkia emojeja yksinkertaisesti valitsemalla Emoji todeksi.

eli voidaan käyttää: \p{Emoji} ,\Emoji_Modifier ja niin edelleen erilaisia emojeja.

seuraava esimerkki tekee kaiken selväksi.

lopuksi, voimme käyttää isoa ”P”(\P ) escape-merkkiä pienen p: n (\p) sijaan, mitätöidä ottelut.

1. ECMAScript 2018 Ehdotus

Lupaus.prototyyppi.lopultakin()

finally() on uusi esimerkki menetelmä, joka lisättiin lupaus. Pääidea on mahdollistaa takaisinkutsun suorittaminen joko resolve: n tai reject: n jälkeen, jotta asiat saadaan siivottua. finally takaisinsoittoa kutsutaan ilman mitään arvoa ja se suoritetaan aina riippumatta siitä, mitä tapahtuu.

tarkastellaan eri tapauksia.

asynkroninen iteraatio

tämä on *erittäin* hyödyllinen ominaisuus. Pohjimmiltaan sen avulla voimme luoda silmukoita async koodi helposti!

tämä ominaisuus lisää uuden” for-wait-of ” – silmukan, jonka avulla voimme kutsua Async-funktioita, jotka palauttavat lupauksia (tai taulukoita, joissa on nippu lupauksia) silmukassa. Siistiä on, että silmukka odottaa jokaisen lupauksen ratkeavan ennen kuin tekee seuraavan silmukan.

That ’ s pretty much it!

jos tästä oli hyötyä, klikkaa klapia ? button down below muutaman kerran näyttää tukea! ⬇⬇⬇ ??

my Other Posts

1. Tsekkaa nämä hyödylliset ECMAScript 2015 (ES6) vinkit ja temput
2. 5 JavaScript ”huonot” osat, jotka on korjattu ES6: ssa
3. onko ”Luokka” ES6: ssa Uusi ”huono” osa?