Alle neuen ES2019 Tipps und Tricks

Der ECMAScript-Standard wurde erneut aktualisiert, mit neuen Features in ES2019. Jetzt offiziell verfügbar in Node, Chrome, Firefox und Safari können Sie auch Babel verwenden, um diese Features in eine andere JavaScript-Version zu kompilieren, wenn Sie ältere Browser unterstützen müssen.

Schauen wir uns an, was neu ist!

Object.fromEntries

In ES2017 wurde uns Object.entries vorgestellt. Dies war eine Funktion, die ein Objekt in seine Array-Darstellung übersetzte. So etwas wie dies

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

Object.entries(students) 
// [
//  [ 'amelia', 20 ],
//  [ 'beatrice', 22 ],
//  [ 'cece', 20 ],
//  [ 'deirdre', 19 ],
//  [ 'eloise', 21 ]
// ]

Dies war eine wunderbare Ergänzung, da sie es Objekten ermöglichte, die zahlreichen Funktionen des Array-Prototyps zu nutzen. Dinge wie map, filter, reduce usw. Leider war es ein etwas manueller Prozess, dieses Ergebnis wieder in ein Objekt zurückzuverwandeln.

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

// convert to array in order to make use of .filter() function
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// turn multidimensional array back into an object
let DrinkingAgeStudents = {}
for (let [name, age] of overTwentyOne) {
    DrinkingAgeStudents[name] = age;
}
// { beatrice: 22, eloise: 21 }

Object.fromEntries wurde entwickelt, um diese Schleife zu eliminieren! Sie liefert Ihnen viel prägnanteren Code, der Sie dazu einlädt, Array-Prototyp-Methoden auf Objekten zu nutzen.

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

// convert to array in order to make use of .filter() function
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// turn multidimensional array back into an object
let DrinkingAgeStudents = Object.fromEntries(overTwentyOne); 
// { beatrice: 22, eloise: 21 }

Es ist wichtig zu beachten, dass Arrays und Objekte aus gutem Grund unterschiedliche Datenstrukturen sind. Es gibt bestimmte Fälle, in denen der Wechsel zwischen den beiden zu Datenverlust führt. Das folgende Beispiel von Array-Elementen, die zu doppelten Objektschlüsseln werden, ist eines davon.

let students = [
  [ 'amelia', 22 ], 
  [ 'beatrice', 22 ], 
  [ 'eloise', 21], 
  [ 'beatrice', 20 ]
]

let studentObj = Object.fromEntries(students); 
// { amelia: 22, beatrice: 20, eloise: 21 }
// dropped first beatrice!

Achten Sie bei der Verwendung dieser Funktionen auf mögliche Nebenwirkungen.

Unterstützung für Object.fromEntries

Chrome	Firefox	Safari	Edge
75	67	12.1	Nein

🔍 Wir können Ihre Hilfe gebrauchen. Haben Sie Zugang zum Testen dieser und anderer Features in mobilen Browsern? Hinterlassen Sie einen Kommentar mit Ihren Ergebnissen – wir werden sie uns ansehen und in den Artikel aufnehmen.

Array.prototype.flat

Mehrdimensionale Arrays sind eine ziemlich häufige Datenstruktur, auf die man stößt, insbesondere bei der Datenabfrage. Die Möglichkeit, sie abzuflachen, ist notwendig. Es war immer möglich, aber nicht gerade schön.

Nehmen wir das folgende Beispiel, bei dem unsere Map uns mit einem mehrdimensionalen Array zurücklässt, das wir abflachen möchten.

let courses = [
  {
    subject: "math",
    numberOfStudents: 3,
    waitlistStudents: 2,
    students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]
  },
  {
    subject: "english",
    numberOfStudents: 2,
    students: ['Wilson', 'Taylor']
  },
  {
    subject: "history",
    numberOfStudents: 4,
    students: ['Edith', 'Jacob', 'Peter', 'Betty']
  }
]

let courseStudents = courses.map(course => course.students)
// [
//   [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
//   [ 'Wilson', 'Taylor' ],
//   [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
// ]

[].concat.apply([], courseStudents) // we're stuck doing something like this

Hier kommt Array.prototype.flat ins Spiel. Es nimmt ein optionales Argument für die Tiefe entgegen.

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let flattenOneLevel = courseStudents.flat(1)
console.log(flattenOneLevel)
// [
//   'Janet',
//   'Martha',
//   'Bob',
//   [ 'Phil', 'Candace' ],
//   'Wilson',
//   'Taylor',
//   'Edith',
//   'Jacob',
//   'Peter',
//   'Betty'
// ]

let flattenTwoLevels = courseStudents.flat(2)
console.log(flattenTwoLevels)
// [
//   'Janet',   'Martha',
//   'Bob',     'Phil',
//   'Candace', 'Wilson',
//   'Taylor',  'Edith',
//   'Jacob',   'Peter',
//   'Betty'
// ]

Beachten Sie, dass bei Angabe von keinem Argument die Standardtiefe eins ist. Dies ist äußerst wichtig, da dies in unserem Beispiel das Array nicht vollständig abflachen würde.

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let defaultFlattened = courseStudents.flat()
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 ist und explizite Anweisungen benötigt, um so zu arbeiten. Für eine unbekannte Tiefe mit der Absicht, das Array vollständig abzuflachen, kann das Argument Infinity verwendet werden.

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let alwaysFlattened = courseStudents.flat(Infinity)
console.log(alwaysFlattened)
// [
//   'Janet',   'Martha',
//   'Bob',     'Phil',
//   'Candace', 'Wilson',
//   'Taylor',  'Edith',
//   'Jacob',   'Peter',
//   'Betty'
// ]

Wie immer sollten gierige Operationen mit Bedacht eingesetzt werden und sind wahrscheinlich keine gute Wahl, wenn die Tiefe des Arrays wirklich unbekannt ist.

Unterstützung für Array.prototype.flat

Chrome	Firefox	Safari	Edge
75	67	12	Nein

Chrome Android	Firefox Android	iOS Safari	IE Mobile	Samsung Internet	Android Webview
75	67	12.1	Nein	Nein	67

Array.prototype.flatMap

Mit der Einführung von flat erhielten wir auch die kombinierte Funktion Array.prototype.flatMap. Wir haben bereits ein Beispiel gesehen, wo dies nützlich wäre, aber schauen wir uns ein weiteres an.

Wie sieht es mit einer Situation aus, in der wir Elemente in ein Array einfügen wollen? Was würde das vor der Einführung von ES2019 aussehen?

let grades = [78, 62, 80, 64]

let curved = grades.map(grade => [grade, grade + 7])
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]

let flatMapped = [].concat.apply([], curved) // now flatten, could use flat but that didn't exist before either
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

Jetzt, da wir Array.prototype.flat haben, können wir dieses Beispiel leicht verbessern.

let grades = [78, 62, 80, 64]

let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

Aber dennoch ist dies ein relativ beliebtes Muster, insbesondere in der funktionalen Programmierung. Daher ist es großartig, dass es in den Array-Prototyp integriert ist. Mit flatMap können wir dies tun:

let grades = [78, 62, 80, 64]

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

Denken Sie daran, dass das Standardargument für Array.prototype.flat eins ist. Und flatMap ist das Äquivalent der Kombination von map und flat ohne Argument. Daher wird flatMap nur eine Ebene abflachen.

let grades = [78, 62, 80, 64]

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

Unterstützung für Array.prototype.flatMap

Chrome	Firefox	Safari	Edge
75	67	12	Nein

Chrome Android	Firefox Android	iOS Safari	IE Mobile	Samsung Internet	Android Webview
75	67	12.1	Nein	Nein	67

String.trimStart und String.trimEnd

Eine weitere schöne Ergänzung in ES2019 ist ein Alias, der einige String-Funktionsnamen aussagekräftiger macht. Zuvor waren String.trimRight und String.trimLeft verfügbar.

let message = "   Welcome to CS 101    "
message.trimRight()
// '   Welcome to CS 101'
message.trimLeft()
// 'Welcome to CS 101   '
message.trimRight().trimLeft()
// 'Welcome to CS 101'

Dies sind großartige Funktionen, aber es war auch vorteilhaft, ihnen Namen zu geben, die besser zu ihrem Zweck passen. Entfernen von Leerzeichen am Anfang und am Ende.

let message = "   Welcome to CS 101    "
message.trimEnd()
// '   Welcome to CS 101'
message.trimStart()
// 'Welcome to CS 101   '
message.trimEnd().trimStart()
// 'Welcome to CS 101'

Unterstützung für String.trimStart und String.trimEnd

Chrome	Firefox	Safari	Edge
75	67	12	Nein

Optionaler Catch-Binding

Eine weitere nützliche Funktion in ES2019 ist die Option, ein Argument in try-catch-Blöcken optional zu machen. Zuvor übergaben alle catch-Blöcke die Ausnahme als Parameter. Das bedeutete, dass sie auch dann vorhanden war, wenn der Code im catch-Block sie ignorierte.

try {
  let parsed = JSON.parse(obj)
} catch(e) {
  // ignore e, or use
  console.log(obj)
}

Das ist nicht mehr der Fall. Wenn die Ausnahme im catch-Block nicht verwendet wird, muss nichts übergeben werden.

try {
  let parsed = JSON.parse(obj)
} catch {
  console.log(obj)
}

Dies ist eine großartige Option, wenn Sie den Fehler bereits kennen und nach den Daten suchen, die ihn ausgelöst haben.

Unterstützung für optionalen Catch-Binding

Chrome	Firefox	Safari	Edge
75	67	12	Nein

Änderungen an Function.toString()

ES2019 brachte auch Änderungen in der Funktionsweise von Function.toString() mit sich. Zuvor wurden Leerzeichen vollständig entfernt.

function greeting() {
  const name = 'CSS Tricks'
  console.log(`hello from ${name}`)
}

greeting.toString()
//'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n}'

Jetzt spiegelt es die tatsächliche Darstellung der Funktion im Quellcode wider.

function greeting() {
  const name = 'CSS Tricks'
  console.log(`hello from ${name}`)
}

greeting.toString()
// 'function greeting() {\n' +
//  "  const name = 'CSS Tricks'\n" +
//  '  console.log(`hello from ${name}`)\n' +
//  '}'

Dies ist hauptsächlich eine interne Änderung, aber ich kann nicht anders, als zu denken, dass dies auch das Leben eines oder zweier Blogger im weiteren Verlauf erleichtern könnte.

Unterstützung für Function.toString

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

---

Und da haben Sie es! Die wichtigsten Features von ES2019.

Es gibt auch eine Reihe anderer Ergänzungen, die Sie vielleicht erkunden möchten. Dazu gehören

• Symbolbeschreibung
• Sortierstabilität
• ECMAScript als JSON-Superset
• JSON.stringify

Viel Spaß beim JavaScript-Codieren!