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

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

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

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

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

?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

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!