Alle neuen Tipps und Tricks ES2019

ES2019 bringt mehrere neue Funktionen in den ECMascript -Standard. Diese Funktionen sind offiziell in Node.js, Chrom, Firefox und Safari erhältlich. Um ältere Browser zu unterstützen, können Sie auch Babel verwenden, um diese Funktionen in verschiedene Versionen von JavaScript zu kompilieren.

Mal sehen, welche neuen Funktionen verfügbar sind!

Object.fromEntries -Methode

ES2017 führt die Methode Object.entries ein, die Objekte in ihre Array -Darstellungen umwandelt. Zum Beispiel:

 lass die Schüler = {
  Amelia: 20,
  Beatrice: 22,
  CECE: 20,
  Deirdre: 19,,
  Eloise: 21
}

Object.entelties (Schüler) 
// [
// ['Amelia', 20],
// ['Beatrice', 22],
// ['cece', 20],
// ['Deirdre', 19],
// ['Eloise', 21]
//]

Dies ist sehr nützlich, da Objekte eine Reihe von Funktionen verwenden können, die in Array -Prototypen wie map , filter , reduce usw. integriert sind, um das Ergebnis wieder in das Objekt umzuwandeln, erfordert jedoch einen relativ mühsamen Prozess.

 lass die Schüler = {
  Amelia: 20,
  Beatrice: 22,
  CECE: 20,
  Deirdre: 19,,
  Eloise: 21
}

// In ein Array konvertieren, um die Funktion .filter () zu verwenden, lass überladendyone = Object.ententries (Schüler) .filter (([Name, Alter]) => {
  Rückkehralter> = 21
}) // ['Beatrice', 22], ['Eloise', 21]]

// Mehrdimensionales Array zurück in Objekt konvertieren lassen Trinkingstudents = {}
für (lass [name, älter] von überlebten) {
    Trinkagestudenten [Name] = Alter;
}
// {Beatrice: 22, Eloise: 21}

Object.fromEntries -Methode wurde entwickelt, um diese Schleife zu beseitigen! Es bietet saubereren Code, mit dem Sie Array -Prototyp -Methoden für Objekte verwenden können.

 lass die Schüler = {
  Amelia: 20,
  Beatrice: 22,
  CECE: 20,
  Deirdre: 19,,
  Eloise: 21
}

// In ein Array konvertieren, um die Funktion .filter () zu verwenden, lass überladendyone = Object.ententries (Schüler) .filter (([Name, Alter]) => {
  Rückkehralter> = 21
}) // ['Beatrice', 22], ['Eloise', 21]]

// Mehrdimensionales Array zurück in Objekt konvertieren lass trinkestudents = Object.Fromentries (überlaste Zwanzigfragen); 
// {Beatrice: 22, Eloise: 21}

Es ist zu beachten, dass Arrays und Objekte unterschiedliche Datenstrukturen sind und die Konvertierung zwischen den beiden zu Datenverlust führen kann. Das folgende Beispiel zeigt, wie ein Array -Element zu einem doppelten Objekttaste wird:

 lass die Schüler = [
  ['Amelia', 22], 
  ['Beatrice', 22], 
  ['Eloise', 21], 
  ['Beatrice', 20]
]

lass studentObj = object.fromentries (Studenten); 
// {Amelia: 22, Beatrice: 20, Eloise: 21}
// Der erste Beatrice wurde verworfen!

Beachten Sie potenzielle Nebenwirkungen, wenn Sie diese Funktionen verwenden.

Object.fromEntries Methode Support -Situation

Chrom	Firefox	Safari	Rand
75	67	12.1	Nicht unterstützt

Array.prototype.flat -Methode

Mehrdimensionale Arrays sind eine sehr häufige Datenstruktur, insbesondere beim Abrufen von Daten. Die Fähigkeit, mehrdimensionale Arrays abzuflachen, ist erforderlich. Obwohl es zuvor hätte getan werden können, ist die Methode nicht elegant.

Schauen wir uns ein Beispiel an, in dem map Kartenfunktion ein mehrdimensionales Array zurückgibt, das abgeflacht werden muss.

 lass Kurse = [
  {
    Betreff: "Mathematik",
    NummerOfstudents: 3,
    WaitListstudents: 2,
    Studenten: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]
  },
  {
    Betreff: "Englisch",
    NummerOfstudents: 2,
    Studenten: ['Wilson', 'Taylor']
  },
  {
    Betreff: "Geschichte",
    NummerOfstudenten: 4,
    Studenten: ['Edith', 'Jacob', 'Peter', 'Betty']
  }
]

Lassen Sie Kurse = Kurse.Map (Kurs => Kurs.Students)
// [
// ['Janet', 'Martha', 'Bob', ['Phil', 'Candace'],
// ['Wilson', 'Taylor'],
// ['Edith', 'Jacob', 'Peter', 'Betty']
//]

[] .concat.apply ([], Kurvenstudenten) // Wir müssen diese Methode anwenden

Array.prototype.flat entstand. Es akzeptiert einen optionalen Tiefenparameter.

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

Lassen Sie Flattenonelevel = Kursestudents.flat (1)
console.log (flacheronelevel)
// [
// 'Janet',
// 'Martha',
// 'Bob',
// ['Phil', 'Candace'],
// 'Wilson',
// 'Taylor',
// 'edith',
// 'Jacob',
// 'Peter',
// 'Betty'
//]

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

Beachten Sie, dass die Standardtiefe 1 wichtig ist, wenn keine Parameter angegeben sind. Dies ist sehr wichtig, da dies in unserem Beispiel das Array nicht vollständig abgeflacht hat.

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

lass defaultFlattened = curSestudents.flat ()
console.log (defaultFlattened)
// [
// 'Janet',
// 'Martha',
// 'Bob',
// ['Phil', 'Candace'],
// 'Wilson',
// 'Taylor',
// 'edith',
// 'Jacob',
// 'Peter',
// 'Betty'
//]

Der Grund für dieses Design ist, dass die Funktion standardmäßig nicht gierig ist und explizite Anweisungen auf diese Weise erfordert. Infinity kann als Parameter für Fälle verwendet werden, in denen die Tiefe unbekannt ist, und es ist beabsichtigt, das Array vollständig zu planen.

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

lass immer flatteed = curesestudents.flat (unendlich)
console.log (immer flatteed)
// [
// 'Janet', 'Martha',,
// 'Bob', 'Phil',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// 'Jacob', 'Peter',,
// 'Betty'
//]

Wie immer sollten gierige Operationen mit Vorsicht verwendet werden, und wenn die Tiefe des Arrays tatsächlich unbekannt ist, sind gierige Operationen möglicherweise keine gute Wahl.

Array.prototype.flat Method Support -Situation

Chrom	Firefox	Safari	Rand
75	67	12	Nicht unterstützt

Chrom Android	Firefox Android	iOS safari	Dh Handy	Samsung Internet	Android WebView
75	67	12.1	Nicht unterstützt	Nicht unterstützt	67

Array.prototype.flatMap -Methode

Mit der Zugabe der flat Methode erhalten wir auch das kombinierte Array.prototype.flatMap . Wir haben tatsächlich gesehen, was es im obigen Beispiel funktioniert, aber schauen wir uns noch einen an.

Wenn wir Elemente in ein Array einfügen wollten, wie würde es dann aussehen, bevor ES2019 diese Funktionen hinzufügen?

 Sei Grade = [78, 62, 80, 64]

Sei gekrümmt = grade.map (grade => [grade, grade 7])
// [[78, 85], [62, 69], [80, 87], [64, 71]]

Lassen Sie flatmapt = [] .Concat.Apply ([], gebogen) // jetzt flach, flach kann verwendet werden, aber es existierte nicht vorher // [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

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

 Sei Grade = [78, 62, 80, 64]

Sei flatmapt = grade.map (grade => [grade, grade 7]). flat ()
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
//]

Dies ist jedoch immer noch ein relativ beliebtes Muster, insbesondere in der funktionalen Programmierung. Es ist also toll, es in einen Array -Prototyp einzubauen. Mit flatMap können wir das tun:

 Sei Grade = [78, 62, 80, 64]

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

Denken Sie daran, dass der Standardparameter für Array.prototype.flat 1. flatMap entspricht der Kombination von map und flat ohne Parameter. Daher wird flatMap nur eine Schicht abgeflacht.

 Sei Grade = [78, 62, 80, 64]

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

Array.prototype.flatMap -Methodenunterstützungssituation

Chrom	Firefox	Safari	Rand
75	67	12	Nicht unterstützt

Chrom Android	Firefox Android	iOS safari	Dh Handy	Samsung Internet	Android WebView
75	67	12.1	Nicht unterstützt	Nicht unterstützt	67

String.trimStart und String.trimEnd -Methoden

Eine weitere nette Ergänzung zu ES2019 ist der Alias, der einige String -Funktionsnamen expliziter macht. Zuvor waren String.trimRight und String.trimLeft verfügbar.

 Lassen Sie Message = "Willkommen zu CS 101"
Message.trimright ()
// 'Willkommen zu CS 101'
Message.trimleft ()
// 'Willkommen zu CS 101'
Message.trimright (). TrimLeft ()
// 'Willkommen zu CS 101'

Dies sind große Funktionen, aber es ist auch hilfreich, ihnen Namen zu geben, die mehr zu ihrem Zweck entsprechen. Löschen Sie die Start- und Endräume.

 Lassen Sie Message = "Willkommen zu CS 101"
Message.trimend ()
// 'Willkommen zu CS 101'
message.trimstart ()
// 'Willkommen zu CS 101'
message.trimend (). trimStart ()
// 'Willkommen zu CS 101'

String.trimStart und String.trimEnd -Methoden unterstützen die Situation

Chrom	Firefox	Safari	Rand
75	67	12	Nicht unterstützt

Optionale catch

Eine weitere schöne Funktion von ES2019 besteht darin, die Parameter im try-catch -Block optional zu erstellen. Zuvor haben alle catch Ausnahmen als Parameter übergeben. Dies bedeutet, dass der Code im catch -Block ihn ignoriert, er existiert dennoch.

 versuchen {
  lass Parseed = Json.Parse (OBJ)
} catch (e) {
  // E ignorieren oder Console.log (OBJ) verwenden
}

Dies ist nicht mehr der Fall. Wenn im catch keine Ausnahme verwendet wird, wird überhaupt nichts benötigt.

 versuchen {
  lass Parseed = Json.Parse (OBJ)
} fangen {
  console.log (obj)
}

Dies ist eine gute Option, wenn Sie bereits wissen, was der Fehler ist, und nach den Daten suchen, die sie auslösen.

Unterstützung für optionale catch

Chrom	Firefox	Safari	Rand
75	67	12	Nicht unterstützt

Änderungen zur Function.toString() Methode

ES2019 veränderte auch die Art und Weise, wie Function.toString() -Methode ausgeführt wird. Zuvor hat es die Räume vollständig entfernt.

 Funktion Begrüßung () {
  const name = 'CSS Tricks'
  console.log (`Hallo von $ {name}`)
}

Begrüßung.ToString ()
// 'Function Begrüßung () {\ nconst name = \' CSS -Tricks \ '\ nconsole.log (`Hallo aus $ {Name} //`) \ n}'

Jetzt spiegelt es die wahre Darstellung der Funktion im Quellcode wider.

 Funktion Begrüßung () {
  const name = 'CSS Tricks'
  console.log (`Hallo von $ {name}`)
}

Begrüßung.ToString ()
// 'Funktion Begrüßung () {\ n'  
// "const name = 'CSS Tricks' \ n"  
// 'console.log (`Hallo aus $ {name}`) \ n'  
// '}'

Dies ist hauptsächlich eine interne Veränderung, aber ich kann nicht anders, als zu denken, dass dies für ein oder zwei Blogger in Zukunft das Leben erleichtert.

Unterstützung von Function.toString() Methode

Chrom	Firefox	Safari	Rand
75	60	12 - teilweise Unterstützung	17 - teilweise Unterstützung

Dies ist die Hauptfunktion von ES2019!

Möglicherweise möchten Sie auch einige andere neue Funktionen erkunden, darunter:

• Symbol Beschreibung
• Stabilität sortieren
• ECMascript als Superet von JSON
• JSON.stringify

Ich wünsche Ihnen ein fröhliches JavaScript -Programm!

Das obige ist der detaillierte Inhalt vonAlle neuen Tipps und Tricks ES2019. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!