ES5 to ESNext - tässä on kaikki JavaScriptiin lisätyt ominaisuudet vuodesta 2015

Kirjoitin tämän artikkelin auttaakseni sinua siirtymään JavaScriptin tietämyksestä ennen ES6: ta ja saamaan sinut nopeasti ajan tasalle kielen uusimpien edistysaskelten avulla.

JavaScriptillä on tänään etuoikeutettu asema olla ainoa kieli, joka voi toimia alkuperäisessä selaimessa, ja se on integroitu siihen ja optimoitu siihen.

JavaScriptin tulevaisuus tulee olemaan loistava. Pysyä muutosten kanssa ei saisi olla vaikeampaa kuin se on jo nyt, ja tavoitteeni tässä on antaa sinulle nopea, mutta kattava katsaus uusiin asioihimme, jotka ovat käytettävissämme.

Napsauta tätä saadaksesi tämän viestin PDF / ePub / Mobi-version offline-tilassa lukemista varten

Sisällysluettelo

Johdanto ECMAScriptiin

ES2015

  • anna ja const
  • Nuolitoiminnot
  • Luokat
  • Oletusparametrit
  • Mallikirjaimet
  • Suunnittelujärjestelyt
  • Parannetut objektikirjaimet
  • Silmukkaa varten
  • lupauksia
  • moduulit
  • Uudet jousimenetelmät
  • Uudet objektimenetelmät
  • Levitysoperaattori
  • Sarja
  • Kartta
  • generaattorit

ES2016

  • Array.prototype.includes ()
  • Laajennusoperaattori

ES2017

  • Jousimatto
  • Object.values ​​()
  • Object.entries ()
  • Object.getOwnPropertyDescriptors ()
  • Loppu pilkut
  • Jaettu muisti ja atomit

ES2018

  • Lepo- / leviämisominaisuudet
  • Asynkroninen iteraatio
  • Promise.prototype.finally ()
  • Säännöllisen lausekkeen parannukset

ESNext

  • Array.prototype. {Tasainen, flatMap}
  • Valinnainen saalisidonta
  • Object.fromEntries ()
  • String.prototype. {TrimStart, trimEnd}
  • Symbol.prototype.description
  • JSON-parannukset
  • Hyvin muotoiltu JSON.stringify ()
  • Function.prototype.toString ()

Johdanto ECMAScriptiin

Aina kun luet JavaScriptiä, näet väistämättä yhden seuraavista termeistä: ES3, ES5, ES6, ES7, ES8, ES2015, ES2016, ES2017, ECMAScript 2017, ECMAScript 2016, ECMAScript 2015… mitä ne tarkoittavat?

Ne kaikki viittaavat standardiin, nimeltään ECMAScript.

ECMAScript on standardi, johon JavaScript perustuu, ja se lyhennetään usein ES: ksi.

JavaScriptin lisäksi muut kielet toteuttavat (ed) ECMAScriptin, mukaan lukien:

  • ActionScript (Flash-skriptikieli), joka on menettämässä suosiotaan, koska Flash lopetetaan virallisesti vuonna 2020
  • JScript (Microsoftin skripti murre), koska silloin vain Netscape tuki JavaScriptiä ja selaimesodat olivat huipussaan, Microsoftin piti rakentaa oma versio Internet Explorerille

mutta tietysti JavaScript on suosituin ja laajimmin käytetty ES-sovellus.

Miksi tämä outo nimi? Ecma International on sveitsiläinen standardiliitto, joka vastaa kansainvälisten standardien määrittelystä.

Kun JavaScript luotiin, Netscape ja Sun Microsystems esittelivät sen Ecmalle ja he antoivat sille nimen ECMA-262 alias ECMAScript.

Tämä Netscape: n ja Sun Microsystemsin (Java-valmistaja) lehdistötiedote voi auttaa selvittämään nimivalinnan, joka voi sisältää Wikipedian mukaan komiteassa olleen Microsoftin juridisia ja tuotemerkkiasioita.

IE9: n jälkeen Microsoft lopetti ES-tuensa tuotemerkkien käyttämisen selaimissa JScript-muodossa ja alkoi kutsua sitä JavaScriptinä (en ainakaan löytänyt viitteitä siihen).

Joten vuodesta 201x lähtien ainoa suosittu kieli, joka tukee ECMAScriptiä, on JavaScript.

Nykyinen ECMAScript-versio

Nykyinen ECMAScript-versio on ES2018.

Se julkaistiin kesäkuussa 2018.

Mikä on TC39

TC39 on komitea, joka kehittää JavaScriptiä.

TC39: n jäsenet ovat JavaScript-yrityksiä ja selaimen toimittajia, mukaan lukien Mozilla, Google, Facebook, Apple, Microsoft, Intel, PayPal, SalesForce ja muut.

Jokaisen vakiomuotoisen ehdotuksen on läpäistävä eri vaiheet, jotka selitetään tässä.

ES-versiot

Pidän hämmentävänä, miksi toisinaan ES-versioon viitataan painosnumeron ja toisinaan vuoden mukaan, ja minua hämmentää vuosi sattumalta numerolla -1, mikä lisää yleistä sekaannusta JS / ES: n ympärillä

Ennen ES2015 ECMAScript-eritelmiä kutsuttiin yleisesti niiden painos. Joten ES5 on virallinen nimi vuonna 2009 julkaistulle ECMAScript-eritelmäpäivitykselle.

Miksi näin tapahtuu? ES2015: een johtaneen prosessin aikana nimi muutettiin ES6: sta ES2015: ksi, mutta koska se tehtiin myöhään, ihmiset viittasivat siihen edelleen ES6: ksi, ja yhteisö ei ole jättänyt julkaisua nimeämään taaksepäin - maailma kutsuu edelleen ES-julkaisuja painos numero.

Tämän taulukon pitäisi selvittää asiat hieman:

Harkitaan erityisiä ominaisuuksia, jotka JavaScript on lisätty ES5: n jälkeen. Aloitetaan ES2015-ominaisuuksista.

anna ja const

Vuodesta ES2015, var oli ainoa käytettävissä oleva rakenne muuttujien määrittelemiseksi.

var a = 0

Jos unohdat lisätä var, annat arvon pimeälle muuttujalle, ja tulokset saattavat vaihdella.

Nykyaikaisissa ympäristöissä, joissa tiukka tila on käytössä, saat virheen. Vanhemmissa ympäristöissä (tai tiukassa tilassa pois käytöstä) tämä alustaa muuttujan ja määrittää sen globaaliin esineeseen.

Jos et alusteta muuttujaa julistaessasi sitä, sillä on määrittelemätön arvo, kunnes annat sille arvon.

var a // typeof a === 'määrittelemätön'

Voit ilmoittaa muuttujan uudelleen useita kertoja ohittaen sen:

var a = 1
var a = 2

Voit myös ilmoittaa useita muuttujia kerralla samassa lauseessa:

var a = 1, b = 2

Laajuus on osa koodista, jossa muuttuja on näkyvissä.

Muuttuja, joka alustetaan varilla minkä tahansa funktion ulkopuolella, osoitetaan globaalille objektille, sillä on globaali laajuus ja se on näkyvissä kaikkialla. Funktion sisällä var: lla alustettu muuttuja määritetään toiminnolle, se on paikallinen ja näkyy vain sen sisällä, aivan kuten funktion parametri.

Mikä tahansa funktiossa määritetty muuttuja, jolla on sama nimi kuin globaalilla muuttujalla, on etusijalla globaalin muuttujan kanssa, varjostaen sitä.

On tärkeää ymmärtää, että lohko (joka on tunnistettu parilla kiharoilla) ei määrittele uutta laajuutta. Uusi laajuus luodaan vain, kun funktio luodaan, koska var: lla ei ole lohkon laajuutta, vaan funktion laajuutta.

Toiminnon sisällä kaikki siinä määritellyt muuttujat ovat näkyvissä kaikissa funktiokoodeissa, vaikka muuttuja onkin ilmoitettu funktion lopussa, siihen voidaan silti viitata alussa, koska JavaScript ennen koodin suorittamista siirtää tosiasiassa kaikki muuttujat päälle (jota kutsutaan nostamiseksi). Sekaannusten välttämiseksi ilmoita muuttujat aina funktion alussa.

Käyttämällä let

anna on uusi ominaisuus, joka esiteltiin ES2015: ssä, ja se on lähinnä lohkon laajuinen versio var: sta. Sen laajuus on rajoitettu lohkoon, lauseeseen tai lausekkeeseen, missä se on määritelty, ja kaikkiin siihen sisältyviin sisäisiin lohkoihin.

Nykyaikaiset JavaScriptin kehittäjät saattavat halutessaan käyttää vain sallia ja hylätä var-version käytön kokonaan.

Jos anna vaikuttaa epäselvä termi, lue vain anna väri = 'punainen', sillä väri on punainen ja se kaikki on paljon järkevämpää

Minkä tahansa funktion ulkopuolelle määrittäminen - toisin kuin var - ei luo globaalia muuttujaa.

Const

Muuttujat, jotka on ilmoitettu painikkeella var tai let, voidaan muuttaa myöhemmin ohjelmassa ja nimetä uudelleen. Kun const on alustettu, sen arvoa ei voi koskaan muuttaa uudelleen, eikä sitä voida määrittää toiseen arvoon.

const a = 'testi'

Emme voi antaa erillistä kirjainta const: lle. Voimme kuitenkin mutatoida, jos se on esine, joka tarjoaa menetelmiä, jotka mutatoivat sen sisältöä.

const ei tarjoa muuttumattomuutta, vaan vain varmistaa, että referenssiä ei voida muuttaa.

const on lohkon laajuus, sama kuin anna.

Nykyaikaiset JavaScriptin kehittäjät voivat käyttää constia muuttujille, joita ei tarvitse myöhemmin määrittää myöhemmin uudelleen ohjelmassa, koska meidän tulisi aina käyttää yksinkertaista saatavilla olevaa rakennetta virheiden välttämiseksi tiellä.

Nuolitoiminnot

Nuolitoiminnot ovat niiden käyttöönoton jälkeen muuttuneet ikuisesti, kuinka JavaScript-koodi näyttää (ja toimii).

Mielestäni tämä muutos oli niin tervetullut, että näet nyt harvoin funktion avainsanan käytön nykyaikaisissa tietokannoissa. Vaikka sillä on edelleen käyttöä.

Visuaalisesti se on yksinkertainen ja tervetullut muutos, jonka avulla voit kirjoittaa toimintoja lyhyemmällä syntaksilla:

const myFunction = function () {
  // ...
}

että

const myFunction = () => {
  // ...
}

Jos funktion runko sisältää vain yhden lauseen, voit jättää hakasulkeet pois ja kirjoittaa kaikki yhdelle riville:

const myFunction = () => doSomething ()

Parametrit välitetään suluissa:

const myFunction = (param1, param2) => doSomething (param1, param2)

Jos sinulla on yksi (ja vain yksi) parametri, voit jättää sulkut kokonaan pois:

const myFunction = param => doSomething (param)

Tämän lyhyen syntaksin ansiosta nuolitoiminnot rohkaisevat pienten toimintojen käyttöä.

Implisiittinen tuotto

Nuolitoiminnot sallivat implisiittisen paluun: arvot palautetaan ilman, että tarvitset paluu-avainsanaa.

Se toimii, kun toimintoelimessä on yksirivinen lause:

const myFunction = () => 'testi'
myFunction () // 'testi'

Toinen esimerkki palauttaessasi esineen, muista kääriä kiharasulkeet suluihin, jotta sitä ei pidetä kääretoiminnon rungon kiinnikkeinä:

const myFunction = () => ({arvo: 'testi'})
myFunction () // {arvo: 'testi'}

Kuinka tämä toimii nuolitoiminnoissa

tämä on käsite, jota voi olla vaikea ymmärtää, koska se vaihtelee paljon kontekstin mukaan ja vaihtelee myös JavaScriptin tilasta (tiukka tila vai ei).

On tärkeää selventää tätä käsitettä, koska nuolitoiminnot käyttäytyvät hyvin eri tavalla kuin tavalliset toiminnot.

Kun se määritetään objektin menetelmäksi, normaalitoiminnossa tämä tarkoittaa objektia, joten voit tehdä:

const auto = {
  malli: 'Fiesta',
  valmistaja: 'Ford',
  fullName: function () {
    palauta `$ {tämä.valmistaja} $ {tämä.malli}
  }
}

soittamalla car.fullName () tulee "Ford Fiesta".

Tämä laajuus nuolitoiminnoilla on peritty suorituskontekstista. Nuolitoiminto ei sido tätä ollenkaan, joten sen arvoa etsitään puhelupinossa, joten tässä koodissa car.fullName () ei toimi, ja palauttaa merkkijonon "määrittelemätön määrittelemätön":

const auto = {
  malli: 'Fiesta',
  valmistaja: 'Ford',
  fullName: () => {
    palauta `$ {tämä.valmistaja} $ {tämä.malli}
  }
}

Tästä johtuen nuolitoiminnot eivät sovellu objektimenetelmiksi.

Nuolitoimintoja ei voida käyttää myöskään konstruktoreina, kun objektin pikavalinta nostaa TypeErrorin.

Tässä tulisi käyttää sijasta säännöllisiä toimintoja, kun dynaamista kontekstia ei tarvita.

Tämä on ongelma myös tapahtumien käsittelyssä. DOM-tapahtumien kuuntelijat asettavat tämän kohdeelementiksi, ja jos luotat siihen tapahtumakäsittelijässä, säännöllinen toiminto on välttämätön:

const link = document.querySelector ('linkki')
link.addEventListener ('napsauta', () => {
  // tämä === ikkuna
})
const link = document.querySelector ('linkki')
link.addEventListener ('napsauta', toiminto () {
  // tämä === linkki
})

Luokat

JavaScript on melko harvinainen tapa toteuttaa perintö: prototyyppinen perintö. Prototyyppinen perintö, vaikka mielestäni suuri, on toisin kuin useimmissa muissa suosituissa ohjelmointikielissä perinnöllisyyden toteutuksessa, joka on luokkaperustaista.

Java-, Python- tai muista kielistä tulevilla ihmisillä oli vaikea ymmärtää prototyyppisen perinnön monimutkaisuuksia, joten ECMAScript-komitea päätti ripottaa syntaattisen sokerin prototyyppisen perinnön päälle niin, että se muistuttaa luokkaperusteisen perinnön toimivuutta muissa suosituissa toteutuksissa.

Tämä on tärkeää: JavaScript konepellin alla on edelleen sama, ja voit käyttää objektin prototyyppiä tavalliseen tapaan.

Luokan määritelmä

Näin luokka näyttää.

luokan henkilö {
  rakentaja (nimi) {
    this.name = nimi
  }
  Hei() {
    palauta 'Hei, minä olen' + tämä.nimi + '.'
  }
}

Luokalla on tunniste, jota voimme käyttää uusien objektien luomiseen käyttämällä uutta ClassIdentifier () -sovellusta.

Kun objekti alustetaan, rakentajamenetelmää kutsutaan, kaikki parametrit ohitetaan.

Luokalla on myös niin monta menetelmää kuin se tarvitsee. Tässä tapauksessa hello on menetelmä, jota voidaan kutsua kaikkiin luokkaan johdettuihin objekteihin:

const flavio = uusi henkilö ('Flavio')
flavio.hello ()

Luokan perintö

Luokka voi laajentaa toisen luokan, ja luokkaa käyttämällä alustetut objektit perivät kaikkien luokkien kaikki menetelmät.

Jos perinnöllisellä luokalla on menetelmä, jolla on sama nimi kuin yhdellä hierarkian korkeammasta luokasta, lähin menetelmä on etusijalla:

luokan ohjelmoija laajentaa henkilöä {
  Hei() {
    return super.hello () + 'Olen ohjelmoija.'
  }
}
const flavio = uusi ohjelmoija ('Flavio')
flavio.hello ()

(yllä oleva ohjelma tulostaa "Hei, olen Flavio. Olen ohjelmoija.")

Luokilla ei ole nimenomaisia ​​luokan muuttujien ilmoituksia, mutta kaikki muuttujat on alustettava rakentajalle.

Luokan sisällä voit viitata vanhemmaluokkaan, joka kutsuu super ().

Staattiset menetelmät

Normaalisti menetelmät määritetään ilmentymässä, ei luokassa.

Staattiset menetelmät suoritetaan luokassa sen sijaan:

luokan henkilö {
  staattinen genericHello () {
    palauta 'Hei'
  }
}
Henkilö.genericHello () // Hei

Yksityiset menetelmät

JavaScriptillä ei ole sisäänrakennettua tapaa määritellä yksityisiä tai suojattuja menetelmiä.

On olemassa kiertotapoja, mutta en kuvaa niitä tässä.

Getterit ja asettajat

Voit lisätä menetelmiä, joihin on liitetty get tai set, ja luoda getter and setter, jotka ovat kaksi erilaista koodipalaa, jotka suoritetaan tekemäsi perusteella: muuttujan käyttäminen tai sen arvon muuttaminen.

luokan henkilö {
  rakentaja (nimi) {
    tämä.nimi = nimi
  }
  asetettu nimi (arvo) {
    tämä.nimi = arvo
  }
  hanki nimi () {
    palauta tämä_nimi
  }
}

Jos sinulla on vain hankkija, ominaisuutta ei voida asettaa, ja kaikki yritykset tehdä niin jätetään huomioimatta:

luokan henkilö {
  rakentaja (nimi) {
    tämä.nimi = nimi
  }
  hanki nimi () {
    palauta tämä_nimi
  }
}

Jos sinulla on vain asettaja, voit muuttaa arvoa, mutta et voi käyttää sitä ulkopuolelta:

luokan henkilö {
  rakentaja (nimi) {
    tämä.nimi = nimi
  }
  asetettu nimi (arvo) {
    tämä.nimi = arvo
  }
}

Oletusparametrit

Tämä on doSomething-toiminto, joka hyväksyy parametrin 1.

const doSomething = (param1) => {
}

Voimme lisätä oletusarvon param1: lle, jos toiminto käynnistetään määrittelemättä parametria:

const doSomething = (param1 = 'testi') => {
}

Tämä toimii tietysti myös useammille parametreille:

const doSomething = (param1 = 'testi', param2 = 'test2') => {
}

Entä jos sinulla on ainutlaatuinen objekti, jossa on parametriarvot?

Kerran, jos jouduimme siirtämään valinnaisten objektien funktiolle, jotta olisimme käyttäneet näiden asetusten oletusarvoja, jos yhtä niistä ei määritetty, jouduit lisäämään hiukan koodia toiminnon sisään:

const colorize = (vaihtoehdot) => {
  if (! vaihtoehdot) {
    vaihtoehdot = {}
  }
  const color = ('väri' vaihtoehdoissa)? options.color: 'keltainen'
  ...
}

Hajottamalla voit antaa oletusarvot, mikä yksinkertaistaa koodia paljon:

const colorize = ({color = 'keltainen'}) => {
  ...
}

Jos mitään objektia ei välitetä, kun kutsutaan väritystoimintoamme, vastaavasti voimme määrittää tyhjän objektin oletuksena:

const spin = ({väri = 'keltainen'} = {}) => {
  ...
}

Mallikirjaimet

Malline Literals antaa sinun työskennellä jousilla uudella tavalla verrattuna ES5: ään ja sen alapuolelle.

Ensi silmäyksellä syntaksi on hyvin yksinkertainen, käytä vain backtickejä yhden tai kahden lainauksen sijasta:

const a_string = `jotain`

Ne ovat ainutlaatuisia, koska ne tarjoavat paljon ominaisuuksia, joita tavallisilla lainausmerkeillä rakennetuilla merkkijonoilla ei erityisesti ole:

  • ne tarjoavat loistavan syntaksin monilinjaisten merkkijonojen määrittelemiseksi
  • ne tarjoavat helpon tavan interpoloida muuttujia ja lausekkeita merkkijonoina
  • niiden avulla voit luoda DSL-malleja mallitunnisteilla (DSL tarkoittaa verkkotunnuskohtaista kieltä, ja sitä käytetään esimerkiksi tyyliteltyjen komponenttien reagoimaan määrittämään komponentin CSS)

Sukellaan jokaiseen näistä yksityiskohtaisesti.

Monilinjaiset jouset

Pre-ES6, luodaksesi merkkijonon, joka kattaa kaksi riviä, joudut käyttämään \ merkkiä rivin lopussa:

const merkkijono =
  'ensimmäinen osa \
toinen osa'

Tämän avulla voidaan luoda merkkijono 2 riville, mutta se renderoidaan vain yhdellä rivillä:

ensimmäinen osa toinen osa

Jotta merkkijono voidaan myös monilla riveillä, sinun on nimenomaisesti lisättävä \ n jokaisen rivin loppuun, kuten tämä:

const merkkijono =
  'ensimmäinen rivi \ n \
toinen linja'

tai

const string = 'ensimmäinen rivi \ n' + 'toinen rivi'

Mallin kirjaimet tekevät monirivisistä merkkijonoista paljon yksinkertaisempia.

Kun mallimerkki on avattu backtickillä, painat Enter-näppäintä luodaksesi uuden rivin, jossa ei ole erikoismerkkejä, ja se esitetään sellaisena kuin se on:

const merkkijono = `Hei
Tämä
jono
on mahtava! "

Muista, että tila on merkityksellinen, joten tee tämä:

const merkkijono = `Ensimmäinen
                Second`

aikoo luoda seuraavan merkkijonon:

Ensimmäinen
                Toinen

Helppo tapa korjata tämä ongelma on tyhjä ensimmäinen rivi ja liittämällä trim () -menetelmä heti sulkemisen vastakkeen jälkeen, mikä poistaa kaikki tilan ennen ensimmäistä merkkiä:

const merkkijono = `
Ensimmäinen
Second`.trim ()

interpolointi

Mallin kirjaimet tarjoavat helpon tavan interpoloida muuttujat ja lausekkeet merkkijonoiksi.

Voit tehdä sen käyttämällä $ {...} syntaksia:

const var = 'testi'
const string = `jotain $ {var}` // jotain testiä

$ {}: een voit lisätä mitä tahansa, jopa lausekkeita:

const merkkijono = `jotain {{1 + 2 + 3}}
const string2 = `jotain $ {foo ()? 'x': 'y'} '

Mallitunnisteet

Merkityt mallit ovat ominaisuuksia, jotka saattavat kuulostaa aluksi vähemmän hyödyllisiltä sinulle, mutta niitä käytännössä käyttävät monet suositut kirjastot, kuten Styled Components tai Apollo, joka on GraphQL-asiakas / palvelimen kirjasto, joten on tärkeää ymmärtää, miten se toimii.

Tyylitetyissä komponenteissa mallimerkkejä käytetään CSS-merkkijonojen määrittämiseen:

const Button = tyylinen.painike
  fonttikoko: 1,5em;
  taustaväri: musta;
  väri valkoinen;
`

Apollon mallissa tunnisteita käytetään määrittämään GraphQL-kyselyjärjestelmä.

const kysely = gql`
  kysely {
    ...
  }
`

Näissä esimerkeissä korostetut styled.button ja gql mallimerkinnät ovat vain toimintoja:

funktio gql (kirjaimet, ... lausekkeet) {}

tämä toiminto palauttaa merkkijonon, joka voi olla tulosta kaikenlaisesta laskennasta.

literraalit on taulukko, joka sisältää lausekkeen interpoloinnin avulla kirjaimellisesti sisällön mallin.

lausekkeet sisältävät kaikki interpoloinnit.

Jos otamme yllä olevan esimerkin:

const merkkijono = `jotain {{1 + 2 + 3}}

literals on taulukko, jossa on kaksi kohdetta. Ensimmäinen on jotain, merkkijono ensimmäiseen interpolointiin saakka, ja toinen on tyhjä merkkijono, tila ensimmäisen interpoloinnin lopun (meitä on vain yksi) ja merkkijonon lopun väliin.

lausekkeet ovat tässä tapauksessa taulukko, jossa on yksi kohde, 6.

Monimutkaisempi esimerkki on:

const merkkijono = `jotain
toinen $ {'x'}
uusi rivi $ {1 + 2 + 3}
testillä`

tässä tapauksessa literraalit ovat taulukko, jossa ensimmäinen kohde on:

; `Jotain
toinen `

toinen on:

; `
uusi rivi "

ja kolmas on:

; `
testillä`

lausekkeet ovat tässä tapauksessa taulukko, jossa on kaksi kohdetta, x ja 6.

Toiminto, joka nuo arvot välitetään, voi tehdä mitä tahansa heidän kanssaan, ja tämä on tämän tyyppisen ominaisuuden voima.

Yksinkertaisin esimerkki on merkkijonon interpoloinnin toistaminen yhdistämällä kirjaimet ja lausekkeet:

const interpolated = interpolate`Maksin {10} €

ja näin interpolointi toimii:

funktion interpolointi (kirjaimet, ... lausekkeet) {
  anna merkkijono = ``
  for (lausekkeiden const [i, val]) {
    merkkijono + = kirjaimellinen [i] + val
  }
  merkkijono + = kirjaimet [literals.length - 1]
  paluu merkkijono
}

Suunnittelujärjestelyt

Esitetyssä objektissa voit purkaa vain joitain arvoja ja laittaa ne nimettyihin muuttujiin:

const henkilö = {
  etunimi: 'Tom',
  sukunimi: 'risteily',
  näyttelijä: totta,
  ikä: 54, // muodostettu
}
const {firstName: nimi, ikä} = henkilö

nimi ja ikä sisältävät halutut arvot.

Syntaksi toimii myös taulukkoissa:

const a = [1,2,3,4,5]
const [ensimmäinen, toinen] = a

Tämä lausunto luo 3 uutta muuttujaa hakemalla kohteet, joiden hakemisto on 0, 1, 4 taulukosta a:

const [ensimmäinen, toinen,, viides] = a

Parannetut objektikirjaimet

ES2015: ssä Object Literals sai supervoimia.

Yksinkertaisempi syntaksi muuttujien sisällyttämiseksi

Tekemisen sijaan

const jotain = 'y'
const x = {
  jotain jotain
}

voit tehdä

const jotain = 'y'
const x = {
  jotain
}

Prototyyppi

Prototyyppi voidaan määrittää

const anObject = {y: 'y'}
const x = {
  __proto__: anobjekti
}

Super ()

const anObject = {y: 'y', testi: () => 'eläintarha'}
const x = {
  __proto__: anObject,
  testi () {
    paluu super.test () + 'x'
  }
}
x.test () // zoox

Dynaamiset ominaisuudet

const x = {
  ['a' + '_' + 'b']: 'z'
}
x.a_b // z

Silmukkaa varten

ES5 esitteli jo vuonna 2009 jokaiselle () silmukalle. Vaikka ne olivat mukavia, he eivät tarjonneet mitään tapaa murtautua, kuten silmukat tekivät aina.

ES2015 esitteli For-of-loop-silmukan, jossa yhdistyvät ForEach: n tiiviys ja kyky murtaa:

// iteroi arvon yli
for (const v of ['a', 'b', 'c']) {
  console.log (v);
}
// hanki myös hakemisto käyttämällä `merkinnät ()`
varten (const [i, v] of ['a', 'b', 'c']. merkinnät ()) {
  console.log (hakemisto) // hakemisto
  console.log (arvo) // arvo
}

Huomaa const: n käyttö. Tämä silmukka luo uuden laajuuden jokaisessa iteraatiossa, joten voimme käyttää sitä turvallisesti antamisen sijaan.

Ero ...: n kanssa on:

  • ... iteraateille kiinteistöarvoille
  • varten ... iteroi omaisuuden nimet

lupauksia

Lupaus määritellään yleisesti valtakirjaksi arvolle, joka lopulta tulee saataville.

Lupaukset ovat yksi tapa käsitellä asynkronista koodia kirjoittamatta liian monta takaisinsoittoa koodiin.

Async-toiminnot käyttävät lupauksen sovellusliittymää rakennusosanaan, joten niiden ymmärtäminen on olennaista, vaikka uudemmassa koodissa todennäköisesti käytät async-toimintoja lupausten sijasta.

Kuinka lupaukset toimivat, lyhyesti

Kun lupaus on kutsuttu, se alkaa odotustilassa. Tämä tarkoittaa, että soittajatoiminto jatkaa suoritusta, kun se odottaa lupausta suorittaa oma käsittely, ja antaa soittajatoiminnolle palautetta.

Tässä vaiheessa soittajatoiminto odottaa sen palauttavan lupauksen ratkaisussa tilassa tai hylätyssä tilassa, mutta kuten tiedät JavaScriptin olevan asynkroninen, niin toiminto jatkaa suoritustaan, kun lupaus toimii.

Mikä JS API -käyttö lupaa?

Oman koodisi ja kirjastokoodisi lisäksi lupauksia käyttävät tavalliset nykyaikaiset Web-sovellusliittymät, kuten:

  • akun sovellusliittymä
  • Hae sovellusliittymä
  • Huoltotyöntekijät

On epätodennäköistä, että nykyaikaisessa JavaScriptissä huomaat, että et käytä lupauksia, joten aloitetaan sukellus heihin.

Lupauksen luominen

Promise-sovellusliittymä paljastaa Promise-konstruktorin, jonka alustat käyttämällä uutta Promise ():

anna tehty = totta
const isItDoneYet = uusi lupaus ((ratkaise, hylkää) => {
  jos (tehty) {
    const workDone = 'Tässä on rakentamaani asia'
    ratkaisemiseksi (workDone)
  } muuta {
    const why = 'Työskentelemme edelleen jonkin muun suhteen'
    hylätä (miksi)
  }
})

Kuten voitte nähdä, lupaus tarkistaa tehdyn globaalin vakion, ja jos se on totta, palautamme päätettyä lupausta, muuten hylätyn lupauksen.

Ratkaisun ja hylkäämisen avulla voimme kommunikoida arvon takaisin, yllä olevassa tapauksessa palautamme vain merkkijonon, mutta se voi olla myös objekti.

Kuluttaa lupaus

Viimeisessä osassa esittelimme kuinka lupaus luodaan.

Katsotaan nyt, kuinka lupaus voidaan käyttää tai käyttää.

const isItDoneYet = uusi lupaus ()
// ...
const checkIfItsDone = () => {
  isItDoneYet
    . sitten (ok => {
      console.log (OK)
    })
    .catch (virhe => {
      console.error (err)
    })
}

Käynnistä checkIfItsDone () suorittaa isItDoneYet () -lupauksen ja odottaa sen ratkaisemista käyttämällä silloista takaisinsoittoa, ja jos tapahtuu virhe, se käsittelee sen palautussoitossa.

Ketjutuslupaukset

Lupaus voidaan palauttaa toiseen lupaukseen luomalla lupausketju.

Upea esimerkki lupausten ketjuttamisesta on Fetch API, XMLHttpRequest-sovellusliittymän päällä oleva kerros, jota voimme käyttää resurssin hankkimiseen ja jonottamiseen lupausketjun, joka suoritetaan resurssin haettaessa.

Fetch API on lupauspohjainen mekanismi, ja kutsu fetch () vastaa oman lupauksemme määrittelemistä uudella Promise () -sovelluksella.

Esimerkki lupausketjujen ketjuttamisesta

const status = vastaus => {
  if (response.status> = 200 && response.status <300) {
    return Promise.resolve (vastaus)
  }
  return Promise.reject (uusi virhe (response.statusText))
}
const json = response => response.json ()
nouto ( '/ todos.json')
  .Tämän jälkeen (tila)
  .Tämän jälkeen (json)
  . sitten (data => {
    console.log ('Pyyntö onnistui JSON-vastauksella', tiedot)
  })
  .catch (virhe => {
    console.log ('Pyyntö epäonnistui', virhe)
  })

Tässä esimerkissä kutsumme fetch () saadaksesi luettelon TODO-kohteista todos.json-tiedostosta, joka löytyy verkkotunnuksen juurista, ja luomme lupausketjun.

Jatkuva haku () palauttaa vastauksen, jolla on monia ominaisuuksia ja joihin viitaamme:

  • tila, numeerinen arvo, joka edustaa HTTP-tilakoodia
  • statusText, tilaviesti, joka on OK, jos pyyntö onnistui

vastauksessa on myös json () -menetelmä, joka palauttaa lupauksen, joka ratkaistaan ​​käsiteltävän ja JSON: ksi muunnetun kappaleen sisällön kanssa.

Joten ottaen huomioon nämä tilanteet, niin tapahtuu: ketjun ensimmäinen lupaus on määrittelemämme toiminto, jota kutsutaan tilaksi () ja joka tarkistaa vastaustilan. Jos se ei ole menestysvastaus (välillä 200 - 299), se hylkää lupaus.

Tämä toimenpide saa lupausketjun ohittamaan kaikki luetellut ketjutetut lupaukset ja hyppää suoraan alaosassa olevaan catch () -lausuntoon ja kirjaa Pyynnön epäonnistunut teksti virheviestin mukana.

Jos se onnistuu sen sijaan, se kutsuu määrittämäämme json () -funktiota. Koska edellinen lupaus onnistuneena palautti vastausobjektin, saamme sen syötteenä toiseen lupaukseen.

Palautamme tässä tapauksessa käsitellyn JSON-tiedon, joten kolmas lupaus saa JSON: n suoraan:

. sitten ((tiedot) => {
  console.log ('Pyyntö onnistui JSON-vastauksella', tiedot)
})

ja kirjaamme sen konsoliin.

Käsittelyvirheet

Yllä olevassa esimerkissä edellisessä osiossa meillä oli saalis, joka oli liitetty lupausketjuun.

Kun jokin lupausketjussa epäonnistuu ja herättää virheen tai hylkää lupauksen, ohjaus menee lähimpään saaliin () lauseeseen ketjussa.

uusi lupaus ((ratkaise, hylkää) => {
  heitä uusi virhe ('virhe')
}) .saalis (virhe => {
  console.error (err)
})
// tai
uusi lupaus ((ratkaise, hylkää) => {
  hylätä ( 'Virhe')
}) .saalis (virhe => {
  console.error (err)
})

CSS-virheet

Jos lukituslaitteen () sisällä esiintyy virhe, voit lisätä toisen salvan () käsittelemään sitä jne.

uusi lupaus ((ratkaise, hylkää) => {
  heitä uusi virhe ('virhe')
})
  .catch (virhe => {
    heitä uusi virhe ('virhe')
  })
  .catch (virhe => {
    console.error (err)
  })

Orkerointilupaukset

Promise.all ()

Jos joudut synkronoimaan erilaisia ​​lupauksia, Promise.all () auttaa sinua määrittämään luetteloiden luettelon ja suorittamaan jotain, kun ne kaikki on ratkaistu.

Esimerkki:

const f1 = nouta ('/ something.json')
const f2 = nouta ('/ something2.json')
Promise.all ([f1, f2])
  . sitten (res => {
    console.log ('Array of results', res)
  })
  .catch (virhe => {
    console.error (err)
  })

ES2015-hajottavan tehtävän syntaksin avulla voit myös tehdä

Promise.all ([f1, f2]). Sitten (([res1, res2]) => {
  console.log ('Tulokset', res1, res2)
})

Et ole rajoittunut hakemaan tietysti, kaikki lupaukset on hyvä mennä.

Promise.race ()

Promise.

Esimerkki:

const lupaOne = uusi lupaus ((ratkaise, hylkää) => {
  setTimeout (ratkaisu, 500, 'yksi')
})
const lubTwo = uusi lupaus ((ratkaise, hylkää) => {
  setTimeout (ratkaisu, 100, 'kaksi')
})
Promise.race ([lubattu yksi, lupaus kaksi)) sitten (tulos => {
  console.log (tulos) // 'kaksi'
})

moduulit

ES Modules on ECMAScript -standardi moduulien kanssa työskentelemiseen.

Vaikka Node.js on käyttänyt CommonJS-standardia vuosien ajan, selaimessa ei koskaan ollut moduulijärjestelmää, koska jokainen tärkeä päätös, kuten moduulijärjestelmä, on ensin standardisoitava ECMAScriptin avulla ja sitten selaimen toteutettava.

Tämä standardointiprosessi, joka saatiin päätökseen ES2015: llä ja selaimilla, aloitti standardin käyttöönoton yrittäen pitää kaiken hyvin linjassa, toimien samalla tavalla, ja nyt ES-moduuleja tuetaan Chromessa, Safarissa, Edgessä ja Firefoxissa (versiosta 60 lähtien).

Moduulit ovat erittäin viileitä, koska niiden avulla voit kapseloida kaikenlaisia ​​toimintoja ja altistaa tämän toiminnon muille JavaScript-tiedostoille kirjastoiksi.

ES-moduulien syntaksi

Syntaksi moduulin tuonnissa on:

Tuo paketti moduulin nimestä

kun taas CommonJS käyttää

const paketti = vaadi ('moduulin nimi')

Moduuli on JavaScript-tiedosto, joka vie yhden tai useamman arvon (esineet, toiminnot tai muuttujat) vienti-avainsanan avulla. Esimerkiksi tämä moduuli vie toiminnon, joka palauttaa merkkijonon isot kirjaimet:

uppercase.js
vie oletusarvo str => str.toUpperCase ()

Tässä esimerkissä moduuli määrittelee yhden oletusviennin, joten se voi olla anonyymi funktio. Muuten se tarvitsisi nimen erottaakseen sen muusta viennistä.

Nyt mikä tahansa muu JavaScripti-moduuli voi tuoda ylälaji.js: n tarjoamat toiminnot tuomalla sen.

HTML-sivu voi lisätä moduulin käyttämällä

Huomaa: tämän moduulin tuonti toimii kuten lykkäyskomentosarjan lataus. Katso JavaScriptin lataaminen tehokkaasti lykkäämällä ja asyncillä

On tärkeää huomata, että kaikki komentojonot, joissa on tyyppi = "moduuli", ladataan tiukassa tilassa.

Tässä esimerkissä ylempi.js-moduuli määrittelee oletusviennin, joten tuomme siihen haluamansa nimen:

tuo toUpperCase -korttiin './uppercase.js'

ja voimme käyttää sitä:

toUpperCase ('testi') // 'TEST'

Voit myös käyttää absoluuttista polkua moduulin tuontiin toisessa verkkotunnuksessa määritettyihin viitemoduuleihin:

tuo UpPaperCaseen osoitteesta https://flavio-es-modules-example.glitch.me/uppercase.js

Tämä on myös kelvollinen tuontisyntaksi:

tuo {toUpperCase} hakemistosta /uppercase.js
tuo {toUpperCase} hakemistosta '../uppercase.js'

Tämä ei ole:

tuo {toUpperCase} yläkansiosta.js
tuo {toUpperCase} tiedostosta 'utils / uppercase.js'

Se on joko ehdoton tai on ./ tai / ennen nimeä.

Muut tuonti- / vientivaihtoehdot

Näimme tämän esimerkin yllä:

vie oletusarvo str => str.toUpperCase ()

Tämä luo yhden oletusviennin. Tiedostossa voit kuitenkin viedä useita asioita käyttämällä tätä syntaksia:

const a = 1
const b = 2
Const c = 3
vie {a, b, c}

Toinen moduuli voi tuoda kaikki nämä vientitiedot käyttämällä

Tuo * moduulista

Voit tuoda vain muutaman viennistä tuhoavan tehtävän avulla:

tuo {a} moduulista
Tuo {a, b} moduulista

Voit nimetä minkä tahansa tuonnin mukavuussyistä uudelleen seuraavasti:

Tuo {a, b kuin kaksi} moduulista

Voit tuoda oletusviennin ja kaiken muun kuin oletusviennin nimen mukaan, kuten tässä tavallisessa Reakt-tuonnissa:

Tuo reagoi, {Component} kohdasta 'react'

ES-moduulien esimerkki on täällä: https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

CORS

Moduulit noudetaan CORS: llä. Tämä tarkoittaa, että jos viitat skripteihin muista verkkotunnuksista, niissä on oltava kelvollinen CORS-otsikko, joka sallii sivustojen välisen lataamisen (kuten Access-Control-Allow-Origin: *)

Entä selaimet, jotka eivät tue moduuleja?

Käytä tyypin = "moduuli" ja nomoduulin yhdistelmää:

Kääri moduulit

ES-moduulit ovat yksi suurimmista ominaisuuksista, jotka otetaan käyttöön nykyaikaisissa selaimissa. Ne ovat osa ES6-luokkaa, mutta tie niiden toteuttamiseen on ollut pitkä.

Voimme nyt käyttää niitä! Mutta meidän on myös muistettava, että jos sinulla on enemmän kuin muutama moduuli, suorituskyky osuu sivuillemme, koska se on vielä yksi askel, jonka selaimen on suoritettava suorituksen aikana.

Webpack on todennäköisesti edelleen valtava pelaaja, vaikka ES-moduulit laskeutuisivat selaimeen, mutta jolla on sellainen ominaisuus, joka on rakennettu suoraan kielelle, on valtavaa yhdistää moduulien toiminta asiakaspuolella ja myös Node.js: ssä.

Uudet jousimenetelmät

Mikä tahansa merkkijonoarvo sai joitain uusia esiintymomenetelmiä:

  • toistaa()
  • codePointAt ()

toistaa()

Toistaa merkkijonot määritetyn määrän kertoja:

'Ho'.toista (3) //' HoHoHo '

Palauttaa tyhjän merkkijonon, jos parametria ei ole tai parametri on 0. Jos parametri on negatiivinen, saat RangeErrorin.

codePointAt ()

Tätä menetelmää voidaan käyttää käsittelemään Unicode-merkkejä, joita ei voi edustaa yksi 16-bittinen Unicode-yksikkö, mutta jotka tarvitsevat sen sijaan 2.

CharCodeAt () -sovelluksen avulla sinun on haettava ensimmäinen ja toinen ja yhdistettävä ne. CodePointAt () -sovelluksella saat koko merkin yhdessä puhelussa.

Esimerkiksi tämä kiinalainen merkki “𠮷” koostuu kahdesta UTF-16 (Unicode) -osasta:

"𠮷" .charCodeAt (0) .toString (16) // d842
"𠮷" .charCodeAt (1) .toString (16) // dfb7

Jos luot uuden merkin yhdistämällä ne unicode-merkit:

"\ ud842 \ udfb7" // "𠮷"

Voit saada saman tulosmerkin codePointAt ():

"𠮷" .codePointAt (0) // 20bb7

Jos luot uuden merkin yhdistämällä ne unicode-merkit:

"\ u {20bb7}" // "𠮷"

Lisätietoja Unicodesta ja sen kanssa työskentelystä Unicode-oppaassani.

Uudet objektimenetelmät

ES2015 esitteli objektin nimitilaan useita staattisia menetelmiä:

  • Object.is () määrittelee ovatko kaksi arvoa sama arvo
  • Object.assign () käytetään objektin kopiointiin matalaksi
  • Object.setPrototypeOf asettaa objektin prototyypin

Object.is ()

Menetelmien tarkoituksena on auttaa vertaamaan arvoja.

Käyttö:

Object.is (a, b)

Tulos on aina väärä, paitsi jos:

  • a ja b ovat sama tarkka objekti
  • a ja b ovat samanlaisia ​​merkkijonoja (merkkijonot ovat yhtä suuret, kun ne koostuvat samoista merkeistä)
  • a ja b ovat yhtä suuret numerot (numerot ovat yhtä suuret, kun niiden arvo on sama)
  • a ja b ovat molemmat määrittelemättömät, molemmat nollat, molemmat NaN, molemmat totta tai molemmat vääriä

0 ja -0 ovat JavaScript-arvon eri arvot, joten kiinnitä huomiota tässä erityistapauksessa (muunna kaikki arvoon +0 käyttämällä esimerkiksi + unary-operaattoria, ennen kuin esimerkiksi vertaat).

Object.assign ()

Tämä menetelmä otettiin käyttöön julkaisussa ES2015, tämä menetelmä kopioi yhden tai useamman objektin kaikki lueteltavat omat ominaisuudet toiseen.

Sen ensisijainen käyttötapa on luoda matala kopio objektista.

const kopioitu = Object.assign ({}, alkuperäinen)

Koska se on matala kopio, arvot kloonataan ja objektiviitteet kopioidaan (ei itse objekteja), joten jos muokkaat alkuperäisessä objektissa olevaa objektiominaisuutta, se on muokattu myös kopioidussa objektissa, koska viitattu sisäinen objekti on sama:

const original = {
  nimi: 'Fiesta',
  auto: {
    väri: 'sininen'
  }
}
const kopioitu = Object.assign ({}, alkuperäinen)
original.name = 'Tarkennus'
original.car.color = 'keltainen'
kopioitu.nimi // Fiesta
kopioitu.autoväri // keltainen

Mainitsin yhden tai useamman:

const wisPerson = {
  isWise: totta
}
const foolishPerson = {
  isFoolish: totta
}
const wisAndFoolishPerson = Object.assign ({}, wisPerson, foolishPerson)
console.log (wisAndFoolishPerson) // {isWise: true, isFoolish: true}

Object.setPrototypeOf ()

Aseta kohteen prototyyppi. Hyväksyy kaksi argumenttia: esineen ja prototyypin.

Käyttö:

Object.setPrototypeOf (objekti, prototyyppi)

Esimerkki:

const eläin = {
  isAnimal: totta
}
const-nisäkäs = {
  isMammal: totta
}
nisäkäs .__ proto__ = eläin
nisäkäs.isAnimal // totta
const koira = Object.create (eläin)
dog.isAnimal // totta
console.log (dog.isMammal) // määrittelemätön
Object.setPrototypeOf (koira, nisäkäs)
dog.isAnimal // totta
dog.isMammal // totta

Levitysoperaattori

Voit laajentaa taulukon, objektin tai merkkijonon hajaoperaattorilla ...

Aloitetaan ryhmäesimerkillä. tietty

const a = [1, 2, 3]

voit luoda uuden taulukon käyttämällä

const b = [... a, 4, 5, 6]

Voit myös luoda kopion taulukosta käyttämällä

const c = [... a]

Tämä toimii myös kohteissa. Klooni esine seuraavilla:

const newObj = {... oldObj}

Merkkijonoja käyttämällä hajaoperaattori luo taulukon jokaisessa merkkijonossa:

const hey = 'hei'
const arrayized = [... hei] // ['h', 'e', ​​'y']

Tällä operaattorilla on aika hyödyllisiä sovelluksia. Tärkein on kyky käyttää taulukkoa funktioargumenttina hyvin yksinkertaisella tavalla:

const f = (foo, bar) => {}
const a = [1, 2]
fa)

(Aikaisemmin voit tehdä tämän käyttämällä f.apply (null, a), mutta se ei ole niin mukavaa ja luettavissa.)

Loput elementti on hyödyllinen työskennellessäsi taulukon hajottamisen kanssa:

konstoluvut = [1, 2, 3, 4, 5]
[ensimmäinen, toinen, ... muut] = numerot

ja levitä elementtejä:

konstoluvut = [1, 2, 3, 4, 5]
const summa = (a, b, c, d, e) => a + b + c + d + e
const summa = summa (... numeroita)

ES2018 esittelee lepo-ominaisuudet, jotka ovat samat, mutta kohteille.

Lepo-ominaisuudet:

const {ensimmäinen, toinen, ... muut} = {
  ensin: 1,
  toinen: 2,
  kolmas: 3,
  neljäs: 4,
  viides: 5
}
ensin // 1
toinen // 2
muut // {kolmas: 3, neljäs: 4, viides: 5}

Levitysominaisuudet antavat meille mahdollisuuden luoda uusi objekti yhdistämällä objektin ominaisuudet, jotka on kulunut levitysoperaattorin jälkeen:

const items = {ensimmäinen, toinen, ... muut}
esineet // {ensimmäinen: 1, toinen: 2, kolmas: 3, neljäs: 4, viides: 5}

Sarja

Aseta datarakenne antaa meille mahdollisuuden lisätä tietoja säilöön.

Joukko on kokoelma esineitä tai alkukantaisia ​​tyyppejä (merkkijonot, numerot tai booleanit), ja voit ajatella sitä kartana, jossa arvoja käytetään kartanäppäiminä, jolloin kartan arvo on aina boolean totta.

Alusta sarja

Sarja alustetaan soittamalla:

const s = uusi sarja ()

Lisää kohteita sarjaan

Voit lisätä kohteita sarjaan lisäämismenetelmällä:

s.add ( 'yksi')
s.add ( 'kaksi')

Joukko tallentaa vain ainutlaatuisia elementtejä, joten s.add ('one') -kutsuminen useita kertoja ei lisää uusia kohteita.

Et voi lisätä useita elementtejä sarjaan samanaikaisesti. Sinun on soitettava add () useita kertoja.

Tarkista, onko esine sarjassa

Kun jokin elementti on sarjassa, voimme tarkistaa sisältyykö sarja siihen:

s.has ('yksi') // totta
s.has ('kolme') // vääriä

Poista kohde Set by -näppäimestä

Käytä delete () -menetelmää:

s.delete ( 'yksi')

Määritä sarjan kohteiden lukumäärä

Käytä kokoominaisuutta:

s.size

Poista kaikki kohteet sarjasta

Käytä clear () -menetelmää:

s.clear ()

Iteroi sarjan kohteet

Käytä näppäimiä () tai arvoja () -menetelmiä - ne ovat vastaavia:

varten (const k of s.keys ()) {
  console.log (k)
}
for (const k of s.values ​​()) {
  console.log (k)
}

Merkinnät () -tapa palauttaa iteraattorin, jota voit käyttää näin:

const i = s.entries ()
console.log (i.next ())

kutsutaan i.next (), jokainen elementti palautetaan {arvo, tehty = vääri} -objektina, kunnes iteraattori loppuu, jolloin tehty on totta.

Voit myös käyttää sarjan forEach () -menetelmää:

s.forEach (v => console.log (v))

tai voit käyttää sarjaa vain silmukan for:

varten (const k of s) {
  console.log (k)
}

Alusta sarja arvoilla

Voit alustaa sarjan arvojoukolla:

const s = uusi sarja ([1, 2, 3, 4])

Muunna Set-näppäimet taulukkoon

const a = [... s.näppäimet ()]
// tai
const a = [... s.arvot ()]

Heikko asema

WeakSet on erityinen tyyppinen sarja.

Sarjassa esineitä ei koskaan kerätä roskiksi. Sen sijaan WeakSet antaa kaikkien esineidensä vapaasti kerätä roskista. Jokainen WeakSet-avain on esine. Kun viittaus tähän esineeseen katoaa, arvo voi olla roskat kerätty.

Tässä on tärkeimmät erot:

  1. et voi toistoa WeakSetin kautta
  2. Et voi tyhjentää kaikkia kohteita WeakSetistä
  3. et voi tarkistaa sen kokoa

Kehystason koodi käyttää yleensä WeakSet-järjestelmää, ja se paljastaa vain nämä menetelmät:

  • lisätä()
  • on ()
  • poistaa()

Kartta

Karttatietorakenne antaa meille mahdollisuuden yhdistää tiedot avaimeen.

Ennen ES6: ta

Ennen sen käyttöönottoa ihmiset yleensä käyttivät esineitä karttoina yhdistämällä jonkin objektin tai arvon tiettyyn avainarvoon:

const auto = {}
auto ['väri'] = 'punainen'
auto.omistaja = 'Flavio'
console.log (auto ['väri']) // punainen
console.log (car.color) // punainen
konsoli.logi (auton omistaja) // Flavio
console.log (auto ['omistaja']) // Flavio

Kirjoita kartta

ES6 esitteli karttatietorakenteen tarjoamalla meille asianmukaisen työkalun tällaisen tiedon organisoinnin käsittelemiseen.

Kartta alustetaan soittamalla:

const m = uusi kartta ()

Lisää kohteita karttaan

Voit lisätä kohteita karttaan käyttämällä määritettyä menetelmää:

m.set ('väri', 'punainen')
m.set ('ikä', 2)

Hanki kohde kartalta avaimella

Ja voit saada kohteita pois kartasta käyttämällä get:

const color = m.get ('väri')
vakioikä = m.get ('ikä')

Poista kohde kartalta avaimella

Käytä delete () -menetelmää:

m.delete (color)

Poista kaikki kohteet kartalta

Käytä clear () -menetelmää:

m.clear ()

Tarkista, sisältääkö kartta avaimen mukaan

Käytä has () -menetelmää:

const hasColor = m.has ('väri')

Etsi kohteiden lukumäärä kartalta

Käytä kokoominaisuutta:

vakiokoko = m.koko

Alusta kartta arvoineen

Voit alustaa kartan arvojoukolla:

const m = uusi kartta ([['väri', 'punainen'], ['omistaja', 'Flavio'], ['ikä', 2]])

Kartta-näppäimet

Aivan kuten mitä tahansa arvoa (objektia, taulukkoa, merkkijonoa, numeroa) voidaan käyttää karttatunnuksen avain-arvotietojen arvoina, mitä tahansa arvoa voidaan käyttää avaimena, jopa objekteja.

Jos yrität saada olematonta avainta käyttämällä get () -karttaa, se palaa määrittelemättä.

Oudot tilanteet, joita et koskaan koskaan löydä tosielämässä

const m = uusi kartta ()
m.set (NaN, 'testi')
m.get (NaN) // testi
const m = uusi kartta ()
m.set (+0, 'testi')
m.get (-0) // testi

Toista karttanäppäimillä

Kartta tarjoaa avaimet () -menetelmän, jota voimme käyttää kaikkien näppäinten toistoon:

varten (const k of m.keys ()) {
  console.log (k)
}

Toista kartta-arvoja

Karttaobjekti tarjoaa arvot () -menetelmän, jota voimme käyttää kaikkien arvojen iterointiin:

varten (const v of m.values ​​()) {
  console.log (v)
}

Jatka karttanäppäimen yli, arvopareja

Karttaobjekti tarjoaa merkinnät () -menetelmän, jota voimme käyttää kaikkien arvojen iterointiin:

varten (const [k, v] of m.entries ()) {
  konsoli.logi (k, v)
}

jota voidaan yksinkertaistaa

for (const [k, v] m) {
  konsoli.logi (k, v)
}

Muunna kartanäppäimet taulukkoon

const a = [... m.näppäimet ()]

Muunna karttaarvot taulukkoon

const a = [... m.arvot ()]

WeakMap

Heikko kartta on erityyppinen kartta.

Karttaobjektissa esineitä ei koskaan kerätä roskiksi. Heikko kartta antaa sen sijaan kaikki tavaransa kerätä vapaasti roskat. Jokainen WeakMap-avain on esine. Kun viittaus tähän esineeseen katoaa, arvo voi olla roskat kerätty.

Tässä on tärkeimmät erot:

  1. et voi toistaa WeakMap-näppäimen tai arvojen (tai avain-arvojen) yli
  2. Et voi tyhjentää kaikkia kohteita WeakMapista
  3. et voi tarkistaa sen kokoa

Heikko kartta paljastaa ne menetelmät, jotka vastaavat karttamenetelmiä:

  • saada (k)
  • asetettu (k, v)
  • on (k)
  • poistaa (k)

WeakMapin käyttötapaukset ovat vähemmän ilmeisiä kuin kartan, eikä niitä välttämättä löydy koskaan, mutta käytännössä sitä voidaan käyttää rakentamaan muistiherkkä välimuisti, joka ei aio häiritä roskien keräystä, tai huolelliseen kapselointiin ja tiedon piilottamiseen.

generaattorit

Generaattorit ovat erityinen toiminto, jolla on mahdollisuus keskeyttää itsensä ja jatkaa sitä myöhemmin, jolloin toinen koodi voidaan suorittaa sillä välin.

Katso yksityiskohtainen selitys aiheesta täydellisestä JavaScript-generaattorien oppaasta.

Koodi päättää, että sen on odotettava, joten se antaa toisen "jonossa" olevan koodin suorittaa, ja pidättää itsellään oikeuden jatkaa toimintaansa "kun odottama asia" on valmis.

Kaikki tämä tapahtuu yhdellä yksinkertaisella avainsanalla: sato. Kun generaattori sisältää kyseisen avainsanan, suoritus keskeytetään.

Generaattori voi sisältää monia tuotto-avainsanoja, jolloin se pysäyttää itsensä useita kertoja, ja se tunnistetaan funktion * avainsanalla, jota ei pidä sekoittaa osoittimen deferenssioperaattoriin, jota käytetään alemman tason ohjelmointikielellä, kuten C, C ++ tai Go.

Generaattorit sallivat kokonaan uudet ohjelmointimallit JavaScriptillä, mahdollistaen:

  • Kaksisuuntainen tiedonsiirto generaattorin ollessa käynnissä
  • pitkäikäisiä silmukoita, jotka eivät jäädyytä ohjelmaa

Tässä on esimerkki generaattorista, joka selittää kuinka se kaikki toimii.

toiminto * laskin (tulo) {
    var doubleThat = 2 * (saanto (syöttö / 2))
    var toinen = saanto (doubleThat)
    paluu (syöttö * tuplaTämä * toinen)
}

Alustamme sen

const calc = laskin (10)

Sitten aloitamme iteraattorin generaattorissamme:

calc.next ()

Tämä ensimmäinen iterointi aloittaa iteraattorin. Koodi palauttaa tämän objektin:

{
  tehty: väärä
  arvo: 5
}

Mitä tapahtuu, on: koodi suorittaa funktion, sisääntulolla = 10 sellaisena kuin se välitettiin generaattorirakentajassa. Se jatkuu, kunnes saavuttaa saannon, ja palauttaa saannon sisällön: input / 2 = 5. Joten saimme arvon 5 ja ilmoituksen siitä, että iterointia ei ole tehty (toiminto on vain keskeytetty).

Toisessa iteraatiossa välitetään arvo 7:

calc.next (7)

ja mitä saimme takaisin on:

{
  tehty: väärä
  arvo: 14
}

7 asetettiin doubleThat-arvoksi. Tärkeää: saatat lukea, että syöte / 2 oli argumentti, mutta se on vain ensimmäisen iteraation palautusarvo. Ohitamme nyt tämän ja käytä uutta tuloarvoa 7 ja kerrotaan se 2: lla.

Sitten saavutamme toisen tuoton, ja joka palauttaa doubleThat, joten palautettu arvo on 14.

Seuraavassa ja viimeisessä iteraatiossa siirrytään 100: een

calc.next (100)

ja vastineeksi saimme

{
  valmis: totta
  arvo: 14000
}

Kun iterointi on valmis (enempää saannon avainsanoja ei löydy) ja palaamme vain (syöte * doubleThat * toinen), joka on 10 * 14 * 100.

Nämä olivat ominaisuuksia, jotka otettiin käyttöön ES2015-ohjelmassa. Sukellaan nyt ES2016-ohjelmaan, joka on paljon pienempi.

Array.prototype.includes ()

Tämä ominaisuus tuo luettavan syntaksin tarkistaaksesi, sisältääkö taulukko elementtiä.

ES6: n ja sitä alhaisemman kanssa tarkistaaksesi, sisälsikö taulukko elementtiä, joudut käyttämään indexOf: a, joka tarkistaa taulukon indeksin ja antaa -1, jos elementtiä ei ole.

Koska -1 arvioidaan todellisena arvona, et voi tehdä sitä esimerkiksi

if (! [1,2] .indexOf (3)) {
  console.log ('Ei löydy')
}

Tämän ominaisuuden avulla, joka esiteltiin ES7: ssä, voimme tehdä

if (! [1,2]. sisältää (3)) {
  console.log ('Ei löydy')
}

Laajennusoperaattori

Eksponenssioperaattori ** vastaa Math.pow (): ta, mutta se tuodaan kielelle kirjastotoiminnon sijasta.

Math.pow (4, 2) == 4 ** 2

Tämä ominaisuus on hieno lisä matemaattisille intensiivisille JS-sovelluksille.

** -operaattori on standardisoitu monille kielille, mukaan lukien Python, Ruby, MATLAB, Lua, Perl ja monet muut.

Nämä olivat ominaisuudet, jotka esiteltiin vuonna 2016. Sukellaan nyt vuoteen 2017

Jousimatto

Merkkijonojen täyttö tarkoituksena on lisätä merkkejä merkkijonoon, niin että se saavuttaa tietyn pituuden.

ES2017 esittelee kaksi jousimenetelmää: padStart () ja padEnd ().

padStart (targetLength [, padString])
padEnd (targetLength [, padString])

Näytteen käyttö:

Object.values ​​()

Tämä menetelmä palauttaa taulukon, joka sisältää kaikki kohteen omat ominaisuusarvot.

Käyttö:

const person = {nimi: 'Fred', ikä: 87}
Objektiarvot (henkilö) // ['Fred', 87]

Object.values ​​() toimii myös taulukkojen kanssa:

const people = ['Fred', 'Tony']
Objektiarvot (ihmiset) // ['Fred', 'Tony']

Object.entries ()

Tämä menetelmä palauttaa taulukon, joka sisältää kaikki kohteen omat ominaisuudet, taulukkona [avain, arvo] -pareina.

Käyttö:

const person = {nimi: 'Fred', ikä: 87}
Object.entries (henkilö) // [['nimi', 'Fred'], ['ikä', 87]]

Object.entries () toimii myös taulukkojen kanssa:

const people = ['Fred', 'Tony']
Object.entries (ihmiset) // [['0', 'Fred'], ['1', 'Tony']]

Object.getOwnPropertyDescriptors ()

Tämä menetelmä palauttaa kohteen kaikki omat (ei periytyneet) ominaisuuskuvaukset.

Kaikilla JavaScript-kohteilla on joukko ominaisuuksia, ja jokaisella näistä ominaisuuksista on kuvaaja.

Kuvaus on kiinteistön ominaisuuksien joukko, ja se koostuu seuraavien osajoukosta:

  • arvo: kiinteistön arvo
  • kirjoitettavissa: totta omaisuutta voidaan muuttaa
  • get: ominaisuuden getter-toiminto, jota kutsutaan, kun ominaisuus luetaan
  • set: ominaisuuden asetustoiminto, jota kutsutaan, kun ominaisuuden arvoksi asetetaan
  • konfiguroitavissa: jos väärä, ominaisuutta ei voida poistaa eikä mitään attribuuttia voida muuttaa, paitsi sen arvo
  • lueteltava: totta, jos omaisuus on lueteltavissa

Object.getOwnPropertyDescriptors (obj) hyväksyy objektin ja palauttaa objektin kuvausjoukolla.

Millä tavalla tämä on hyödyllistä?

ES6 antoi meille Object.assign (), joka kopioi kaikki lueteltavat omat ominaisuudet yhdestä tai useammasta objektista ja palauttaa uuden objektin.

Siinä on kuitenkin ongelma, koska se ei kopioi ominaisuuksia, joissa ei ole oletusmääritteitä.

Jos esimerkiksi objektilla on vain asettaja, sitä ei kopioitu oikein uuteen objektiin Object.assign () -sovelluksella.

Esimerkiksi

const person1 = {
    asetettu nimi (uusiNimi) {
        console.log (uusi_nimi)
    }
}

Tämä ei toimi:

const person2 = {}
Object.assign (henkilö2, henkilö1)

Mutta tämä toimii:

const person3 = {}
Object.defineProperties (person3,
  Object.getOwnPropertyDescriptors (PERSON1))

Kuten näet yksinkertaisella konsoli-testillä:

henkilö1.nimi = 'x'
"X"
henkilö2.nimi = 'x'
henkilö3.nimi = 'x'
"X"

person2 kaipaa asetinta, sitä ei kopioitu.

Sama rajoitus koskee matalaa kloonausobjekteja Object.create (): lla.

Loppu pilkut

Tämä ominaisuus sallii jäljellä pilkujen toimintojen ilmoituksiin ja funktiokutsuihin:

const doSomething = (var1, var2,) => {
  // ...
}
doSomething ('test2', 'test2',)

Tämä muutos rohkaisee kehittäjiä lopettamaan ruma ”pilkku linjan alussa” -tapa.

Async-toiminnot

JavaScript kehittyi hyvin lyhyessä ajassa takaisinsoituksista lupauksiin (ES2015), ja koska ES2017: n asynkroninen JavaScript on vielä yksinkertaisempi asyncin kanssa / odota syntaksia.

Async-toiminnot ovat yhdistelmä lupauksia ja generaattoreita, ja periaatteessa ne ovat korkeamman tason abstrakteja lupauksiin nähden. Sallikaa minun toistaa: async / wait odottaa lupauksia.

Miksi async / odota otettiin käyttöön?

Ne vähentävät kattilalevyä lupausten ympärillä ja "älä rikkoa ketjua" rajoitus ketjutuslupauksille.

Kun lupaukset otettiin käyttöön ES2015-ohjelmassa, niiden oli tarkoitus ratkaista asynkronisen koodin aiheuttama ongelma, ja he tekivätkin, mutta kahden vuoden aikana, joka erotti ES2015: n ja ES2017: n, oli selvää, että lupaukset eivät voineet olla lopullinen ratkaisu.

Lupauksia annettiin ratkaista kuuluisa takaisinsoitto helvetti -ongelma, mutta ne esittelivät monimutkaisuuden itsessään ja syntaksin monimutkaisuuden.

Ne olivat hyviä alukkeita, joiden ympärille parempi syntaksi voidaan altistaa kehittäjille, joten kun aika oli oikea, saimme async-funktiot.

Ne saavat koodin näyttämään siltä, ​​että se on synkroninen, mutta se on asynkroninen ja estämättä kulissien takana.

Kuinka se toimii

Async-funktio palauttaa lupauksen, kuten tässä esimerkissä:

const doSomethingAsync = () => {
  palauta uusi lupaus (lahentaa => {
    setTimeout (() => ratkaisu ('tein jotain'), 3000)
  })
}

Kun haluat soittaa tähän toimintoon, odotat valmiina, ja kutsukoodi pysähtyy, kunnes lupaus on ratkaistu tai hylätty. Yksi varoitus: asiakastoiminto on määritettävä asynkiksi. Tässä on esimerkki:

const doSomething = async () => {
  console.log (odota doSomethingAsync ())
}

Nopea esimerkki

Tämä on yksinkertainen esimerkki asynkistä / odota, jota käytetään toimimaan asynkronisesti:

const doSomethingAsync = () => {
  palauta uusi lupaus (lahentaa => {
    setTimeout (() => ratkaisu ('tein jotain'), 3000)
  })
}
const doSomething = async () => {
  console.log (odota doSomethingAsync ())
}
console.log ( 'ennen')
tee jotain()
console.log ( 'jälkeen)

Yllä oleva koodi tulostaa seuraavat selainkonsoliin:

Ennen
Jälkeen
Tein jotain // 3 sekunnin kuluttua

Lupaa kaikki asiat

Async-avainsanan valmisteleminen mille tahansa toiminnolle tarkoittaa, että funktio palauttaa lupauksen.

Vaikka se ei tee niin nimenomaisesti, se saa sen sisäisesti palauttamaan lupauksen.

Siksi tämä koodi on kelvollinen:

const aFunction = async () => {
  palauta 'testi'
}
aFunction (). then (alert) // Tämä varoittaa 'testistä'

ja se on sama kuin:

const aFunction = async () => {
  return Promise.resolve ('testi')
}
aFunction (). then (alert) // Tämä varoittaa 'testistä'

Koodi on paljon yksinkertaisempi lukea

Kuten yllä olevasta esimerkistä näet, koodimme näyttää hyvin yksinkertaiselta. Vertaa sitä koodiin käyttämällä selkeitä lupauksia ketjutus- ja takaisinsoitto-ominaisuuksilla.

Ja tämä on hyvin yksinkertainen esimerkki, suurimpia etuja syntyy, kun koodi on paljon monimutkaisempi.

Esimerkiksi tässä on se, miten saat JSON-resurssin ja jäsentää se lupauksilla:

const getFirstUserData = () => {
  return fetch ('/ users.json') // hanki käyttäjäluettelo
    . sitten (vastaus => response.json ()) // jäsentä JSON
    . sitten (käyttäjät => käyttäjät [0]) // valitse ensimmäinen käyttäjä
    . sitten (user => fetch (`/ users / $ {user.name}`)) // saada käyttäjätietoja
    . sitten (userResponse => response.json ()) // jäsentä JSON
}
getFirstUserData ()

Ja tässä on sama toiminto, joka tarjotaan käyttämällä wait / async:

const getFirstUserData = async () => {
  const response = odota noutaa ('/ users.json') // hanki käyttäjäluettelo
  const käyttäjät = odota vastausta.json () // jäsentä JSON
  const user = käyttäjät [0] // valitse ensimmäinen käyttäjä
  const userResponse = odota noutaa (`/ users / $ {user.name}`) // hanki käyttäjätiedot
  const userData = odota user.json () // jäsentä JSON
  palauta userData
}
getFirstUserData ()

Useita asynk-toimintoja sarjassa

Async-toiminnot voidaan ketjuttaa erittäin helposti, ja syntaksi on paljon luettavissa kuin selkeillä lupauksilla:

const lubToDoSomething = () => {
  palauta uusi lupaus (lahentaa => {
    setTimeout (() => ratkaisu ('tein jotain'), 10000)
  })
}
const watchOverSomeoneDoingSomething = async () => {
  const jotain = odota lubToDoSomething ()
  palauttaa jotain + 'ja katsoin'
}
const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
  const jotain = odota watchOverSomeoneDoingSomething ()
  palauttaa jotain + 'ja katsoin myös'
}
watchOverSomeoneWatchingSomeoneDoingSomething (). sitten (res => {
  console.log (res)
})

Tulostaa:

Tein jotain ja katselin ja katselin myös

Helppo virheenkorjaus

Lupausten virheenkorjaus on vaikeaa, koska virheenkorjaaja ei astu asynkronisen koodin yli.

Async / wait odottaa tämän erittäin helpoksi, koska kääntäjälle se on kuin synkroninen koodi.

Jaettu muisti ja atomit

WebWorkersia käytetään monisäikeisten ohjelmien luomiseen selaimeen.

Ne tarjoavat viestintäprotokollan tapahtumien kautta. Vuodesta ES2017, voit luoda jaetun muistiryhmän verkkotyöntekijöiden ja heidän luojansa välillä SharedArrayBuffer-sovelluksen avulla.

Koska ei tiedetä, kuinka kauan jaetun muistin kirjoittamiseen kuluva aika kuluu, atomit ovat tapa varmistaa, että arvoa luettaessa kaikenlainen kirjoitustoimenpide suoritetaan loppuun.

Tarkempia yksityiskohtia tästä löytyy erityisehdotuksesta, joka on sittemmin pantu täytäntöön.

Tämä oli ES2017. Esittelen nyt ES2018-ominaisuudet

Lepo- / leviämisominaisuudet

ES2015 esitteli lepoelementin käsitteen työskennellessään ryhmän tuhoamisen kanssa:

konstoluvut = [1, 2, 3, 4, 5]
[ensimmäinen, toinen, ... muut] = numerot

ja levitä elementtejä:

konstoluvut = [1, 2, 3, 4, 5]
const summa = (a, b, c, d, e) => a + b + c + d + e
const summa = summa (... numeroita)

ES2018 esittelee saman, mutta kohteille.

Lepo-ominaisuudet:

const {ensimmäinen, toinen, ... muut} = {ensimmäinen: 1, toinen: 2, kolmas: 3, neljäs: 4, viides: 5}
ensin // 1
toinen // 2
muut // {kolmas: 3, neljäs: 4, viides: 5}

Levitysominaisuudet mahdollistavat uuden objektin luomisen yhdistämällä objektin ominaisuudet, jotka siirretään hajautusoperaattorin jälkeen:

const items = {ensimmäinen, toinen, ... muut}
esineet // {ensimmäinen: 1, toinen: 2, kolmas: 3, neljäs: 4, viides: 5}

Asynkroninen iteraatio

Uusi odotusarvoinen rakenne antaa sinun käyttää asynkarilla toistettavaa objektia silmukan iteraationa:

odottaa (readLines (filePath) const -rivi) {
  console.log (line)
}

Koska tämä käyttö odottaa, voit käyttää sitä vain async-toimintojen sisällä, kuten normaali odottaa.

Promise.prototype.finally ()

Kun lupaus täytetään, se kutsuu onnistuneesti () menetelmiä peräkkäin.

Jos jokin epäonnistuu tämän aikana, sitten () -menetelmät hyppäävät ja catch () -menetelmä suoritetaan.

lopuksi () antaa sinun suorittaa koodia riippumatta siitä, onko lupaus onnistunut vai ei onnistunut:

nouto (file.json ')
  . sitten (data => data.json ())
  .catch (virhe => console.error (virhe))
  . lopullisesti (() => console.log ('valmis'))

Säännöllisen lausekkeen parannukset

ES2018 otti käyttöön joukon säännöllisiä lausekkeita koskevia parannuksia. Suosittelen heidän opetusohjelmaani, saatavana osoitteesta https://flaviocopes.com/javascript-regular-expressions/.

Tässä on ES2018-erityisiä lisäyksiä.

RegExp-väitteiden taustalla: sovita merkkijono sen edestä

Tämä on otsikko: käytät? = Sovittaaksesi merkkijonon, jota seuraa tietty alijono:

/ Roger (= Waters) /
/ Roger (? = Vesialueet) / .testi ('Roger on koirani') // vääriä
/ Roger (? = Waters) / .testi ('Roger on koirani ja Roger Waters on kuuluisa muusikko') // totta

?! suorittaa käänteisen toiminnan, sovittamalla, jos merkkijonoa ei seuraa tietty alijono:

/ Roger (?! Waters) /
/ Roger (?! Waters) / .testi ('Roger on koirani') // totta
/ Roger (?! Waters) / .testi ('Roger Waters on kuuluisa muusikko') // vääriä

Lookaheads käyttävät symbolia? =. Ne olivat jo saatavilla.

Uusi ominaisuus Lookbehinds käyttää? <=.

/ (? <= Roger) vesialueet /
/ (? <= Roger) Waters / .test ('Pink Waters on koirani') // vääriä
/ (? <= Roger) Waters / .test ('Roger on koirani ja Roger Waters on kuuluisa muusikko') // totta

Katse taakse on nollattu käyttämällä?

/ (? 
/ (? 

Unicode-ominaisuus karkaa \ p {…} ja \ P {…}

Säännöllisessä lausekkeessa voit käyttää \ d sovittaaksesi minkä tahansa numeron; \ s vastaamaan mitä tahansa merkkiä, joka ei ole välilyönti, \ w vastaamaan mitä tahansa aakkosnumeerista merkkiä jne.

Tämä uusi ominaisuus laajentaa tämän käsitteen kaikkiin Unicode-merkkeihin, jotka esittelevät \ p {}, ja on kieltävä \ P {}.

Jokaisella unicode-merkillä on joukko ominaisuuksia. Esimerkiksi komentosarja määrittää kieliperheen, ASCII on looginen, mikä pätee ASCII-merkkeihin ja niin edelleen. Voit lisätä tämän ominaisuuden kaavion suluihin, ja regex tarkistaa sen olevan totta:

/^\p{ASCII}+$/u.test('abc ') // 
/^\p{ASCII}+$/u.test('[email protected] ') // 
/^\p{ASCII}+$/u.test('ABC ') // 

ASCII_Hex_Digit on toinen boolean ominaisuus, joka tarkistaa, sisältääkö merkkijono vain kelvollisia heksadesimaalinumeroita:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF ') // 
/^\p{ASCII_Hex_Digit}+$/u.test('h ') // 

On monia muita boolean ominaisuuksia, joita tarkistat vain lisäämällä heidän nimensä kaavion suluihin, mukaan lukien isot kirjaimet, pienet kirjaimet, valkoinen_ tila, aakkosellinen, hymiö ja muut:

/^\p{Lowercase}$/u.test('h ') // 
/^\p{Uppercase}$/u.test('H ') // 
/^\p{Emoji}+$/u.test('H ') // 
/^\p{Emoji}+$/u.test(' ') // 

Näiden binääristen ominaisuuksien lisäksi voit tarkistaa minkä tahansa unicode-merkin ominaisuudet tietyn arvon mukaisiksi. Tässä esimerkissä tarkistan, onko merkkijono kirjoitettu kreikan vai latinalaisen aakkosen avulla:

/^\p{Script=Greek}+$/u.test('ελληνικά ') // 
/^\p{Script=Latin}+$/u.test('hey ') // 

Lue lisää kaikista ominaisuuksista, joita voit käyttää suoraan ehdotuksessa.

Nimetyt sieppausryhmät

ES2018: ssa sieppausryhmä voidaan määrittää nimeä sen sijaan, että niille osoitetaan vain aikaväli tulojoukossa:

const re = / (?  \ d {4}) - (?  \ d {2}) - (?  \ d {2}) /
const tulos = re.exec ('2015-01-02')
// tulos.ryhmät.vuosi === '2015';
// tulos.ryhmät.kuukausi === '01';
// tulos.ryhmät.päivä === '02';

S-lippu säännöllisille lausekkeille

S-lippu, lyhyt yhden rivin kohdalla, aiheuttaa. vastaamaan myös uusia rivimerkkejä. Ilman sitä piste vastaa tavallisia merkkejä, mutta ei uutta riviä:

/hi.welcome/.test('hi\nwelcome ') // vääriä
/hi.welcome/s.test('hi\nwelcome ') // totta

ESNext

Mitä seuraavaksi? ESNext.

ESNext on nimi, joka osoittaa aina JavaScriptin seuraavan version.

Nykyinen ECMAScript-versio on ES2018. Se julkaistiin kesäkuussa 2018.

Historiallisesti JavaScript-lehdet on standardisoitu kesän aikana, joten voimme odottaa ECMAScript 2019: n julkaisevan kesällä 2019.

Joten kirjoittamishetkellä ES2018 on julkaistu, ja ESNext on ES2019

ECMAScript-standardin ehdotukset järjestetään vaiheittain. Vaiheet 1–3 ovat uusien ominaisuuksien inkubaattori, ja vaiheeseen 4 päästävät ominaisuudet viimeistellään osana uutta standardia.

Kirjoittamishetkellä meillä on vaiheessa 4 useita ominaisuuksia. Esitän niitä tässä osassa. Suurimpien selainten uusimpien versioiden pitäisi jo ottaa käyttöön suurin osa niistä.

Jotkut näistä muutoksista on tarkoitettu enimmäkseen sisäiseen käyttöön, mutta on myös hyvä tietää, mitä tapahtuu.

Vaiheessa 3 on muitakin ominaisuuksia, jotka voidaan nostaa vaiheeseen 4 seuraavien kuukausien aikana, ja voit tarkistaa ne tästä GitHub-arkistosta: https://github.com/tc39/proposals.

Array.prototype. {Tasainen, flatMap}

flat () on uusi matriisin esiintymomenetelmä, joka voi luoda yhden ulotteisen taulukon moniulotteisesta taulukosta.

Esimerkki:

['Koira', ['Lampaat', 'Susi']]), litteä ()
// ['koira', 'lammas', 'susi']

Oletuksena se "asettuu" vain yhdelle tasolle, mutta voit lisätä parametrin asettaaksesi tasojen määrän, johon haluat tasata taulukon. Aseta se äärettömyyteen saadaksesi rajattomat tasot:

['Koira', ['Lampaat', ['Susi']]]), litteä ()
// ['koira', 'lammas', ['susi']]
['Koira', ['Lampaat', ['Susi']]]), litteä (2)
// ['koira', 'lammas', 'susi']
['Koira', ['Lampaat', ['Susi']]]), litteä (Ääretön)
// ['koira', 'lammas', 'susi']

Jos tunnet taulukon JavaScript map () -menetelmän, tiedät, että sitä käyttämällä voit suorittaa toiminnon jokaisessa taulukon elementissä.

flatMap () on uusi Array-tapausmenetelmä, jossa yhdistyvät flat () ja map (). Se on hyödyllistä soitettaessa toimintoon, joka palauttaa matriisin kartan () takaisinsoittoon, mutta haluat, että tuloksena oleva taulukko on tasainen:

['Koirani', 'on mahtavaa'] .kartta (sanat => sanat.split (''))
// [['minun', 'koira'], ['on', 'mahtava']]
['Koirani', 'on mahtavaa']. FlatMap (sanat => sanat.split (''))
// ['Oma', 'koira', 'on', 'mahtava']

Valinnainen saalisidonta

Joskus meillä ei tarvitse olla parametria sidottua kokeen / saaliin saalislohkoon.

Meidän oli aikaisemmin tehtävä:

yrittää {
  // ...
} saalis (e) {
  // kahvavirhe
}

Vaikka meidän ei koskaan tarvinnut käyttää e: tä analysoidaksesi virhe. Voimme nyt yksinkertaisesti jättää sen pois:

yrittää {
  // ...
} ottaa kiinni {
  // kahvavirhe
}

Object.fromEntries ()

Objekteilla on merkinnät () -menetelmä, vuodesta ES2017.

Se palauttaa taulukon, joka sisältää kaikki kohteen omat ominaisuudet, joukkona [avain, arvo] -paria:

const person = {nimi: 'Fred', ikä: 87}
Object.entries (henkilö) // [['nimi', 'Fred'], ['ikä', 87]]

ES2019 esittelee uuden Object.fromEntries () -menetelmän, joka voi luoda uuden objektin sellaisesta ominaisuusjoukosta:

const person = {nimi: 'Fred', ikä: 87}
const merkinnät = Object.entries (henkilö)
const newPerson = Object.fromEntries (merkinnät)

henkilö! == uusiPerson // totta

String.prototype. {TrimStart, trimEnd}

Tämä ominaisuus on ollut osa v8 / Chromia jo melkein vuoden ajan, ja se standardisoidaan standardissa ES2019.

trimStart ()

Palauta uusi merkkijono, josta on poistettu valkoinen tila alkuperäisen merkkijonon alusta

'Testing'.trimStart () //' Testing '
'Testing'.trimStart () //' Testing '
'Testaus' .trimStart () // 'Testaus'
'Testing'.trimStart () //' Testing '

trimEnd ()

Palauta uusi merkkijono, josta on poistettu valkoinen tila alkuperäisen merkkijonon lopusta

'Testing'.trimEnd () //' Testing '
'Testing'.trimEnd () //' Testing '
'Testaus' .trimEnd () // 'Testaus'
'Testaus' .trimEnd () // 'Testaus'

Symbol.prototype.description

Voit nyt hakea symbolin kuvauksen pääsemällä sen kuvausominaisuuteen sen sijaan, että tarvitset toString () -menetelmää:

const testSymbol = Symboli ('Test')
testSymbol.description // 'Test'

JSON-parannukset

Ennen tätä muutosta rivierottimen (\ u2028) ja kappaleerottimen (\ u2029) symbolit eivät olleet sallittuja jonoina, jotka on jäsentynyt JSON: na.

Käyttämällä JSON.parse (), nämä merkit tuottivat SyntaxErrorin, mutta nyt ne jäsentävät oikein, JSON-standardin määrittelemällä tavalla.

Hyvin muotoiltu JSON.stringify ()

Korjaa JSON.stringify () -lähdön, kun se käsittelee korvaavia UTF-8 -koodipisteitä (U + D800 - U + DFFF).

Ennen tätä muutosta JSON.stringify () -soitto palauttaa väärän muotoisen Unicode-merkin ("�").

Nyt korvaavat koodipisteet voidaan turvallisesti esittää merkkijonoina käyttämällä JSON.stringify (): ta ja muuttaa ne takaisin alkuperäiseen esitykseensä käyttämällä JSON.parse (): ta.

Function.prototype.toString ()

Toiminnoissa on aina ollut toString () -niminen menetelmä, joka palauttaa funktiokoodin sisältävän merkkijonon.

ES2019 muutti palautusarvoa välttääksesi kommenttien ja muiden merkkien, kuten välilyönnin, poistamisen, mikä edustaa tarkalleen funktiota sellaisena kuin se määriteltiin.

Jos aiemmin meillä olisi ollut

toiminto / * tämä on palkki * / bar () {}

Käyttäytyminen oli seuraava:

bar.toString () // 'toimintopalkki () {}

nyt uusi käyttäytyminen on:

bar.toString (); // 'toiminto / * tämä on palkki * / bar () {}'

Toivon, että tämä artikkeli auttoi sinua tarttumaan joihinkin uusimpiin JavaScript-lisäyksiin ja uusiin ominaisuuksiin, joita näemme vuonna 2019.

Napsauta tätä saadaksesi tämän viestin PDF / ePub / Mobi-version offline-tilassa lukemista varten

Flavio