Alla Nya ES2019 Tips och Tricks

0
11

ECMAScript standarden har uppdaterats ännu en gång med tillägg av nya funktioner i ES2019. Nu officiellt tillgänglig i nod, Chrome, Firefox och Safari du kan också använda Babel för att sammanställa dessa funktioner till en annan version av JavaScript om du behöver för att stödja äldre webbläsare.

Låt oss titta på vad som är nytt!

Objektet.fromEntries

I ES2017 blev vi introducerade till Objekt.poster. Detta var en funktion som översatt ett objekt i sitt utbud representation. Något liknande detta:

låt eleverna = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

Objektet.poster(studenter)
// [
// [ ‘amelia’, 20 ],
// [ ‘beatrice’, 22 ],
// [ ‘cece’, 20 ],
// [ ‘deirdre”, den 19 ],
// [ ‘eloise’, 21 ]
// ]

Detta var ett underbart komplement, eftersom det tillåtet objekt att använda sig av de många inbyggda funktioner i Rad prototyp. Saker som map, filter, minska, etc. Tyvärr, det krävs en något manuell process för att sin tur att leda tillbaka till ett objekt.

låt eleverna = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// konvertera till matrisen för att använda sig av .filter() funktion
låt overTwentyOne = Objekt.poster(studenter).filter(([namn, ålder]) => {
tillbaka ålder >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// sätt flerdimensionell array tillbaka till ett objekt
låt DrinkingAgeStudents = {}
för (låt [namn, ålder] av DrinkingAgeStudents) {
DrinkingAgeStudents[name] = ålder.
}
// { beatrice: 22, eloise: 21 }

Objektet.fromEntries är utformad för att ta bort en slinga! Det ger dig mycket mer koncis kod som uppmanar dig att använda array prototyp metoder på objekt.

låt eleverna = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// konvertera till matrisen för att använda sig av .filter() funktion
låt overTwentyOne = Objekt.poster(studenter).filter(([namn, ålder]) => {
tillbaka ålder >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// sätt flerdimensionell array tillbaka till ett objekt
låt DrinkingAgeStudents = Objekt.fromEntries(overTwentyOne);
// { beatrice: 22, eloise: 21 }

Det är viktigt att notera att fält och objekt är olika datastrukturer för en anledning. Det finns dock vissa fall där du växlar mellan de två kommer att orsaka förlust av data. Exemplet nedan är en samling element som blir dubbletter av objekt som nycklar är en av dem.

låt eleverna = [
[ ‘amelia’, 22 ],
[ ‘beatrice’, 22 ],
[ ‘eloise’, 21],
[ ‘beatrice’, 20 ]
]

låt studentObj = Objekt.fromEntries(studerar).
// { amelia: 22, beatrice: 20, eloise: 21 }
// droppade ner först beatrice!

När du använder dessa funktioner se till att vara medveten om potentiella biverkningar.

Stöd för Objekt.fromEntries

Chrome
Firefox
Safari
Kant
75 67 12.1 Inga

🔍 Vi kan använda för din hjälp. Har du tillgång till att testa dessa och andra funktioner i mobila webbläsare? Lämna en kommentar med dina resultat — ska vi checka ut dem och ta med dem i artikeln.

Array.prototyp.platt

Flerdimensionella arrayer är en ganska gemensam datastruktur för att komma över, särskilt när data hämtas. Förmågan att platta till det som är nödvändigt. Det var alltid möjligt, men inte exakt var ganska.

Låt oss ta följande exempel där vår karta lämnar oss med en multi-dimensionell array som vi vill platta till.

låt kurser = [
{
ämne: “matte”,
numberOfStudents: 3,
waitlistStudents: 2,
studenter: [‘Janet’, ‘Martha’, ‘Bob’, [‘Phil’, ‘Skapa’]]
},
{
ämne: “engelska”,
numberOfStudents: 2,
studenter: [‘Wilson’, ‘Taylor’]
},
{
ämne: “historik”,
numberOfStudents: 4,
studenter: [‘Edit’, ‘Jacob’, ‘Peter’, ‘Betty’]
}
]

låt courseStudents = kurser.karta(kurs => kurs.studenter)
// [
// [ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Skapa’ ] ],
/ / [Wilson”, ‘Taylor’ ],
// [ ‘Edit’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
// ]

[].concat.gäller([], courseStudents) // vi fastnar göra något sånt här

Det gäller Utbud.prototyp.platt. Det tar ett valfritt argument för djup.

låt courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Skapa’ ] ],
[Wilson”, ‘Taylor’ ],
[ ‘Edit’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

låt flattenOneLevel = courseStudents.platt(1)
konsolen.log(flattenOneLevel)
// [
// ‘Janet’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Skapa’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
/ / Jacob’,
// ‘Peter’,
// ‘Betty’
// ]

låt flattenTwoLevels = courseStudents.platt(2)
konsolen.log(flattenTwoLevels)
// [
// ‘Janet’, ‘Martha’,
// ‘Bob’, ‘Phil’,
// ‘Skapa’, ‘Wilson’,
// ‘Taylor’, ‘Edit’,
/ / Jacob’, ‘Peter’,
// ‘Betty’
// ]

Observera att om inga argument anges, standardvärdet djup är en. Detta är otroligt viktigt eftersom det i vårt exempel skulle det inte helt platta array.

låt courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Skapa’ ] ],
[Wilson”, ‘Taylor’ ],
[ ‘Edit’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

låt defaultFlattened = courseStudents.platt()
konsolen.log(defaultFlattened)
// [
// ‘Janet’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Skapa’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
/ / Jacob’,
// ‘Peter’,
// ‘Betty’
// ]

Motiveringen för detta beslut är att funktionen är inte girig som standard och kräver tydliga instruktioner för att fungera som sådan. För ett okänt djup med avsikt att helt tillplattade array som argument Infinity kan användas.

låt courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Skapa’ ] ],
[Wilson”, ‘Taylor’ ],
[ ‘Edit’, ‘Jacob’, ‘Peter’, ‘Betty’ ]
]

låt alwaysFlattened = courseStudents.platt(Infinity)
konsolen.log(alwaysFlattened)
// [
// ‘Janet’, ‘Martha’,
// ‘Bob’, ‘Phil’,
// ‘Skapa’, ‘Wilson’,
// ‘Taylor’, ‘Edit’,
/ / Jacob’, ‘Peter’,
// ‘Betty’
// ]

Som alltid, giriga verksamhet bör användas klokt och är sannolikt inte ett bra val om djupet av matrisen är verkligen okänd.

Stöd för Matrisen.prototyp.platt

Chrome
Firefox
Safari
Kant
75 67 12 Inga
Chrome För Android
Firefox För Android
iOS Safari
IE Mobile
Samsung Internet
Android Webview
75 67 12.1 Inga Inga 67

Array.prototyp.flatMap

Med tillägg av lägenheten vi fick också den kombinerade funktionen av en Array.prototyp.flatMap. Vi har faktiskt redan sett ett exempel där detta skulle vara användbart ovan, men låt oss titta på en annan.

Vad sägs om en situation där vi vill sätta in element i en array. Före tillägg av ES2019, hur skulle det se ut?

låt grader = [78, 62, 80, 64]

låt böjda = kvaliteter.karta(kvalitet => [klass, grad + 7])
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]

låt flatMapped = [].concat.gäller([], böjd) // nu är platta, kan använda hemma men som inte funnits tidigare heller
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nu har vi Array.prototyp.hemma kan vi förbättra detta exempel något.

låt grader = [78, 62, 80, 64]

låt flatMapped = kvaliteter.karta(kvalitet => [klass, grad + 7]).platt()
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Men detta är fortfarande en relativt populära mönster, särskilt i funktionell programmering. Så har det byggt i array-prototypen är bra. Med flatMap vi kan göra detta:

låt grader = [78, 62, 80, 64]

låt flatMapped = kvaliteter.flatMap(kvalitet => [klass, grad + 7]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nu, kom ihåg att standard argument för Matrisen.prototyp.platt är en. Och flatMap är motsvarande karta för att kamma och platt utan argument. Så flatMap kommer bara att platta till en nivå.

låt grader = [78, 62, 80, 64]

låt flatMapped = kvaliteter.flatMap(kvalitet => [betyg, [klass + 7]]);
// [
// 78, [ 85 ],
// 62, [ 69 ],
// 80, [ 87 ],
// 64, [ 71 ]
// ]
Stöd för Matrisen.prototyp.flatMap

Chrome
Firefox
Safari
Kant
75 67 12 Inga
Chrome För Android
Firefox För Android
iOS Safari
IE Mobile
Samsung Internet
Android Webview
75 67 12.1 Inga Inga 67

Strängen.trimStart och String.trimEnd

En annan trevlig tillägg i ES2019 är ett alias som gör att vissa string funktionsnamn mer explicit. Tidigare Strängen.trimRight och String.trimLeft fanns att tillgå.

låt budskapet = “Välkommen till BS 101”
meddelandet.trimRight()
// ‘Välkommen till CS 101’
meddelandet.trimLeft()
// ‘Välkommen till CS 101’
meddelandet.trimRight().trimLeft()
// ‘Välkommen till CS 101’

Dessa är bra funktioner, men det var också fördelaktigt att ge dem namn som mer i linje med deras syfte. Ta bort startrutan och slutar utrymme.

låt budskapet = “Välkommen till BS 101”
meddelandet.trimEnd()
// ‘Välkommen till CS 101’
meddelandet.trimStart()
// ‘Välkommen till CS 101’
meddelandet.trimEnd().trimStart()
// ‘Välkommen till CS 101’
Stöd för Sträng.trimStart och String.trimEnd

Chrome
Firefox
Safari
Kant
75 67 12 Inga

Tillval fånga bindande

En annan trevlig funktion i ES2019 är att göra ett argument i en try-catch-block som tillval. Tidigare har alla catch-block som skickas i undantag som en parameter. Det innebar att det var det även när koden inne i catch-block ignorerade det.

try {
låt tolkas = JSON.parse(pr)
} catch(e) {
// ignorera e, eller använda
konsolen.log(pr)
}

Detta är inte längre fallet. Om undantag inte används i catch-block, då ingenting behöver skickas in på alla.

try {
låt tolkas = JSON.parse(pr)
} catch {
konsolen.log(pr)
}

Detta är ett bra alternativ om du redan vet vad felet är och letar efter vilka data som utlöste den.

Stöd för Valfria Fånga Bindande

Chrome
Firefox
Safari
Kant
75 67 12 Inga

Funktionen.toString() förändringar

ES2019 också medfört förändringar i sättet att Fungera.toString() fungerar. Tidigare, det avskalade vita utrymmet helt och hållet.

funktion hälsning() {
const namn = ‘CSS-Tricks”
konsolen.logga in (“hej från ${name}`)
}

hälsning.toString()
//”- funktion hälsning() {nconst name = ‘CSS-Tricks’nconsole.logga in (“hej från ${name} //`)n}’

Nu är det återspeglar verklig representation av funktionen i källkoden.

funktion hälsning() {
const namn = ‘CSS-Tricks”
konsolen.logga in (“hej från ${name}`)
}

hälsning.toString()
/ / “- funktion hälsning() {n” +
// ” const namn = ‘CSS-Tricks “n” +
// ‘ konsolen.logga in (“hej från ${name}`)n” +
// ‘}’

Detta är mestadels ett inre förändring, men jag kan inte hjälpa men tror att det också kan göra livet lättare för en bloggare eller två ner linjen.

Stöd för Funktionen.toString

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

Och där har du det! Den viktigaste funktionen tillägg till ES2019.

Det finns även en handfull andra tillägg som du vill utforska. Dessa inkluderar:

  • Symbol beskrivning
  • Sortera stabilitet
  • ECMAScript som JSON-superset
  • JSON.stringify

Glad JavaScript kod!