Alle Nieuwe ES2019 Tips en Trucs

0
12

De ECMAScript standaard is bijgewerkt toch weer met de toevoeging van nieuwe functies in ES2019. Nu officieel beschikbaar in node, Chrome, Firefox en Safari kunt u ook gebruik maken van Babel om te compileren van deze functies met een andere versie van JavaScript als u behoefte aan ondersteuning van een oudere browser.

Laten we eens kijken naar wat er nieuw is!

– Object.fromEntries

In ES2017, werden we voorgesteld aan het Object.vermeldingen. Dit was een functie die vertaald van een object in de matrix representatie. Iets als dit:

laat de leerlingen = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

– Object.vermeldingen(studenten)
// [
// [ ‘amelia’, 20 ],
// [ ‘beatrice’, 22 ],
// [ ‘cece’, 20 ],
// [ ‘deirdre’, 19 ],
// [ ‘eloise’, 21 ]
// ]

Dit was een prachtige aanvulling, omdat het mogelijk objecten om gebruik te maken van de talrijke ingebouwde functies van het Array prototype. Dingen zoals map, filter, reduceer, enz. Helaas, het vereist een enigszins handmatig proces om dat resultaat weer in een object.

laat de leerlingen = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// convert array in om gebruik te maken van .filter() functie
laat overTwentyOne = Object.vermeldingen(studenten).filter(([naam, leeftijd]) => {
terug leeftijd >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// zet multidimensionale array terug naar een object
laat DrinkingAgeStudents = {}
voor het (laten [naam, leeftijd] van DrinkingAgeStudents) {
DrinkingAgeStudents[name] = leeftijd;
}
// { beatrice: 22, eloise: 21 }

– Object.fromEntries is ontworpen voor het verwijderen van de lus! Het geeft je veel meer beknopt code die nodigt u uit om gebruik te maken van de array prototype van methoden van objecten.

laat de leerlingen = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// convert array in om gebruik te maken van .filter() functie
laat overTwentyOne = Object.vermeldingen(studenten).filter(([naam, leeftijd]) => {
terug leeftijd >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// zet multidimensionale array terug naar een object
laat DrinkingAgeStudents = Object.fromEntries(overTwentyOne);
// { beatrice: 22, eloise: 21 }

Het is belangrijk op te merken dat arrays en objecten zijn verschillende data structuren voor een reden. Er zijn bepaalde gevallen waarin het schakelen tussen de twee zal leiden tot verlies van gegevens. Het onderstaande voorbeeld van array-elementen die worden duplicaat sleutels is één van hen.

laat de leerlingen = [
[ ‘amelia’, 22 ],
[ ‘beatrice’, 22 ],
[ ‘eloise’, 21],
[ ‘beatrice’, 20 ]
]

laat studentObj = Object.fromEntries(studenten);
// { amelia: 22, beatrice: 20, eloise: 21 }
// eerst weggelaten beatrice!

Bij het gebruik van deze functies zorgen er zich bewust van de mogelijke bijwerkingen.

Ondersteuning voor het Object.fromEntries

Chrome
Firefox
Safari
Rand
75 67 12.1 Geen

🔍 Kunnen We uw hulp gebruiken. Heb je toegang tot het testen van deze en andere functies in mobiele browsers? Laat een reactie achter met je resultaten — we ‘ ll check ze uit en neem ze op in het artikel.

Array.prototype.plat

Multi-dimensionale arrays zijn een vrij algemene gegevens structuur om over te komen, vooral bij het ophalen van gegevens. De mogelijkheid om te plat is noodzakelijk. Het was altijd mogelijk, maar niet echt mooi.

We nemen het volgende voorbeeld waar onze kaart laat ons achter met een multi-dimensionale matrix die we willen afvlakken.

laat cursussen = [
{
onderwerp: “math”,
numberOfStudents: 3,
waitlistStudents: 2,
studenten: [‘Janet’, ‘Martha’, ‘Bob’, [‘Phil’, ‘Candace’]]
},
{
onderwerp: “english”,
numberOfStudents: 2,
studenten: [‘Wilson’, ‘Taylor’]
},
{
onderwerp: “de geschiedenis”,
numberOfStudents: 4,
studenten: [‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’]
}
]

laat courseStudents = cursussen.kaart(loop => cursus.studenten)
// [
// [ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
// [ ‘Wilson’, ‘Taylor’ ],
// [ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
// ]

[].concat.van toepassing([], courseStudents) // we vast het doen van iets als dit

In de Matrix.prototype.vlak. Het duurt een optioneel argument van de diepte.

laat courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

laat flattenOneLevel = courseStudents.flat(1)
console.log(flattenOneLevel)
// [
// ‘Janet’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Candace’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
// ‘Jacob’,
// ‘Pieter’,
// ‘Betty’
// ]

laat flattenTwoLevels = courseStudents.flatscreen(2)
console.log(flattenTwoLevels)
// [
// ‘Janet’, ‘Martha’,
// ‘Bob’, ‘Phil’,
// ‘Candace’, ‘Wilson’,
// ‘Taylor’, ‘Edith’,
// ‘Jacob’, ‘Peter’,
// ‘Betty’
// ]

Merk op dat als er geen argument wordt opgegeven, wordt de standaard diepte is één. Dit is ongelooflijk belangrijk omdat in ons voorbeeld zou dat niet volledig plat van de array.

laat courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

laat defaultFlattened = courseStudents.flatscreen()
console.log(defaultFlattened)
// [
// ‘Janet’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Candace’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
// ‘Jacob’,
// ‘Pieter’,
// ‘Betty’
// ]

De motivering voor dit besluit is dat de functie niet gulzig standaard en vereist een uitdrukkelijke instructies om te werken als zodanig. Voor een onbekende diepte, met de bedoeling volledig afvlakking van de array het argument van de Oneindigheid kan worden gebruikt.

laat courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

laat alwaysFlattened = courseStudents.flatscreen(Oneindig)
console.log(alwaysFlattened)
// [
// ‘Janet’, ‘Martha’,
// ‘Bob’, ‘Phil’,
// ‘Candace’, ‘Wilson’,
// ‘Taylor’, ‘Edith’,
// ‘Jacob’, ‘Peter’,
// ‘Betty’
// ]

Zoals altijd, hebzuchtige activiteiten moeten worden gebruikt oordeelkundig en waarschijnlijk niet een goede keuze als u de diepte van de array is echt onbekend.

Ondersteuning voor Array.prototype.plat

Chrome
Firefox
Safari
Rand
75 67 12 Geen
Chrome Voor Android
Firefox Voor Android
iOS Safari
IE Mobile
Samsung Internet
Android Webview
75 67 12.1 Geen Geen 67

Array.prototype.flatMap

Met de toevoeging van een flatscreen kregen we ook de gecombineerde functie van de Matrix.prototype.flatMap. We hebben eigenlijk al een voorbeeld van waar dit nuttig zou zijn boven, maar laten we eens kijken naar een ander.

Wat te denken van een situatie waar we willen voor het invoegen van elementen in een array. Voorafgaand aan de toevoegingen van ES2019, wat zou dat eruit zien?

laat de rangen = [78, 62, 80, 64]

laat het gebogen = cijfers.kaart(rang => [graad, leerjaar + 7])
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]

laat flatMapped = [].concat.van toepassing([], gebogen) // nu plat, kon gebruik maken van platte, maar die nog niet bestond, hetzij
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nu hebben we Array.prototype.vlak kunnen we verbeteren dit voorbeeld iets.

laat de rangen = [78, 62, 80, 64]

laat flatMapped = cijfers.kaart(rang => [graad, leerjaar + 7]).flatscreen()
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Maar toch, dit is een relatief populaire patroon, in het bijzonder in het functioneel programmeren. Dus het is gebouwd in de matrix prototype is groot. Met flatMap we dit kunnen doen:

laat de rangen = [78, 62, 80, 64]

laat flatMapped = cijfers.flatMap(rang => [graad, leerjaar + 7]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nu, vergeet niet dat het standaard argument voor Array.prototype.flat is één. En flatMap is het equivalent van kammen kaart en een flatscreen met geen enkel argument. Dus flatMap alleen plat op één niveau.

laat de rangen = [78, 62, 80, 64]

laat flatMapped = cijfers.flatMap(rang => [rang, [grade + 7]]);
// [
// 78, [ 85 ],
// 62, [ 69 ],
// 80, [ 87 ],
// 64, [ 71 ]
// ]
Ondersteuning voor Array.prototype.flatMap

Chrome
Firefox
Safari
Rand
75 67 12 Geen
Chrome Voor Android
Firefox Voor Android
iOS Safari
IE Mobile
Samsung Internet
Android Webview
75 67 12.1 Geen Geen 67

String.trimStart en String.trimEnd

Een andere mooie toevoeging in ES2019 is een alias maakt een string functie namen meer expliciet. Eerder String.trimRight en String.trimLeft beschikbaar waren.

laat message = “Welkom bij CS 101”
bericht.trimRight()
// ‘Welkom bij CS 101’
bericht.trimLeft()
// ‘Welkom bij CS 101’
bericht.trimRight().trimLeft()
// ‘Welkom bij CS 101’

Dit zijn geweldige functies, maar het was ook nuttig om hen namen die beter aansluit bij hun doel. Het verwijderen van het starten van de ruimte en de einddatum van de ruimte.

laat message = “Welkom bij CS 101”
bericht.trimEnd()
// ‘Welkom bij CS 101’
bericht.trimStart()
// ‘Welkom bij CS 101’
bericht.trimEnd().trimStart()
// ‘Welkom bij CS 101’
Ondersteuning voor String.trimStart en String.trimEnd

Chrome
Firefox
Safari
Rand
75 67 12 Geen

Optioneel vangen bindend

Een andere leuke feature in ES2019 is het maken van een argument in een try-catch-blokken optioneel. Eerder, alle catch-blokken doorgegeven in de uitzondering als een parameter. Dat betekende dat het was er, zelfs wanneer de code in het catch-blok genegeerd.

proberen {
laat ontleed = JSON.parse(obj)
} catch(e) {
// ignore e, of gebruikt
console.log(obj)
}

Dit is niet langer het geval. Als uitzondering wordt niet gebruikt in het catch-blok, dan hoeft niets te worden doorgegeven aan alle.

proberen {
laat ontleed = JSON.parse(obj)
} catch {
console.log(obj)
}

Dit is een geweldige optie als u al weet wat de fout is en op zoek zijn naar wat gegevens geactiveerd.

Ondersteuning voor Optionele Vangen Bindend

Chrome
Firefox
Safari
Rand
75 67 12 Geen

Functie.toString() wijzigingen

ES2019 bracht ook wijzigingen in de wijze van Functie.toString() werkt. Eerder, ontdaan witte ruimte geheel.

function groet() {
const name = ‘CSS-Tricks’
console.log(`hello ${name}`)
}

groet.toString()
//’function groet() {nconst name = ‘CSS Trucs’nconsole.log(`hello ${naam} //`)n}’

Nu het weerspiegelt de ware representatie van de functie in de bron code.

function groet() {
const name = ‘CSS-Tricks’
console.log(`hello ${name}`)
}

groet.toString()
// ‘function groet() {n” +
// ” const name = ‘CSS-Tricks’n” +
// ‘ console.log(`hello ${name}`)n” +
// ‘}’

Dit is meestal een interne verandering, maar ik kan het niet helpen, maar denk dat dit misschien ook te maken met het leven gemakkelijker van een blogger of twee langs de lijn.

Ondersteuning voor de Functie.toString

Chrome
Firefox
Safari
Rand
75 60 12 – Gedeeltelijke 17 – Gedeeltelijke

En daar heb je het! De belangrijkste functie toevoegingen aan ES2019.

Er zijn ook een aantal andere toevoegingen die u wilt verkennen. Deze omvatten:

  • Symbool beschrijving
  • Sorteren stabiliteit
  • ECMAScript als JSON superset
  • JSON.stringify

Gelukkig JavaScript-codering!