Her er eksempler på alt nytt I ECMAScript 2016, 2017 og 2018

etter rajaraodv

det er vanskelig å holde styr på hva som er nytt I JavaScript (ECMAScript). Og det er enda vanskeligere å finne nyttige kodeeksempler.

så i denne artikkelen vil jeg dekke alle 18 funksjonene som er oppført I TC39S ferdige forslag som ble lagt TIL I ES2016, ES2017 OG ES2018 (endelig utkast) og vise dem med nyttige eksempler.

Dette er et ganske langt innlegg, men bør være lettlest. Tenk på dette som » Netflix binge reading.»Ved slutten av dette lover jeg at du vil ha massevis av kunnskap om alle disse funksjonene.

OK, la oss gå over disse en etter en.

Array.prototype.inkluderer

includes er en enkel forekomstmetode på Matrisen og bidrar til å enkelt finne om et element er I Matrisen (inkludert NaN i motsetning til indexOf).

Trivia: JavaScript-spesifikasjonen folk ønsket å nevne det contains, men Dette var tilsynelatende allerede brukt av Mootools, så de brukte includes .

Eksponering infix operator

Matematiske operasjoner som addisjon og subtraksjon har infix-operatorer som + og -. I likhet med dem er ** infix-operatøren ofte brukt til eksponentoperasjon. I ECMAScript 2016 ble ** introdusert i stedet for Math.pow.

Objekt.verdier()

Object.values() er en ny funksjon som ligner Object.keys(), men returnerer alle verdiene Til Objektets egne egenskaper, unntatt noen verdi (er) i den prototypiske kjeden.

Objekt.innlegg()

Object.entries() er relatert til Object.keys, men i stedet for å returnere bare nøkler, returnerer den både nøkler og verdier i matrisen. Dette gjør det veldig enkelt å gjøre ting som å bruke objekter i looper eller konvertere objekter til Kart.

Eksempel 1:

Eksempel 2:

strengpolstring

To instansmetoder ble lagt Til Streng – String.prototype.padStart og String.prototype.padEnd – som tillater å legge til / prepending enten en tom streng eller en annen streng til starten eller slutten av den opprinnelige strengen.

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

Dette kommer til nytte når vi vil justere ting i scenarier som pretty print display eller terminal print.

3.1 padStart eksempel:

i eksemplet nedenfor har vi en liste over tall med varierende lengder. Vi ønsker å prepend «0» slik at alle elementene har samme lengde på 10 sifre for visningsformål. Vi kan bruke padStart(10, '0') for å enkelt oppnå dette.

3.2 padEnd eksempel:

padEnd virkelig kommer til nytte når vi skriver ut flere elementer av varierende lengder og ønsker å rette dem riktig.

eksemplet nedenfor er et godt realistisk eksempel på hvordan padEnd, padStart og Object.entries alle kommer sammen for å produsere en vakker utgang.

3.3 ⚠️ padStart og padEnd På Emojis og andre dobbeltbyte tegn

Emojis og andre dobbeltbyte tegn er representert ved hjelp av flere byte av unicode. Så padStart og padEnd kanskje ikke fungerer som forventet!⚠ ️

for Eksempel: la oss si at vi prøver å legge strengen heart for å nå 10 tegn med den ❤ ️ emoji. Resultatet vil se ut nedenfor:

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

dette er fordi ❤ ️ er 2 kodepoeng lang ('\u2764\uFE0F')! Ordet heart selv er 5 tegn, så vi har bare totalt 5 tegn igjen til pad. Så hva som skjer ER AT JS pads to hjerter bruker '\u2764\uFE0F' og som produserer❤ ️ ❤ ️. For den siste bruker den bare den første byten i hjertet \u2764 som produserer ❤

Så vi ender med: ❤️❤️❤heart

PS: du kan bruke denne linken for å sjekke ut unicode char konverteringer.

Objekt.getOwnPropertyDescriptors

denne metoden returnerer alle detaljer (inkludert getter get og setter set metoder) for alle egenskapene til et gitt objekt. Hovedmotivasjonen for å legge til dette er å tillate grunne kopiering / kloning av et objekt til et annet objekt som også kopierer getter og setter-funksjoner i motsetning til Object.assign.

Objekt.tilordne grunne kopier alle detaljer unntatt getter og setter funksjoner av det opprinnelige kildeobjektet.

eksemplet nedenfor viser forskjellen mellom Object.assign og Object.getOwnPropertyDescriptors sammen med Object.defineProperties for å kopiere et originalt objekt Car til et nytt objekt ElectricCar. Du vil se at ved å bruke Object.getOwnPropertyDescriptors ,discount getter og setter-funksjoner også kopieres til målobjektet.

FØR…

ETTER…

Legg til etterfølgende kommaer i funksjonsparametrene

Dette er en mindre oppdatering som gjør at vi kan ha etterfølgende kommaer etter den siste funksjonsparameteren. Hvorfor? Å hjelpe med verktøy som git blame for å sikre at bare nye utviklere får skylden.

eksemplet nedenfor viser problemet og løsningen.

Merk: du kan også ringe funksjoner med etterfølgende kommaer!

Async / Await

Dette er langt den viktigste og mest nyttige funksjonen hvis du spør meg. Async funksjoner tillater oss å ikke håndtere tilbakeringing helvete og gjøre hele koden ser enkel.

nøkkelordet async forteller JavaScript-kompilatoren å behandle funksjonen annerledes. Kompilatoren pauser når den når await søkeordet i denne funksjonen. Det antas at uttrykket etter await returnerer et løfte og venter til løftet er løst eller avvist før du går videre.

i eksemplet nedenfor kaller funksjonen getAmount to asynkrone funksjoner getUser og getBankBalance. Vi kan gjøre dette i promise, men å bruke async await er mer elegant og enkelt.

6.1 Async funksjoner selv returnere Et Løfte.

hvis du venter på resultatet fra en asynkron funksjon, må Du bruke Promise ‘ s then syntaks for å fange resultatet.

i følgende eksempel vil vi logge resultatet med console.log, men ikke innenfor doubleAndAdd. Så vi vil vente og bruke then syntaks for å sende resultatet til console.log.

6.2 Ringer async / venter parallelt

i forrige eksempel ringer vi venter to ganger, men hver gang vi venter på ett sekund(totalt 2 sekunder). I stedet kan vi parallellisere det siden a og b ikke er avhengige av hverandre ved hjelp av Promise.all.

6.3 Feilhåndtering async / await funksjoner

Det finnes ulike måter å håndtere feil når du bruker async await.

Alternativ 1-Bruk try catch i funksjonen

Alternativ 2-Catch hvert await-uttrykk

siden hvert await uttrykk returnerer Et Løfte, kan du fange feil på hver linje som vist nedenfor.

Alternativ 3-Fange hele async — avvente funksjon

ECMAScript er for tiden i endelig utkast og vil være ute i juni eller juli 2018. Alle funksjonene som dekkes nedenfor er I Stage-4 og vil være en Del Av ECMAScript 2018.

1. Delt minne og atomics

dette er en stor, ganske avansert funksjon og er en kjerneforbedring FOR JS-motorer.

hovedideen er å bringe en slags multi-threading-funksjon Til JavaScript, slik AT js-utviklere kan skrive høyytelses, samtidige programmer i fremtiden ved å tillate å administrere minne av seg selv i stedet FOR Å la JS engine administrere minne.

Dette gjøres av En ny type av et globalt objekt kalt SharedArrayBuffer som i hovedsak lagrer data i et delt minneområde. Så disse dataene kan deles mellom hoved js tråden og web-worker tråder.

Inntil nå, hvis vi vil dele data mellom JS-tråden OG webarbeidere, måtte vi kopiere dataene og sende den til den andre tråden ved hjelp av postMessage . Ikke nå lenger!

Du bare bruker SharedArrayBuffer og dataene er umiddelbart tilgjengelig med både hovedtråden og flere web-worker tråder.

men deling av minne mellom tråder kan forårsake raseforhold. For å unngå raseforhold blir» Atomics » global object introdusert. Atomics gir ulike metoder for å låse delt minne når en tråd bruker sine data. Det gir også metoder for å oppdatere slike data i det delte minnet trygt.

anbefalingen er å bruke denne funksjonen via noe bibliotek, men akkurat nå er det ingen biblioteker bygget på toppen av denne funksjonen.

hvis du er interessert, anbefaler jeg å lese:

1. fra Arbeidere Til Delt Minne — lucasfcosta
2. en tegneserie intro Til SharedArrayBuffers-Lin Clark
3. Delt minne og atomics-Dr. Axel Rauschmayer

2. Tagged Template literal restriction removed

Først må Vi avklare hva En «Tagged Template literal» er slik at vi kan forstå denne funksjonen bedre.

I ES2015+ er DET en funksjon kalt en tagged template literal som lar utviklere tilpasse hvordan strenger interpoleres. For eksempel, i standard måte er strenger interpolert som nedenfor…

i tagged literal kan du skrive en funksjon for å motta de hardkodede delene av string literal, for eksempel , og erstatningsvariablene, for eksempel, som parametere i en egendefinert funksjon (for eksempel greet ), og returnere hva du vil fra den egendefinerte funksjonen.

eksemplet nedenfor viser at vår tilpassede » Tag «- funksjon greet legger til tid på dagen som » God Morgen!»»God ettermiddag,» og så videre avhengig av tid på dagen til strengen bokstavelig og returnerer en tilpasset streng.

nå som vi diskuterte hva «Taggede» funksjoner er, vil mange mennesker bruke denne funksjonen i forskjellige domener, som I Terminal for kommandoer og HTTP-forespørsler for å komponere Urier, og så videre.

⚠ ️ Problemet med tagged String Literal

så hvis du har en tagged Funksjon som internt bruker noen andre domeneregler (som terminals regler), som kanskje må bruke \ ubla123abla som ikke ser ut som \u0049 eller \ u {@f804}, vil du få en syntaksfeil.

I ES2018 er reglene avslappet for å tillate slike tilsynelatende ugyldige escape-tegn så lenge Den Merkede funksjonen returnerer verdiene i et objekt med en» tilberedt «egenskap (der ugyldige tegn er» udefinert»), og deretter en» rå » egenskap (med hva du vil).

«dotall» flagg for Regulært uttrykk

for Tiden I RegEx, selv om prikken («.») skal matche et enkelt tegn, det samsvarer ikke med nye linjetegn som \n \r \f etc.

for eksempel:

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

denne forbedringen gjør det mulig for dot-operatøren å matche et enkelt tegn. For å sikre at dette ikke bryter noe, må vi bruke \s flagg når Vi lager RegEx for at dette skal fungere.

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

Her er den samlede API fra forslaget doc:

RegExp Navngitt Gruppe Fanger ?

denne forbedringen gir en nyttig RegExp-funksjon fra andre språk som Python, Java og så videre kalt » Navngitte Grupper.»Denne funksjonen lar utviklere skrive RegExp å gi navn (identifikatorer) i formatet(?<name>...) for ulike deler av gruppen I RegExp. De kan da bruke det navnet til å ta tak i hvilken gruppe de trenger med letthet.

4.1 Grunnleggende Navngitte gruppeeksempel

4.2 Ved Å Bruke Navngitte grupper i regex selv

Kan vi bruke formatet \k<group name> for å referere til gruppen i regex selv. Følgende eksempel viser hvordan det fungerer.

4.3 Bruke navngitte grupper i Streng.prototype.erstatt

den navngitte gruppefunksjonen er nå bakt inn I Strengens instansmetode replace. Så vi kan enkelt bytte ord i strengen.

endre for eksempel «fornavn, etternavn» til «etternavn, fornavn».

Rest-egenskaper For Objekter

Rest-operatør ... (tre prikker) kan vi trekke Ut Objektegenskaper som ikke allerede er hentet ut.

5.1 du kan bruke rest til å trekke ut bare egenskaper du vil

5.2 Enda bedre, du kan fjerne uønskede elementer! ??

Spredningsegenskaper For Objekter

Spredningsegenskaper ser også ut som rest-egenskaper med tre prikker ..., men forskjellen er at du bruker spread til å opprette (restrukturere) nye objekter.

Tips: spread-operatoren brukes på høyre side av likhetstegnet. Resten brukes i venstre side av likhetstegnet.

RegExp Lookbak Påstander

Dette er en forbedring Av RegEx som tillater oss å sikre at noen streng eksisterer umiddelbart * før * en annen streng.

Du kan nå bruke en gruppe (?<=…) (spørsmålstegn, mindre enn, lik) for å se etter positiv påstand.

Positiv Påstand: la oss si at vi vil sikre at # – tegnet eksisterer før ordet winning (det vil si: #winning) og vil at regex skal returnere bare strengen «vinnende». Her er hvordan du vil skrive det.

Negativ Påstand: la oss si at vi ønsker å trekke ut tall fra linjer som har € tegn og ikke $ tegn før disse tallene.

RegExp Unicode Eiendom Rømming

Det var ikke lett å skrive RegEx å matche ulike unicode-tegn. Ting som \w , \W , \d etc bare matche engelske tegn og tall. Men hva med tall på andre språk som Hindi, gresk og så videre?

Det er Der Unicode Property Escapes kommer inn. Det viser Seg At Unicode legger til metadataegenskaper for hvert symbol (tegn) og bruker det til å gruppere eller karakterisere ulike symboler.

Unicode-databasen grupperer for eksempel Alle Hindi-tegn (हिन्दी) under en egenskap kalt Script med verdi Devanagari og en annen egenskap kalt Script_Extensions med samme verdi Devanagari. Så vi kan søke etter Script=Devanagari og få Alle Hindi-tegn.

Devanagari kan brukes til Ulike Indiske språk som Marathi, Hindi, Sanskrit, Og så videre.

Fra ECMAScript 2018 kan vi bruke \p for å unnslippe tegn sammen med {Script=Devanagari} for å matche alle De Indiske tegnene. Det vil si, vi kan bruke: \p{Script=Devanagari} I RegEx for å matche Alle Devanagari-tegn.

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

På Samme Måte grupperer Unicode-databasen alle greske tegn under egenskapen Script_Extensions (og Script ) med verdien Greek. Så vi kan søke etter alle greske tegn ved hjelp av Script_Extensions=Greek eller Script=Greek.

Det vil si, vi kan bruke: \p{Script=Greek} I RegEx for å matche alle greske tegn.

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

Lengre, Unicode database lagrer ulike typer Emojis under boolske egenskaper Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, og Emoji_Modifier_Base med egenskapsverdier som ‘true’. Så vi kan søke etter Alle Emojis ved å velge Emoji for å være sant.

Det vil si, vi kan bruke: \p{Emoji}, \Emoji_Modifier og så videre for å matche ulike Typer Emojis.

følgende eksempel vil gjøre alt klart.

Til Slutt kan vi bruke kapital»P» (\P ) escape-tegn i stedet for liten p (\p) for å negere kampene.

1. ECMAScript 2018 Forslag

Løfte.prototype.endelig()

finally() er en ny instans metode som ble lagt Til Promise. Hovedideen er å tillate å kjøre en tilbakeringing etter enten resolve eller rejectfor å rydde opp ting. finally tilbakeringing kalles uten verdi og utføres alltid uansett hva.

La oss se på ulike saker.

Asynkron Iterasjon

Dette er en * ekstremt * nyttig funksjon. I utgangspunktet tillater det oss å lage looper av asynkron kode med letthet!

Denne funksjonen legger til en ny» for-await-of » loop som gjør at vi kan ringe async-funksjoner som returnerer løfter (Eller Arrays med en rekke løfter) i en loop. Det kule er at løkken venter på hvert Løfte om å løse før du gjør til neste løkke.

Det er ganske mye det!

hvis dette var nyttig, vennligst klikk på klaffen ? knapp ned under et par ganger for å vise din støtte! ⬇⬇⬇ ??

Mine Andre Innlegg

1. Sjekk ut disse nyttige ECMAScript 2015 (ES6) tips og triks
2. 5 JavaScript «Dårlige» Deler Som Er Løst I ES6
3. Er «Klasse» I ES6 Den Nye «Dårlige» Delen?