Alle Neuen ES2019 Tipps und Tricks

0
12

Die ECMAScript-Standards aktualisiert wurde, noch einmal mit dem Zusatz von neuen Funktionen in ES2019. Jetzt offiziell verfügbar in Knoten, Chrome, Firefox, und Safari können Sie auch verwenden, Babel Zusammenstellung dieser Funktionen auf eine andere version von JavaScript, wenn Sie brauchen, um Unterstützung für ältere browser.

Lassen Sie uns schauen, was es neues gibt!

Objekt.fromEntries

In ES2017, wir wurden eingeführt, um Objekt.Einträge. Dies war eine Funktion, die übersetzt ein Objekt, in dessen array representation. So etwas wie dieses:

lassen Sie Schüler = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

Objekt.Einträge(Schüler, Studenten)
// [
// [ ‘amelia’, 20 ],
// [ ‘beatrice’, 22 ],
// [ ‘cece’, 20 ],
// [ ‘deirdre’, 19 ],
// [ ‘eloise’, 21 ]
// ]

Dies war eine wunderbare Ergänzung, weil es erlaubt, Objekte zu nutzen, die zahlreiche eingebaute Funktionen, die in der Array-Prototyp. Dinge wie map, filter, reduce, etc. Leider ist es erforderlich, einen etwas manueller Prozess zu drehen, das Ergebnis wieder in ein Objekt.

lassen Sie Schüler = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// umwandeln in array, um Sie zu nutzen .filter () – Funktion
lassen Sie overTwentyOne = Objekt.Einträge(Studenten).filter(([name, Alter]) => {
return age >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// turn mehrdimensionales array wieder in ein Objekt
lassen Sie DrinkingAgeStudents = {}
für (lass [name, Alter] von DrinkingAgeStudents) {
DrinkingAgeStudents[name] = Alter;
}
// { beatrice: 22, eloise: 21 }

Objekt.fromEntries ist entworfen, um zu entfernen, dass die Schleife! Es gibt Ihnen sehr viel präziser code, lädt Sie zu machen verwenden von array-Prototypen der Methoden auf Objekte.

lassen Sie Schüler = {
amelia: 20,
beatrice: 22,
cece: 20,
deirdre: 19,
eloise: 21
}

// umwandeln in array, um Sie zu nutzen .filter () – Funktion
lassen Sie overTwentyOne = Objekt.Einträge(Studenten).filter(([name, Alter]) => {
return age >= 21
}) // [ [ ‘beatrice’, 22 ], [ ‘eloise’, 21 ] ]

// turn mehrdimensionales array wieder in ein Objekt
lassen Sie DrinkingAgeStudents = Objekt.fromEntries(overTwentyOne);
// { beatrice: 22, eloise: 21 }

Es ist wichtig zu beachten, dass arrays und Objekten werden verschiedene Datenstrukturen für einen Grund. Es gibt bestimmte Fälle, in denen ein Wechsel zwischen den beiden wird zu Datenverlust führen. Das unten stehende Beispiel der array-Elemente, die doppelte Objekt-Schlüssel ist einer von Ihnen.

lassen Sie die Studenten = [
[ ‘amelia’, 22 ],
[ ‘beatrice’, 22 ],
[ ‘eloise’, 21],
[ ‘beatrice’, 20 ]
]

lassen Sie studentObj = Objekt.fromEntries(Studenten);
// { amelia: 22, beatrice: 20, eloise: 21 }
// zuvor gelöscht beatrice!

Wenn mit diesen Funktionen stellen Sie sicher, bewusst sein, die möglichen Nebenwirkungen.

Unterstützung für Object.fromEntries

Chrome
Firefox
Safari
Edge
75 67 12.1 Keine

🔍 Können wir Ihre Hilfe gebrauchen. Sie haben Zugang zu den Tests diese und andere Funktionen in mobilen Browsern? Hinterlassen Sie einen Kommentar mit Ihren Ergebnissen — wir überprüfen Sie Sie heraus und fügen Sie Sie der Artikel.

Array.der Prototyp.Wohnung

Multi-dimensionale arrays sind eine ziemlich einheitliche Daten-Struktur zu stoßen, vor allem, wenn das abrufen von Daten. Die Fähigkeit zu glätten, ist es notwendig. Es war immer möglich, aber nicht gerade hübsch.

Nehmen wir das folgende Beispiel, wo unsere Karte lässt uns mit einem multi-dimensionalen Arrays, die wir wollen, zu glätten.

lassen Kurse = [
{
Betreff: “Mathe”,
numberOfStudents: 3,
waitlistStudents: 2,
Schüler: [‘Janet’, ‘Martha’, ‘Bob’, [‘Phil’, ‘Candace’]]
},
{
Thema: “Deutsch-Englisch”,
numberOfStudents: 2,
Schüler: [‘Wilson’, ‘Taylor’]
},
{
Thema: “Geschichte”,
numberOfStudents: 4,
Schüler: [‘Edith’, ‘Jakob’, ‘Peter’, ‘Betty’]
}
]

lassen Sie courseStudents = Kurse.Karte(natürlich => natürlich.Studenten)
// [
// [ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
// [ ‘Wilson’, ‘Taylor’ ],
// [ ‘Edith’, ‘Jakob’, ‘Peter’, ‘Betty’ ]
// ]

[].concat.apply([], courseStudents) // wir stecken etwas wie das zu tun

Im Array kommt.der Prototyp.flach. Es sorgt mit einem optionalen argument von Tiefe.

lassen Sie courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jakob’, ‘Peter’, ‘Betty’ ]
]

lassen Sie flattenOneLevel = courseStudents.Wohnung(1)
console.log(flattenOneLevel)
// [
// ‘Janet’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Candace’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
// ‘Jacob’,
// ‘Peter’,
// ‘Betty’
// ]

lassen Sie flattenTwoLevels = courseStudents.Wohnung(2)
console.log(flattenTwoLevels)
// [
// ‘Janet’, ‘Martha’,
// ‘Bob’, ‘Phil’,
// ‘Candace’, ‘Wilson’,
// ‘Taylor’, ‘Edith’,
// ‘Jakob’, ‘Peter’,
// ‘Betty’
// ]

Beachten Sie, dass, wenn kein argument angegeben ist, wird die Standard-Tiefe ist eins. Dies ist unglaublich wichtig, weil in unserem Beispiel würde nicht vollständig glätten das array.

lassen Sie courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jakob’, ‘Peter’, ‘Betty’ ]
]

lassen Sie defaultFlattened = courseStudents.(flach)
console.log(defaultFlattened)
// [
// ‘Janet’,
// ‘Martha’,
// ‘Bob’,
// [ ‘Phil’, ‘Candace’ ],
// ‘Wilson’,
// ‘Taylor’,
// ‘Edith’,
// ‘Jacob’,
// ‘Peter’,
// ‘Betty’
// ]

Die Begründung für diese Entscheidung ist, dass die Funktion standardmäßig nicht gierig und erfordert explizite Anweisungen als solches zu betreiben. Für eine unbekannte Tiefe, mit der Absicht, voll die Abflachung der array das argument der Unendlichkeit verwendet werden kann.

lassen Sie courseStudents = [
[ ‘Janet’, ‘Martha’, ‘Bob’, [ ‘Phil’, ‘Candace’ ] ],
[ ‘Wilson’, ‘Taylor’ ],
[ ‘Edith’, ‘Jakob’, ‘Peter’, ‘Betty’ ]
]

lassen Sie alwaysFlattened = courseStudents.flat(Unendlich)
console.log(alwaysFlattened)
// [
// ‘Janet’, ‘Martha’,
// ‘Bob’, ‘Phil’,
// ‘Candace’, ‘Wilson’,
// ‘Taylor’, ‘Edith’,
// ‘Jakob’, ‘Peter’,
// ‘Betty’
// ]

Wie immer, gierig Operationen verwendet werden sollte vernünftig sein, und sind wahrscheinlich nicht eine gute Wahl, wenn die Tiefe des Arrays ist wirklich unbekannt.

Unterstützung für Arrays.der Prototyp.Wohnung

Chrome
Firefox
Safari
Edge
75 67 12 Keine
Chrome Android
Firefox Android
iOS-Safari
IE Mobile
Samsung Internet
Android Webview
75 67 12.1 Keine Keine 67

Array.der Prototyp.flatMap

Mit dem Zusatz der Wohnung haben wir dann auch noch die kombinierte Funktion von Array.der Prototyp.flatMap. Wir haben tatsächlich schon ein Beispiel gesehen, wo das nützlich ist oben, aber schauen wir uns ein anderes.

Was ist mit einer situation, wo wir wollen, um Elemente in ein array einfügen. Vor dem Zusätze von ES2019, wie würde das Aussehen?

lassen Noten = [78, 62, 80, 64]

lassen gebogene = Noten.Karte(Klasse => [Note, Note + 7])
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]

lassen Sie flatMapped = [].concat.apply([], gebogen) // jetzt abflachen, könnte flach, aber vorhanden sind, nicht, bevor Sie entweder
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nun haben wir die Array.der Prototyp.flach können wir verbessern diesem Beispiel leicht.

lassen Noten = [78, 62, 80, 64]

lassen Sie flatMapped = Noten.Karte(Klasse => [Note, Note + 7]).(flach)
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Aber dennoch ist dies ein relativ beliebtes Muster, vor allem in der funktionalen Programmierung. So dass es, eingebaut in die array-Prototyp ist groß. Mit flatMap wir dies tun können:

lassen Noten = [78, 62, 80, 64]

lassen Sie flatMapped = Noten.flatMap(Grad => [Note, Note + 7]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]

Nun, denken Sie daran, dass die default-argument-Array.der Prototyp.Wohnung ist eine. Und flatMap ist das äquivalent zu kämmen Karte und Wohnung mit kein argument. So flatMap wird nur reduzieren eine Stufe.

lassen Noten = [78, 62, 80, 64]

lassen Sie flatMapped = Noten.flatMap(Grad => [Grad, [Grad + 7]]);
// [
// 78, [ 85 ],
// 62, [ 69 ],
// 80, [ 87 ],
// 64, [ 71 ]
// ]
Unterstützung für Arrays.der Prototyp.flatMap

Chrome
Firefox
Safari
Edge
75 67 12 Keine
Chrome Android
Firefox Android
iOS-Safari
IE Mobile
Samsung Internet
Android Webview
75 67 12.1 Keine Keine 67

String.trimStart und String.trimEnd

Ein weiterer netter Zusatz in ES2019 ist ein alias, das macht einige string-Funktion Namen mehr explizit. Zuvor, Den String.trimRight und String.trimLeft zur Verfügung standen.

let message = “Welcome to CS-101”
Nachricht.trimRight()
/ / “Welcome to CS 101′
Nachricht.trimLeft()
/ / “Welcome to CS 101′
Nachricht.trimRight().trimLeft()
/ / “Welcome to CS 101′

Das sind tolle Funktionen, aber es war auch vorteilhaft, Ihnen Namen geben, die mehr an Ihren Zweck. Entfernen Startfeld ein und endende Leerzeichen.

let message = “Welcome to CS-101”
Nachricht.trimEnd()
/ / “Welcome to CS 101′
Nachricht.trimStart()
/ / “Welcome to CS 101′
Nachricht.trimEnd().trimStart()
/ / “Welcome to CS 101′
Unterstützung für String.trimStart und String.trimEnd

Chrome
Firefox
Safari
Edge
75 67 12 Keine

Optionale catch-Bindung

Ein weiteres nettes feature in ES2019 ist ein argument, das in try-catch-Block optional. Zuvor werden alle catch-Blöcke weitergegeben, die in der Ausnahme als parameter. Das bedeutete, dass es dort war, auch wenn der code im catch-block ignoriert.

try {
lassen Sie analysiert = JSON.parse(obj)
} catch(e) {
// ignorier-e, oder verwenden Sie
console.log(obj)
}

Ist dies nicht mehr der Fall. Wenn die Ausnahme nicht in den catch-block, dann muss nichts übergeben werden, an alle.

try {
lassen Sie analysiert = JSON.parse(obj)
} catch {
console.log(obj)
}

Dies ist eine großartige option, wenn Sie bereits wissen, was der Fehler ist und suchst was für Daten es ausgelöst hat.

Unterstützung für Optionale Catch-Bindung

Chrome
Firefox
Safari
Edge
75 67 12 Keine

Funktion.toString() verpasst

ES2019 brachte auch änderungen an der Weg-Funktion.toString() arbeitet. Vorher ausgezogen weißen Raum ganz.

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

Gruß.toString()
//’function Gruss() {nconst name = ‘CSS-Tricks’nconsole.log(`hello from ${name} //`)n}’

Jetzt spiegelt es die wahre Darstellung der Funktion im source-code.

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

Gruß.toString()
// ‘function Gruss() {n’ +
// ” const name = ‘CSS Tricks’n” +
// ‘ console.log(`hello from ${name}`)n” +
// ‘}’

Dies ist vor allem eine interne Veränderung, aber ich kann mir nicht helfen, aber denke, das könnte auch machen das Leben leichter von einem blogger oder zwei auf der ganzen Linie.

Unterstützung für die Funktion.toString

Chrome
Firefox
Safari
Edge
75 60 12 – Teilweise 17 – Teilweise

Und dort haben Sie es! Das Hauptmerkmal Ergänzungen ES2019.

Es gibt auch eine Handvoll von anderen Ergänzungen, die Sie kennen sollten. Diese beinhalten:

  • Symbol Beschreibung
  • Sortieren Stabilität
  • ECMAScript als Obermenge von JSON
  • JSON.stringify

Glücklich JavaScript-coding!