Alle de Nye ES2019 Tips og Triks

0
28

ECMAScript standard, har blitt oppdatert igjen med tillegg av nye funksjoner i ES2019. Nå offisielt tilgjengelig i node, Chrome, Firefox og Safari du kan også bruke Babel å samle disse funksjonene til en annen versjon av JavaScript-hvis du trenger til å støtte en eldre nettleser.

La oss se på hva som er nytt!

Objektet.fromEntries

I ES2017, ble vi introdusert til Objektet.oppføringer. Dette var en funksjon som oversatt et objekt inn i sitt utvalg representasjon. Noe sånt som dette:

la elevene = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

Objektet.oppføringer(studenter)
// [
// [ ‘amelia’, 20 ],
// [ ‘beatrice’, 22 ],
// [ ‘omega’, 20 ],
// [ ‘deirdre’, 19 ],
// [ ‘eloise’, 21 ]
// ]

Dette var et flott tillegg, fordi det er tillatt objekter for å gjøre bruk av den tallrike funksjoner bygget inn i Matrisen prototype. Ting som map, filter, redusere, etc. Dessverre, det kreves en noe manuell prosess for å slå at resultatet tilbake til et objekt.

la elevene = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// konvertere til array for å gjøre bruk av .filter-funksjonen()
la overTwentyOne = Objekt.oppføringer(studenter).filteret(([navn, alder]) => {
tilbake alder >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// slår flerdimensjonal array tilbake til et objekt
la DrinkingAgeStudents = {}
for (la [navn, alder] av DrinkingAgeStudents) {
DrinkingAgeStudents[name] = alder;
}
// { beatrice: 22, eloise: 21 }

Objektet.fromEntries er utviklet for å fjerne det sløyfe! Det gir deg mye mer konsis kode som inviterer deg til å gjøre bruk av array prototype metoder på objekter.

la elevene = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// konvertere til array for å gjøre bruk av .filter-funksjonen()
la overTwentyOne = Objekt.oppføringer(studenter).filteret(([navn, alder]) => {
tilbake alder >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// slår flerdimensjonal array tilbake til et objekt
la DrinkingAgeStudents = Objekt.fromEntries(overTwentyOne);
// { beatrice: 22, eloise: 21 }

Det er viktig å merke seg at systemene og gjenstandene er forskjellige datastrukturer for en grunn. Det er visse tilfeller der veksling mellom de to vil føre til tap av data. Eksemplet nedenfor utvalg av elementer som blir dupliserte objekt tastene er en av dem.

la elevene = [
[ ‘amelia’, 22 ],
[ ‘beatrice’, 22 ],
[ ‘eloise’, 21],
[ ‘beatrice’, 20 ]
]

la studentObj = Objekt.fromEntries(studenter);
// { amelia: 22, beatrice: 20, eloise: 21 }
// droppet første beatrice!

Når du bruker disse funksjonene, må du sørge for å være klar over den potensielle bivirkninger.

Støtte for Objekt.fromEntries

Chrome
Firefox
Safari
Kant
75 67 12.1 Ingen

🔍 Vi kan bruke din hjelp. Har du tilgang til å teste disse og andre funksjoner i mobile nettlesere? Legg igjen en kommentar med dine resultater — vi skal sjekke dem ut og ta dem med i artikkelen.

Tabellen.prototypen.flatskjerm

Multi-dimensjonale matriser er en ganske vanlig datastruktur å komme over, spesielt når du skal hente data. Evnen til å flate det er nødvendig. Det var alltid mulig, men ikke akkurat pen.

La oss ta følgende eksempel der vårt kart etterlater oss med en multi-dimensjonal array som vi ønsker å slå sammen.

la kurs = [
{
emne: “matematikk”,
numberOfStudents: 3,
waitlistStudents: 2,
studenter: [‘Uberørt’, ‘Martha’, ‘Bob’, [‘Phil’, ‘Candace’]]
},
{
emne: “engelsk”,
numberOfStudents: 2,
studenter: [‘Wilson’, ‘Taylor’]
},
{
emne: “historie”,
numberOfStudents: 4,
studenter: [‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’]
}
]

la courseStudents = kurs.kart(kurs => faget.- studenter)
// [
// [ ‘Uberørt’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
// [ ‘Wilson’, ‘Taylor’ ],
// [ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
// ]

[].concat.gjelder([], courseStudents) // vi sitter fast å gjøre noe sånt som dette

I kommer Utvalg.prototypen.flatskjerm. Det tar et valgfritt argument av dybde.

la courseStudents = [
[ ‘Uberørt’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

la flattenOneLevel = courseStudents.flatskjerm(1)
– konsollen.logg(flattenOneLevel)
// [
// ‘Uberørt’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Candace’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
// ‘Jacob’,
// ‘Peter’,
// ‘Betty”
// ]

la flattenTwoLevels = courseStudents.flatskjerm(2)
– konsollen.logg(flattenTwoLevels)
// [
// ‘Uberørt’, ‘Martha’,
// ‘Terje’, ‘Phil’,
// ‘Candace’, ‘Wilson’,
// ‘Taylor’, ‘Edith’,
// ‘Jacob’, ‘Peter’,
// ‘Betty”
// ]

Vær oppmerksom på at hvis ingen argumenter er gitt, standard dybde er ett. Dette er utrolig viktig fordi i vårt eksempel ville det ikke fullt flate tabellen.

la courseStudents = [
[ ‘Uberørt’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

la defaultFlattened = courseStudents.flatskjerm()
– konsollen.logg(defaultFlattened)
// [
// ‘Uberørt’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Candace’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
// ‘Jacob’,
// ‘Peter’,
// ‘Betty”
// ]

Begrunnelsen for denne beslutningen er at funksjonen er ikke grådig som standard og krever eksplisitte instruksjoner for å fungere som sådan. For en ukjent dybde med den hensikt fullt utflating av tabellen argument av Infinity kan brukes.

la courseStudents = [
[ ‘Uberørt’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

la alwaysFlattened = courseStudents.flatskjerm(Uendelig)
– konsollen.logg(alwaysFlattened)
// [
// ‘Uberørt’, ‘Martha’,
// ‘Terje’, ‘Phil’,
// ‘Candace’, ‘Wilson’,
// ‘Taylor’, ‘Edith’,
// ‘Jacob’, ‘Peter’,
// ‘Betty”
// ]

Som alltid, grådige operasjoner bør brukes judiciously og er sannsynligvis ikke et godt valg dersom dybden av tabellen er virkelig ukjent.

Støtte for Tabellen.prototypen.flatskjerm

Chrome
Firefox
Safari
Kant
75 67 12 Ingen
Chrome For Android
Firefox For Android
Safari
IE Mobile
Samsung Internett
Android Webview
75 67 12.1 Ingen Ingen 67

Tabellen.prototypen.flatMap

Med tillegg av flatskjerm vi fikk også kombinert funksjon av Tabellen.prototypen.flatMap. Vi har faktisk allerede sett et eksempel på hvor dette vil være nyttig ovenfor, men la oss se på en annen.

Hva om en situasjon hvor vi ønsker å sette inn elementer i en matrise. Før tillegg av ES2019, hva ville det se ut?

la karakterer = [78, 62, 80, 64]

la buet = karakterer.kart(klasse => [grade grade + 7])
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]

la flatMapped = [].concat.gjelder([], buet) // nå er flat, kunne bruke flatskjerm men som ikke eksisterte før du enten
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nå som vi har Array.prototypen.flatskjerm vi kan forbedre dette eksempelet litt.

la karakterer = [78, 62, 80, 64]

la flatMapped = karakterer.kart(klasse => [grade grade + 7]).flatskjerm()
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Men likevel, dette er et relativt populært mønster, spesielt i funksjonell programmering. Så har det bygget inn matrisen prototype er stor. Med flatMap vi kan gjøre dette:

la karakterer = [78, 62, 80, 64]

la flatMapped = karakterer.flatMap(klasse => [grade grade + 7]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nå, husk at standard argument for Tabellen.prototypen.flat er ett. Og flatMap er tilsvarende grer kart og flatskjerm med ingen argument. Så flatMap vil bare flate ut ett nivå.

la karakterer = [78, 62, 80, 64]

la flatMapped = karakterer.flatMap(klasse => [stadium, [grade + 7]]);
// [
// 78, [ 85 ],
// 62, [ 69 ],
// 80, [ 87 ],
// 64, [ 71 ]
// ]
Støtte for Tabellen.prototypen.flatMap

Chrome
Firefox
Safari
Kant
75 67 12 Ingen
Chrome For Android
Firefox For Android
Safari
IE Mobile
Samsung Internett
Android Webview
75 67 12.1 Ingen Ingen 67

Strengen.trimStart og Streng.trimEnd

En annen flott tillegg i ES2019 er et alias som gjør noen streng funksjon navn mer eksplisitt. Tidligere, String.trimRight og Streng.trimLeft var tilgjengelig.

la melding = “Velkommen til CS 101”
melding.trimRight()
/ / Velkommen til CS 101′
melding.trimLeft()
/ / Velkommen til CS 101′
melding.trimRight().trimLeft()
/ / Velkommen til CS 101′

Disse er flotte funksjoner, men det var også gunstig å gi dem navn som mer på linje med deres formål. Ta starter plass og slutter plass.

la melding = “Velkommen til CS 101”
melding.trimEnd()
/ / Velkommen til CS 101′
melding.trimStart()
/ / Velkommen til CS 101′
melding.trimEnd().trimStart()
/ / Velkommen til CS 101′
Støtte for Streng.trimStart og Streng.trimEnd

Chrome
Firefox
Safari
Kant
75 67 12 Ingen

Valgfritt fange bindende

En annen fin funksjon i ES2019 er å lage et argument i try-catch-blokker valgfritt. Tidligere, all fangst blokker gått i de unntak som en parameter. Det betydde at det var der, selv når koden inne i catch-blokk ignorert det.

try {
la analyseres = JSON.parse(obj)
} catch(e) {
// ignorere e, eller bruk
– konsollen.logg(obj)
}

Dette er ikke lenger tilfelle. Dersom unntak ikke blir brukt i catch-blokk, så ikke noe behov for å bli vedtatt i det hele tatt.

try {
la analyseres = JSON.parse(obj)
} catch {
– konsollen.logg(obj)
}

Dette er et flott alternativ hvis du allerede vet hva feilen er, og er på jakt etter hvilke data som utløste det.

Støtte for Ekstra Fange Bindende

Chrome
Firefox
Safari
Kant
75 67 12 Ingen

Funksjon.toString() endringer

ES2019 også ført til endringer i måten Funksjon.toString() fungerer. Tidligere, er det strippet mellomrom helt.

funksjonen hilsen() {
const name = “CSS Triks’
– konsollen.logg(`hei fra ${name}”)
}

hilsen.toString()
//’- funksjonen hilsen() {nconst name = ” CSS Triks’nconsole.logg(`hei fra ${name} //`)n}’

Nå er det reflekterer sann representasjon av funksjonen i kildekoden.

funksjonen hilsen() {
const name = “CSS Triks’
– konsollen.logg(`hei fra ${name}”)
}

hilsen.toString()
/ / ‘- funksjonen hilsen() {n’ +
// “const name = “CSS Triks’n” +
/ / ‘- konsollen.logg(`hei fra ${name}`)n” +
// ‘}’

Dette er for det meste en intern endring, men jeg kan ikke hjelpe, men tror dette kan også gjøre livet lettere for en blogger eller to ned linjen.

Støtte for Funksjonen.toString

Chrome
Firefox
Safari
Kant
75 60 12 – Delvis 17 – Delvis

Og der har du det! Den viktigste funksjonen i tillegg til ES2019.

Det er også en håndfull andre tillegg som du kanskje ønsker å utforske. Disse inkluderer:

  • Symbol beskrivelse
  • Sorter stabilitet
  • ECMAScript som JSON supersett
  • JSON.stringify

Glad JavaScript koding!