Her er eksempler på alt nyt i ECMAScript 2016, 2017 og 2018

af rajaraodv

det er svært at holde styr på, hvad der er nyt i JavaScript (ECMAScript). Og det er endnu sværere at finde nyttige kodeeksempler.

så i denne artikel vil jeg dække alle 18 funktioner, der er angivet i TC39 ‘ s færdige forslag, der blev tilføjet i ES2016, ES2017 og ES2018 (final draft) og vise dem med nyttige eksempler.

dette er en temmelig lang indlæg, men bør være en nem at læse. Tænk på dette som ” binge reading.”I slutningen af dette lover jeg, at du vil have masser af viden om alle disse funktioner.

OK, lad os gå over disse en efter en.

Array.prototype.inkluderer

includes er en simpel forekomstmetode på arrayet og hjælper med nemt at finde, om et element er i arrayet (inklusive NaNi modsætning til indexOf).

ECMAScript 2016 eller ES7 — Array.prototype.inkluderer()

Trivia: JavaScript spec folk ønskede at navngive det contains, men dette blev tilsyneladende allerede brugt af Mootools, så de brugte includes.

Eksponentiering infix operator

matematiske operationer som addition og subtraktion har infiksoperatører som henholdsvis + og -. I lighed med dem er ** infiksoperatøren almindeligt anvendt til eksponentoperation. I ECMAScript 2016 blev ** introduceret i stedet for Math.pow .

ECMAScript 2016 eller ES7 – * * Eksponentinfiksoperatør

objekt.værdier()

Object.values() er en ny funktion, der ligner Object.keys(), men returnerer alle værdierne for objektets egne egenskaber eksklusive eventuelle værdier i den prototypiske kæde.

ECMAScript 2017 (ES8)— objekt.værdier()

objekt.poster()

Object.entries() er relateret til Object.keys, men i stedet for at returnere bare nøgler, returnerer den både nøgler og værdier i array mode. Dette gør det meget nemt at gøre ting som at bruge objekter i sløjfer eller konvertere objekter til kort.

eksempel 1:

ECMAScript 2017 (ES8) — brug af objekt.poster () i sløjfer

eksempel 2:

ECMAScript 2017 (ES8) — brug af objekt.poster () for at konvertere objekt til kort

Strengpolstring

to instansmetoder blev føjet til streng — String.prototype.padStart og String.prototype.padEnd — der tillader tilføjelse/forberedelse af enten en tom streng eller en anden streng til starten eller slutningen af den originale streng.

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

dette er praktisk, når vi vil justere ting i scenarier som pretty print display eller terminal print.

3.1 padStart eksempel:

i nedenstående eksempel har vi en liste over tal af varierende længder. Vi ønsker at prepend” 0″, så alle elementer har samme længde på 10 cifre til visningsformål. Vi kan bruge padStart(10, '0') til nemt at opnå dette.

ECMAScript 2017-padStart eksempel

3.2 padEnd eksempel:

padEnd virkelig kommer i handy, når vi udskriver flere elementer af varierende længder og ønsker at justere dem korrekt.

eksemplet nedenfor er et godt realistisk eksempel på, hvordan padEnd, padStart og Object.entries alle kommer sammen for at producere en smuk output.

ECMAScript 2017 — padEnd, padStart og Object.Indlæg eksempel

3.3 ⚠️ padStart og padEnd på Emojis og andre dobbelt-byte tegn

Emojis og andre dobbelt-byte tegn er repræsenteret ved hjælp af flere byte af unicode. Så padStart og padEnd fungerer muligvis ikke som forventet!For eksempel: lad os sige, at vi forsøger at padde strengen heart for at nå 10 tegn med den venstre emoji. Resultatet vil se ud som nedenfor:

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

dette skyldes, at Kristian er 2 kodepunkter lang ('\u2764\uFE0F')! Ordet heart selv er 5 tegn, så vi har kun i alt 5 tegn tilbage til pad. Så hvad der sker er, at JS pads to hjerter ved hjælp af '\u2764\uFE0F', og det producerer price. For den sidste bruger den simpelthen den første byte af hjertet \u2764, som producerer liter

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

PS: du kan bruge dette link til at tjekke unicode char konverteringer.

objekt.denne metode returnerer alle detaljer (inklusive getter getog setter set metoder) for alle egenskaberne for et givet objekt. Hovedmotivationen til at tilføje dette er at tillade overfladisk kopiering / kloning af et objekt til et andet objekt, der også kopierer getter-og setter-funktioner i modsætning til Object.assign .

objekt.Tildel lavvandede Kopier alle detaljer undtagen getter og setter funktioner i den oprindelige kilde objekt.

eksemplet nedenfor viser forskellen mellem Object.assign og Object.getOwnPropertyDescriptors sammen med Object.defineProperties for at kopiere et originalt objekt Car til et nyt objekt ElectricCar. Du vil se, at ved at bruge Object.getOwnPropertyDescriptors, discount getter og setter funktioner kopieres også til målobjektet.

før…

før-brug af objekt.Tildel

efter…

ECMAScript 2017 (ES8) – objekt.Hent propertydescriptors

Tilføj efterfølgende kommaer i funktionsparametrene

dette er en mindre opdatering, der giver os mulighed for at have efterfølgende kommaer efter den sidste funktionsparameter. Hvorfor? At hjælpe med værktøjer som git blame for at sikre, at kun nye udviklere får skylden.

nedenstående eksempel viser problemet og løsningen.

ECMAScript 2017 (ES 8) — efterfølgende komma i funktionsparameter

Bemærk: Du kan også ringe til funktioner med efterfølgende kommaer!

Async/venter

dette er langt den vigtigste og mest nyttige funktion, hvis du spørger mig. Async-funktioner giver os mulighed for ikke at håndtere tilbagekald helvede og få hele koden til at se enkel ud.

nøgleordet async fortæller JavaScript-kompilatoren at behandle funktionen forskelligt. Kompilatoren holder pause, når den når await nøgleordet inden for denne funktion. Det antages, at udtrykket efter await returnerer et løfte og venter, indtil løftet er løst eller afvist, før det går videre.

i nedenstående eksempel kalder funktionen getAmount to asynkrone funktioner getUser og getBankBalance. Vi kan gøre dette I promise, men at bruge async await er mere elegant og simpelt.

ECMAScript 2017 (ES 8) – Async afventer grundlæggende eksempel

6.1 async funktioner selv returnere et løfte.

hvis du venter på resultatet fra en async-funktion, skal du bruge Promise ‘ s then syntaks for at fange resultatet.

i det følgende eksempel vil vi logge resultatet ved hjælp af console.log men ikke inden for doubleAndAdd. Så vi vil vente og bruge then syntaks for at videregive resultatet til console.log .

ECMAScript 2017 (ES 8) – Async venter sig vender tilbage løfte

6.2 opkald async / afventer parallelt

i det foregående eksempel ringer vi venter to gange, men hver gang vi venter på et sekund (i alt 2 sekunder). I stedet kan vi parallelisere det, da a og b ikke er afhængige af hinanden ved hjælp af Promise.all.

ECMAScript 2017 (ES 8) — Brug løfte.alt for at parallelisere async / afvente

6.3 fejlhåndtering async / afventer funktioner

der er forskellige måder at håndtere fejl på, når du bruger async afventer.

valgmulighed 1 — Brug prøv fangst inden for funktionen

ECMAScript 2017 — brug prøv fangst inden for async/afventningsfunktionen

valgmulighed 2— Fang hvert afventende udtryk

da hvert await udtryk returnerer et løfte, kan du fange fejl på hver linje som vist nedenfor.

ECMAScript 2017-brug prøv at fange hvert afventende udtryk

valgmulighed 3-Fang hele async-afventningsfunktion

ECMAScript 2017-Fang hele async/afventningsfunktionen i slutningen

ECMAScript er i øjeblikket i det endelige udkast og vil være ude i juni eller juli 2018. Alle de funktioner, der er dækket nedenfor, er i fase 4 og vil være en del af ECMAScript 2018.

1. Delt hukommelse og atomics

dette er en enorm, temmelig avanceret funktion og er en kerneforbedring til JS-motorer.

hovedideen er at bringe en slags multi-threading-funktion til JavaScript, så JS-udviklere kan skrive højtydende, samtidige programmer i fremtiden ved at tillade at styre hukommelsen alene i stedet for at lade JS engine styre hukommelsen.

dette gøres af en ny type af et globalt objekt kaldet SharedArrayBuffer, der i det væsentlige gemmer data i et delt hukommelsesplads. Så disse data kan deles mellem de vigtigste JS-tråd og netarbejdertråde.

indtil nu, hvis vi ønsker at dele data mellem den vigtigste JS-tråd og internetarbejdere, måtte vi kopiere dataene og sende dem til den anden tråd ved hjælp af postMessage . Ikke længere!

du bruger simpelthen SharedArrayBuffer, og dataene er øjeblikkeligt tilgængelige af både hovedtråden og flere netarbejdertråde.

men deling af hukommelse mellem tråde kan forårsage raceforhold. For at hjælpe med at undgå raceforhold introduceres det “Atomics” globale objekt. Atomics giver forskellige metoder til at låse den delte hukommelse, når en tråd bruger sine data. Det giver også metoder til at opdatere sådanne data i den delte hukommelse sikkert.

anbefalingen er at bruge denne funktion via et bibliotek, men lige nu er der ingen biblioteker bygget oven på denne funktion.

hvis du er interesseret, anbefaler jeg at læse:

  1. fra arbejdere til delt hukommelse — lucasfcosta
  2. en tegneserie intro til SharedArrayBuffers-Lin Clark
  3. delt hukommelse og atomics-Dr. aksel Rauschmayer

2. Tagged Template literal restriction fjernet

først skal vi præcisere, hvad en “Tagged Template literal” er, så vi kan forstå denne funktion bedre.

i ES2015+ er der en funktion kaldet en tagged template literal, der giver udviklere mulighed for at tilpasse, hvordan strenge interpoleres. For eksempel interpoleres strenge på standard måde som nedenfor…

i tagged literal kan du skrive en funktion til at modtage de hardkodede dele af strengen literal, for eksempel , og erstatningsvariablerne , for eksempel, som parametre i en brugerdefineret funktion (for eksempel greet) og returnere, hvad du vil fra den brugerdefinerede funktion.

nedenstående eksempel viser, at vores brugerdefinerede “Tag” – funktion greet tilføjer tidspunktet på dagen som ” God Morgen!””God eftermiddag” og så videre afhængigt af tidspunktet på dagen til strengen bogstavelig og returnerer en brugerdefineret streng.

Tagfunktionseksempel, der viser brugerdefineret strenginterpolation

nu hvor vi diskuterede, hvad “Tagged” – funktioner er, vil mange mennesker bruge denne funktion i forskellige domæner, som i Terminal til kommandoer og HTTP-anmodninger om komponering af URI ‘ er osv.

ret problemet med tagged string Literal

så hvis du har en Tagget funktion, der internt bruger nogle andre domænes regler (som terminals regler), skal du muligvis bruge \ubla123abla, der ikke ligner \u0049 eller \u{@f804}, så får du en syntaksfejl.

i ES2018 lempes reglerne for at tillade sådanne tilsyneladende ugyldige escape-tegn, så længe den taggede funktion returnerer værdierne i et objekt med en “kogt” egenskab (hvor ugyldige tegn er “udefinerede”) og derefter en “rå” egenskab (med hvad du vil).

“dotall” flag for Regulært udtryk

i øjeblikket i Regeks, selvom prikken(“.”) skal matche et enkelt tegn, det matcher ikke nye linjetegn som \n \r \f etc.

for eksempel:

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

denne forbedring gør det muligt for dot-operatøren at matche ethvert enkelt tegn. For at sikre, at dette ikke bryder noget, skal vi bruge \s flag, når vi opretter Regekset for at dette kan fungere.

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

her er den samlede API fra forslaget doc:

ECMAScript 2018-Regeks dotall funktion gør det muligt at matche selv \ n via”.”Via / s flag

Regeks navngivne gruppe fanger ?

denne forbedring bringer en nyttig Regeksp-funktion fra andre sprog som Python, Java og så videre kaldet “navngivne grupper.”Disse funktioner giver udviklere, der skriver Regeksp, mulighed for at angive navne (identifikatorer) i formatet(?<name>...) for forskellige dele af gruppen i Regeks. De kan derefter bruge dette navn til at få fat i den gruppe, de har brug for med lethed.

4.1 grundlæggende navngivet gruppeeksempel

ECMAScript 2018-Regeks navngivne grupper eksempel

4.2 Brug af navngivne grupper inde i regeks selv

vi kan bruge \k<group name> formatet til at henvise til gruppen i selve regeks. Følgende eksempel viser, hvordan det fungerer.

ECMAScript 2018 — Regeks navngivne grupper tilbage henvisning via \k <gruppenavn>

4.3 brug af navngivne grupper i streng.prototype.erstat

den navngivne gruppefunktion er nu bagt i String ‘ s replace instansmetode. Så vi kan nemt bytte ord i strengen.

skift for eksempel “fornavn, efternavn” til “efternavn, fornavn”.

ECMAScript 2018 — Brug af Regeks navngivne grupper funktion i erstat funktion

Rest egenskaber for objekter

Rest operator ... (tre prikker) giver os mulighed for at udtrække objektegenskaber, der ikke allerede er ekstraheret.

5.1 Du kan bruge rest til at hjælpe med at udtrække kun egenskaber, du ønsker

ECMAScript 2018-Object destructuring via rest

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

ECMAScript 2018 — Object destructuring via rest

Spread properties for Objects

Spread properties ligner også rest properties med tre prikker ... men forskellen er, at du bruger spread til at oprette (omstrukturere) nye objekter.

Tip: spredningsoperatoren bruges i højre side af lighedstegnet. Resten bruges i venstre side af ligetegnet.

ECMAScript 2018 — objekt omstrukturering via spread

Regeks Lookbag påstande

dette er en forbedring af Regekset, der giver os mulighed for at sikre, at der findes en streng med det samme *før* en anden streng.

du kan nu bruge en gruppe (?<=…) (spørgsmålstegn, mindre end, lig) til at se bagud for positiv påstand.

positiv påstand: lad os sige, at vi vil sikre, at tegnet # eksisterer før ordet winning (det vil sige: #winning) og vil have regekset til at returnere bare strengen “vindende”. Her er hvordan du ville skrive det.

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

negativ påstand: lad os sige, at vi ønsker at udtrække tal fra linjer, der har prist-tegn og ikke $ – tegn før disse tal.

ECMAScript 2018 — (?<!…) for negative påstande

Regeks Unicode Property Escapes

det var ikke let at skrive Regeks for at matche forskellige unicode-tegn. Ting som \w , \W , \d etc matcher kun engelske tegn og tal. Men hvad med tal på andre sprog som Hindi, græsk og så videre?

det er her Unicode Property Escapes kommer ind. Det viser sig, at Unicode tilføjer metadataegenskaber for hvert symbol (tegn) og bruger det til at gruppere eller karakterisere forskellige symboler.

Unicode database grupperer f.eks. Alle Hindi-tegn(liter) under en egenskab kaldet Script med værdi Devanagari og en anden egenskab kaldet Script_Extensionsmed samme værdi Devanagari. Så vi kan søge efter Script=Devanagari og få alle Hindi tegn.

Devanagari kan bruges til forskellige indiske sprog som Marathi, Hindi, Sanskrit og så videre.

fra ECMAScript 2018 kan vi bruge \p til at undslippe tegn sammen med {Script=Devanagari} for at matche alle disse indiske tegn. Det vil sige, Vi kan bruge: \p{Script=Devanagari} i Regekset til at matche alle Devanagari-tegn.

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

tilsvarende grupperer Unicode database alle græske tegn under egenskaben Script_Extensions (og Script) med værdien Greek. Så vi kan søge efter alle græske tegn ved hjælp af Script_Extensions=Greek eller Script=Greek .

det vil sige, Vi kan bruge: \p{Script=Greek} i Regekset for at matche alle græske tegn.

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

yderligere, Unicode-databasen gemmer forskellige typer emojier under de boolske egenskaber Emoji, Emoji_Component, Emoji_Presentation, Emoji_Modifier, og Emoji_Modifier_Base med egenskabsværdier som ‘sand’. Så vi kan søge efter alle emojier ved blot at vælge Emoji for at være sandt.

det vil sige, Vi kan bruge: \p{Emoji}, \Emoji_Modifier og så videre til at matche forskellige slags emojier.

følgende eksempel vil gøre det hele klart.

ECMAScript 2018 — viser hvordan \p kan bruges til forskellige emojier

endelig kan vi bruge kapital “P”(\P) escape character I stedet for lille p (\p) for at negere kampene.

  1. ECMAScript 2018 Forslag

Løfte.prototype.endelig()

finally() er en ny instansmetode, der blev tilføjet til Promise. Hovedideen er at tillade at køre en tilbagekald efter enten resolve eller reject for at hjælpe med at rydde op. Tilbagekaldet finally kaldes uden nogen værdi og udføres altid uanset hvad.

lad os se på forskellige sager.

ECMAScript 2018-endelig () i løs sag
ECMAScript 2018-endelig () i Afvis sag
ECMASCript 2018-endelig () i fejl kastet fra løfte sag
ECMAScript 2018-fejl kastet indefra **fangst** sag

asynkron Iteration

dette er en *ekstremt* nyttig funktion. Dybest set det giver os mulighed for at skabe loops af async kode med lethed!

denne funktion tilføjer en ny “for-afventning-af” loop, der giver os mulighed for at kalde async-funktioner, der returnerer løfter (eller Arrays med en masse løfter) i en loop. Det seje er, at løkken venter på, at hvert Løfte løser sig, før det gøres til næste løkke.

ECMAScript 2018 — Async Iterator via For-venter-af

det er stort set det!

hvis dette var nyttigt, skal du klikke på klappen ? knap nedenunder et par gange for at vise din støtte! ⬇⬇⬇ ??

mine andre indlæg

  1. tjek disse nyttige ECMAScript 2015 (ES6) tips og tricks
  2. 5 JavaScript “dårlige” dele, der er rettet i ES6
  3. er “klasse” i ES6 den nye “dårlige” del?

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.