Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass die neuen JavaScript-Funktionen, die in den ES2019-Standard fallen, bereits
offiziell in Chrome-, Firefox- und Safari-Browsern sowie auf der Node.js-Plattform verfügbar sind. Wenn Sie veraltete Browser unterstützen müssen, können Sie die Innovationen nutzen, indem Sie JS-Code mit
Babel transpilieren. Hier sehen wir uns Beispiele einiger neuer JS-Funktionen an.
Object.fromEntries-Methode
In ES2017 wurde die
Object.entries Methode
Object.entries . Es konvertiert das Objekt in ein Array. Zum Beispiel könnte es so aussehen:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } Object.entries(students)
Diese Methode ist eine wunderbare Ergänzung zu den Fähigkeiten der Sprache geworden. Tatsache ist, dass es möglich war, Objektdaten mit den zahlreichen im
Array Prototyp integrierten Methoden bequem zu verarbeiten. Unter diesen Methoden kann beispielsweise
map ,
filter ,
reduce notiert werden. Um das Array wieder in ein Objekt umzuwandeln, gab es leider keine praktischen Werkzeuge. Alles musste manuell mit einer Schleife erledigt werden:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
Die
Object.fromEntries Methode wurde entwickelt, um solche Schleifen zu
Object.fromEntries . Sie können das gleiche Problem mit einer viel geringeren Menge an Code lösen. Dies kann Entwicklern helfen, Array-Methoden häufiger zu verwenden, um in Arrays konvertierte Objekte zu verarbeiten.
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
Es ist wichtig zu beachten, dass Arrays und Objekte nicht umsonst unterschiedliche Datenstrukturen aufweisen. In einigen Fällen führt die Konvertierung in einen anderen zu Datenverlust. Im folgenden Beispiel können Sie sehen, wie beim Konvertieren eines Arrays in ein Objekt die Array-Elemente verloren gehen, die sich als doppelte Schlüssel des Objekts herausstellen.
let students = [ [ 'amelia', 22 ], [ 'beatrice', 22 ], [ 'eloise', 21], [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students);
▍Unterstützung
- Chrome 75
- Firefox 67
- Safari 12.1
Array.prototype.flat-Methode
Mehrdimensionale Arrays sind Datenstrukturen, auf die Programmierer häufig stoßen. Besonders - beim Laden einiger Daten. Gleichzeitig war es immer eine wichtige Aufgabe, die Dimension des Arrays zu reduzieren. Es war immer möglich, dieses Problem zu lösen, aber der Code für seine Lösung konnte nicht als sehr attraktiv bezeichnet werden.
Betrachten Sie das folgende Beispiel. Als Ergebnis der Verarbeitung eines Arrays von Objekten mit der
map haben wir hier ein mehrdimensionales Array. Wir wollen es "flacher" machen.
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)
Jetzt steht uns die Methode
Array.prototype.flat zur Verfügung, die ein optionales Argument verwendet, das angibt, auf welcher Ebene die Elemente des Arrays "angehoben" werden sollen.
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel)
Beachten Sie, dass die Elemente des Arrays um eine Ebene angehoben werden, wenn Sie dieser Methode keine Argumente übergeben. Dies ist sehr wichtig, da wir in unserem Fall das Array in eine vollständig flache Datenstruktur umwandeln müssen. Folgendes passiert, wenn diese Methode ohne Parameter verwendet wird:
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened)
Die Rechtfertigung eines solchen Geräts für dieses Verfahren liegt in der Tatsache, dass standardmäßig nicht versucht wird, ein Array eindimensional zu machen, was spezifische Anweisungen zum Konvertieren des Arrays erfordert. Wenn Sie ein Array, dessen genaue Parameter unbekannt sind, in ein eindimensionales Array konvertieren müssen, können Sie den
Infinity Wert an die
flat Methode übergeben.
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened)
Wie üblich sollten solche Vorgänge mit Vorsicht angewendet werden. Dieser Ansatz kann wahrscheinlich nicht als gute Wahl für Fälle bezeichnet werden, in denen die Tiefe des verarbeiteten Arrays wirklich unbekannt ist.
▍Unterstützung
- Chrome 75
- Firefox 67
- Safari 12
Array.prototype.flatMap-Methode
Zusammen mit der
flat Methode steht uns jetzt eine neue kombinierte Methode zur Verfügung -
Array.prototype.flatMap . Oben haben wir tatsächlich bereits ein Beispiel für eine Situation gesehen, in der diese Methode nützlich sein kann, aber schauen wir uns ein anderes Beispiel an.
Angenommen, wir stehen vor der Aufgabe, bestimmte Elemente in ein Array einzufügen. Wie würden wir es vor dem Aufkommen neuer JS-Funktionen lösen? Zum Beispiel so:
let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7])
Array.prototype.flat wir die Methode
Array.prototype.flat , kann dieser Code verbessert werden:
let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
Das Problem, das wir hier lösen, basiert auf einem relativ populären Muster (insbesondere funktionale Programmierung). Wie schön wir es mit der
flatMap Methode lösen können, freut uns nur:
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
Denken Sie daran, dass die Methode
Array.prototype.flat standardmäßig
Array.prototype.flat funktioniert, als ob sie einer Einheit übergeben würde. Die
flatMap Methode verhält sich genauso,
flatMap sie "erhöht" die Elemente des Arrays um nur eine Ebene. Es ist das Ergebnis einer Kombination aus
map und Flachmethoden.
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]);
▍Unterstützung
- Chrome 75
- Firefox 67
- Safari 12
Methoden String.prototype.trimStart und String.prototype.trimEnd
Eine weitere nette neue Funktion von ES2019 sind Aliase, die einigen String-Methoden aussagekräftigere Namen geben. Zuvor verfügten wir über die Methoden
String.prototype.trimRight und
String.prototype.trimLeft :
let message = " Welcome to CS 101 " message.trimRight()
Die Methoden sind wunderbar, aber das Gute ist, dass ihnen Namen gegeben wurden, die für ihren Zweck relevanter sind. Ihr Ziel ist es, führende und nachfolgende Leerzeichen aus Zeichenfolgen zu entfernen.
let message = " Welcome to CS 101 " message.trimEnd()
▍Unterstützung
- Chrome 75
- Firefox 67
- Safari 12
Optionales Catch-Block-Argument
Ein weiteres nettes Feature von ES2019 ist, dass das Argument in
try-catch Blöcken jetzt optional geworden ist. Bisher mussten alle
catch Blöcke ein Ausnahmeobjekt als Parameter übergeben. Das Argument musste übergeben werden, um zu
catch auch wenn es nicht verwendet wurde.
try { let parsed = JSON.parse(obj) } catch(e) {
Das ist jetzt nicht so. Wenn das Ausnahmeobjekt im
catch nicht verwendet wird, muss nichts in diesen Block übertragen werden.
try { let parsed = JSON.parse(obj) } catch { console.log("error") }
Dies ist eine großartige Gelegenheit, die sich in Fällen als nützlich erweisen wird, in denen der Programmierer im Voraus weiß, welche Art von Notsituation dazu führt, dass er in den entsprechenden
catch .
▍Unterstützung
- Chrome 75
- Firefox 67
- Safari 12
Änderungen an der Function.prototype.toString-Methode
Der ES2019-Standard hat Änderungen an der Funktionsweise der
toString Funktionsmethode vorgenommen. Zuvor hat er das Erscheinungsbild des Ausgabecodes leicht verzerrt:
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
Diese Methode spiegelt nun die reale Darstellung des Quellcodes der Funktionen wider.
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
▍Unterstützung
Zusammenfassung
Hier haben wir uns Beispiele für die Verwendung einiger neuer JavaScript-Funktionen angesehen. Wenn Sie an JS-Innovationen interessiert sind, schauen Sie sich
dieses Repository und
diese Tabelle an.
Liebe Leser! Haben Sie Situationen erlebt, in denen neue Funktionen von JS die Lösung von Problemen erheblich vereinfachen?
