Zusammenfassung aller neuen Funktionen in JavaScript ECMAScript 6

Es ist acht Jahre her, dass ECMAScript ES6 im Jahr 2015 offiziell veröffentlichte. Seit 2015 wird jedes Jahr im Juni eine neue Version veröffentlicht, wobei das Jahr zu diesem Zeitpunkt als Versionsnummer angegeben wird.

In diesen vielen Versionen sind viele neue Funktionen erschienen. Um die Erinnerung zu erleichtern, habe ich alle neuen Funktionen in diesem Artikel geordnet.

ps: Einige Informationen besagen, dass alle Versionen nach ES2015 gemeinsam als ES6 bezeichnet werden, und andere sagen, dass ES6 ES2015 bedeutet, ES7 ES2016 usw. bedeutet, was hier nicht besprochen wird.

ES2015 (ES6)

ES2015 ist die Version mit den größten Änderungen. Grundsätzlich wurden alle Inhalte vor ES2015 erweitert, wie in der folgenden Abbildung dargestellt:

Schlüsselwörter

let, const und Gültigkeitsbereich auf Blockebene.

Vor ES6 gab es nur eine Möglichkeit, Variablen zu deklarieren: In ES2015 wurden let und const hinzugefügt var um Variablen und Konstanten zu deklarieren

folgt:

// Deklarationsvariable let v = 100
v = 200
// Konstante const V = 200 deklarieren
// Konstanten ändern // V = ​​300 //

Mit let und const deklarierte Variablen oder Konstanten haben einen Gültigkeitsbereich auf Blockebene.

Der Beispielcode lautet wie folgt

:
  var v = 100
}
{
  sei val = 200
}
console.log(v)
console.log(val) // Fehlerwert ist nicht definiert.

Es ist zu beachten, dass Variablen, die mit let oder const deklariert wurden, nicht über die Merkmale einer Variablenheraufstufung verfügen und eine vorübergehende Totzone besteht.

Durch die Erweiterung der Funktion

können Funktionen in ES2015 Standardwerte verwenden. Der Beispielcode lautet wie folgt:

// Vor es2015 function foo(v) {
  v = v ? v : 100
  zurückkommen v
}
//es2015
Funktionsleiste(v = 100) {
  zurückkommen v
}

Es ist zu beachten, dass bei mehreren Parametern die Standardparameter von hinten nach vorne verwendet werden müssen .

In ES2015 werden Pfeilfunktionen hinzugefügt, die eine Kurzform von Funktionen sind . Der Beispielcode lautet wie folgt:

function foo(v) {
  Rückkehr v``
}
// Pfeilfunktion wird geschrieben const foo = (v) => {
  zurückkommen v
}
// Abkürzung 1
const foo = v => { // Nur ein Parameter kann die Klammern weglassen, return v
}
// Abkürzung 2
const foo = v => v // Sie können return und geschweifte Klammern weglassen, wenn die Anweisung nur return enthält.

Beachten Sie, dass this der Pfeilfunktion auf der Grundlage des Ausführungskontexts bestimmt wird und this intern gebunden ist .

Bei der Verwendung von Pfeilfunktionen gibt es kein internes Argumentobjekt, stattdessen werden die restlichen Parameter verwendet.

Der Beispielcode lautet wie folgt:

const foo = (...args) => {.
  // console.log(arguments) // ReferenceError: Argumente sind nicht definiert
  console.log(args) // args ist ein Array}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

Das der Funktion in ES2015 hinzugefügte Namensattribut zeigt auf den Namen der Funktion.

Der Beispielcode lautet wie folgt:

function foo(v) {
  zurückkommen v
}
const bar = v => v
console.log(foo.name) // foo
console.log(bar.name) //Erweiterung des Balkenwerts

Die

Erweiterung des Werts in ES2015 fügt hauptsächlich einige Methoden zu Math und Number Objekten sowie binäre und oktale Darstellungsmethoden hinzu.

In ES2015 wird 0b oder 0B zur Darstellung von Binärwerten und 0o oder 0O zur Darstellung von Oktalwerten verwendet.

Der Beispielcode lautet wie folgt:

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) //

Die um true für Number erweiterten Attribute und Methoden lauten wie folgt:

Die Methode für die Math-Erweiterung lautet wie folgt:

Vorlagenzeichenfolgen

ein, die mithilfe von Backtick-Markierungen (`) definiert werden. Die Vorlagenzeichenfolge behält das Format bei und es können Variablen verwendet werden.

Der Beispielcode lautet wie folgt:

// Verwenden Sie `, um die Vorlagenzeichenfolge zu definieren, let str = `a bowl ofweeks`
// Die Vorlagenzeichenfolge kann das Format let str2 = „Eine Schüssel voller Wochen“ beibehalten
// Der Vorlagenstring kann die Variable const myName = 'Eine Schüssel voller Wochen' verwenden
let str3 = `author: ${myName}` // Verwenden Sie ${} zum Umschließen.

ES2015 erweitert auch einige Methoden für String- und String-Instanzen wie folgt:

Die Erweiterung

des Arrays stellt einen Erweiterungsoperator in ES2015 bereit, der in einem Array zum Erweitern des Arrays verwendet wird und trennen Sie es durch Kommas,

Beispielcode wie folgt:

const arr = [1, 2, 3, 4, 5, 6]

zusätzlich

jedes Element im Array als Parameter

Stellen Sie eine Reihe von Methoden bereit, die nacheinander eingeführt werden:

Array.from() : Erstellen Sie ein Array-ähnliches Objekt oder ein iterierbares Objekt als neues Array . Der Beispielcode lautet wie folgt:

function foo() {
  return Array.from(arguments) // Argumente in Array konvertieren}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : Erstellt ein neues Array mit einer variablen Anzahl von Argumenten Beispiel : Der Beispielcode lautet wie folgt:

Array.of(1) // [1]
Array.of(true, 1, 'Eine Schüssel mit Wochen') // [true, 1, 'Eine Schüssel mit Wochen']

Array.prototype.copyWithin() kopiert einen Teil des Arrays flach an eine andere Stelle im selben Array , und die Rückgabe ändert nicht die Länge des ursprünglichen Arrays.

Der Beispielcode lautet wie folgt:

const arr = [1, 2, 3, 4]

// Beginnen Sie bei Index 2 und kopieren Sie den Inhalt am Ende auf Index 0 arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() , gemäß der angegebenen Rückruffunktion, Finden Sie das erste passende Element und geben Sie undefiniert zurück, wenn es nicht gefunden wird . Der Beispielcode lautet wie folgt:

const arr = [1, 2, 3, 4]
arr.find(item => item === 2) // 2 (angebendes Element),

Array.prototype.findIndex() , gemäß der angegebenen Rückruffunktion den Index des ersten passenden Elements finden, zurückgeben, wenn nicht gefunden - 1. Der Beispielcode lautet wie folgt:

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (gibt den Index an)

Array.prototype.fill() , füllt das Array mit dem angegebenen Wert . Der Beispielcode lautet wie folgt:

const arr = [1, 2 , 3, 4 ]
// Index 1-3 mit dem angegebenen Wert füllen
arr.fill('eine Schüssel mit Wochen', 1, 3) // [ 1, 'eine Schüssel mit Wochen', 'eine Schüssel mit Wochen', 4 ]

Array.prototype.keys() , gibt ein iterierbares Objekt zurück, dessen Inhalt ist der Schlüssel des Arrays . Der Beispielcode lautet wie folgt:

const arr = [1, true, 'Eine Schüssel voller Wochen']
const-Tasten = arr.keys()
for (const i der Schlüssel) {
  console.log(i) // Durchlaufergebnisse 0 1 2
}

Array.prototype.values() gibt ein iterierbares Objekt zurück, dessen Inhalt der Wert des Arrays ist .

Der Beispielcode lautet wie folgt:

const arr = [1, true, 'A bowl of Zhou']
const-Werte = arr.values()
for (const i der Werte) {
  console.log(i) // Durchlaufergebnis 1 true Eine Schüssel mit Wochen}

Array.prototype.entries() gibt ein iterierbares Objekt zurück, dessen Inhalt ein Array ist. Index 0 ist das Element des ursprünglichen Arrays und 1 ist das Element Der Wert der Position,

der Beispielcode lautet wie folgt:

const arr = [1, true, 'Eine Schüssel voller Wochen']

const iterator = arr.entries()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'Eine Schüssel voller Wochen' ] ]

Die Erweiterung des Objekts

in ES2015 ermöglicht den Attributnamen des Objekts und Attributwert muss konsistent sein. Sie können einfach den Attributnamen schreiben.

Der Beispielcode lautet wie folgt:

const myName = 'Eine Schüssel mit Wochen'.
const Alter = 18
const person = { myName, age }
console.log(person) // { myName: 'A bowl of Zhou', age: 18 }

Darüber hinaus dürfen Sie beim Definieren eines Objekts [] umschlossene Ausdrücke als Attributnamen verwenden. Der Beispielcode lautet wie folgt:

const myName = 'Eine Bowl-Woche'
const Alter = 18
const person = {
  meinName,
  ['a' + 'g' + 'e']: Alter,
}
console.log(person) // { myName: 'One Bowl Zhou', age: 18 }

Object.is() : Wird verwendet, um zu vergleichen, ob zwei Werte gleich sind, und wird verwendet, um NaN ≠= NaN, +0 zu lösen === - 0 Problem,

der Beispielcode lautet wie folgt:

console.log(NaN === NaN) // false
console.log(+0 === -0) // true

console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(+0, -0)) // false

Object.assign() : Kopiert die Werte aller aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten in das Zielobjekt und gibt das Zielobjekt zurück,

Beispiel Der Code lautet wie folgt:

const person = Object.assign({}, { name: 'One Bowl Zhou' }, { age: 18 })
console.log(person) // { Name: 'One Bowl Zhou', Alter: 18 }

• Object.getPrototypeOf() : Holen Sie sich das Prototyp-Objekt ;
• Object.setPrototypeOf() : Legen Sie das Prototyp-Objekt fest .

Klassen

stellen das Konzept von Klassen in ES2015 dar, und Klassen sind auf Syntaxebene verfügbar. Der Beispielcode lautet wie folgt:

class Person {.
  Konstruktor(Alter) {
    //Attribute this.myName = 'Eine Schüssel voller Wochen'
    this.age = Alter
  }
  // Statische Methode static print() {
    console.log()
  }
  //Accessor get myName() {
    console.log('getter')
    „eine Schüssel voller Wochen“ zurückgeben
  }
  setze meinenNamen(v) {
    console.log('setter' + v)
  }
  setName(v) {
    this.myName = v
  }
}
const person = neue Person(18)
person.setName('ywanzhou') // Setter-Accessor auslösen console.log(person.myName) // Getter-Accessor auslösen

Modularität

hat hier die ESModel-Modularisierungsspezifikation vorgeschlagen, die erste offizielle Level-Modularisierungsspezifikation Spezifikation: Wir dürfen Export zum Exportieren von Modulen und Import zum Einführen von Modulen verwenden.

Der Beispielcode lautet wie folgt:

import a from 'm' // Importiere den Standardexport in Modul m und nenne ihn a
import a, { b } from 'm' // Standardexport in Modul m importieren und Mitglied b separat importieren
import * as A from 'm' // Alle Mitglieder im Modul importieren import 'm' // M-Modul ausführen export const b = 1 // Separat exportieren export default b // Standardexport export { b } // Bei Bedarf exportieren export { b as bb } // Export { b } von 'm' umbenennen und exportieren // Mitglied b in Modul m importieren und

Destrukturierungszuweisung

ES2015 hat eine neue Syntax für die Destrukturierungszuweisung hinzugefügt, die es uns ermöglicht, bestimmte Muster in zu verwenden Arrays. Oder extrahieren Sie den angegebenen Wert aus dem Objekt.

Der Beispielcode lautet wie folgt:

// Destrukturierende Zuweisung des Arrays let [name, age, hobby = 'coding' /* Standardwert der Strukturzuweisung */] = ['A Bowl von Zhou', 18]
// Vertausche die Werte der beiden Variablen let a = 1
sei b = 2
;[a, ​​​​b] = [b, a]
console.log(a, b) // 2 1

// Objektstrukturzuweisung let { name: ObjName /* Destrukturierende Zuweisung rename*/, sex } = { name: 'A bowl ofweeks', sex: 1 }

// Destrukturierende Zuweisung von Funktionsparametern function bar({ name, age }) {
  Geben Sie Name + Alter zurück
}
bar({ name: 'Eine Schüssel mit Wochen', Alter: 18 }) // Eine Schüssel mit Wochen 18

Symbol

Symbol ist ein neuer Datentyp in ES2015. Er wird über Symbol() erstellt und kann einen String als übergeben Parameter. Wird zur Beschreibung des Symbols verwendet.

Die durch die Symbol()-Methode erstellten Symbolwerte sind alle eindeutig. Der Beispielcode lautet wie folgt:

/**
 * Syntax * Symbol([Beschreibung])
 * * Beschreibung -> ist eine optionale Beschreibungsinformation */
//Erstelle einen Wert vom Typ Symbol const mySymbol = Symbol()
console.log(mySymbol) // Symbol()

const myName = Symbol('Eine Schüssel mit Wochen')
console.log(typeof myName) // symbol

Symbol verfügt außerdem über eine Reihe von Eigenschaften und Methoden, die hier nicht vorgestellt werden.

Promise

Promise ist eine in ES2015 bereitgestellte asynchrone Lösung , die das Problem der Callback-Hölle löst.

Ein Promise-Objekt kann über Promise() Konstruktor erstellt werden. Jedes Promise-Objekt hat die folgenden Zustände:

• ausstehend: Anfangszustand, weder Erfolgs- noch Fehlerzustand.
• gelöst: bedeutet, dass der Vorgang erfolgreich abgeschlossen wurde.
• abgelehnt: bedeutet, dass der Vorgang fehlgeschlagen ist.

Es gibt nur zwei Arten des Statuswechsels:

• pending→resolved
• pending→resolved

. Sobald sich der Status ändert, ändert er sich nicht mehr.

In der Promise -Instanz gibt es eine then Methode, die es uns ermöglicht, Aufrufe in der Promise -Instanz zu verketten then gibt die Methode auch eine Promise -Instanz zurück,

wie in der folgenden Abbildung dargestellt:

Der Beispielcode lautet wie folgt:

new Promise((resolve,ject) => {
    console.log('Ich bin der Log im ersten Promise')
    lösen()
})
    .then(() => {
        console.log('Ich bin dann der Erste, der sich anmeldet')
    })
    .then(() => {
        console.log('Ich bin dann der Log im zweiten, aber ich habe eine Ausnahme')
        wirf einen neuen Fehler ('Error')
    })
    .then(() => {
        console.log('Ich bin dann das Protokoll des ersten Rückrufs im dritten, aber ich werde ihn nicht ausführen, weil über mir eine Ausnahme aufgetreten ist.')
    }, () => {
        console.log('Ich bin das Protokoll des zweiten Rückrufs im dritten, dann habe ich ihn ausgeführt')
    })
    .then(() => {
        console.log('Ich bin das Protokoll im vierten, dann kann ich es normal ausführen.')
    })

/* Das Ausführungsergebnis lautet wie folgt: Ich bin das Protokoll im ersten Versprechen
Ich bin dann der Erste, der sich anmeldet
Ich bin das Protokoll im zweiten, aber ich habe eine Ausnahme im zweiten Protokoll, dann kann ich es normal

ausführen Die Methoden von Promise lauten wie folgt:

• Promise.prototype.then() : Es sind höchstens zwei Parameter erforderlich: die Rückruffunktion von
• Promise.prototype.catch() : gleich dem zweiten Parameter der then -Methode
• Promise.all() : Packen Sie mehrere Instanzen in eine neue Instanz, geben Sie das Ergebnisarray nach allen Instanzstatusänderungen zurück (ändern Sie alle Änderungen und kehren Sie dann zurück)
• Promise.race() : Packen Sie mehrere Instanzen in eine neue Instanz, geben Sie den Status aller Instanzen zurück. Priorisieren Sie die geändertes Ergebnis (zuerst ändern und zuerst zurückgeben)
• Promise.resolve() : Konvertieren Sie das Objekt in ein Promise-Objekt (entspricht new Promise(resolve => resolve()) ).
• Promise.reject() : Konvertieren Sie das Objekt in den Status „ rejected Promise-Objekt (entspricht new Promise((resolve, reject) => reject()) )

Iterator

ist ein Iterator. Es handelt sich um eine Schnittstelle, die einen einheitlichen Zugriffsmechanismus für verschiedene Datenstrukturen bereitstellt Die Struktur stellt die Iterationsschnittstelle bereit und kann auf einheitliche Weise durchlaufen werden.

Die Datenstruktur, die die iterierbare Schnittstelle implementiert, implementiert sich im Allgemeinen selbst oder erbt das Symbol.iterator Attribut und ist ein iterierbares Objekt. Die Eigenschaft Symbol.iterator selbst ist eine Funktion, bei der es sich um die Standardfunktion zur Iteratorgenerierung der aktuellen Datenstruktur handelt.

Ein Objekt, das die Methode next() enthält, kann als iterierbares Objekt bezeichnet werden. Das next() Objekt gibt ein Objekt zurück, das zwei Werte enthält,

wie unten gezeigt:

• value : jeder vom Iterator zurückgegebene JavaScript Wert. Kann weggelassen werden, wenn done true ist.
• done true false , stoppt er den Iterator sofort und der Wert von value kann weggelassen werden.

Die von JavaScript nativ bereitgestellte Iteratorschnittstelle ist in der folgenden Abbildung dargestellt:

Jetzt implementieren wir einen Iterator für obj, der Code lautet wie folgt:

const obj = {
    [Symbol.iterator] () {
        zurückkehren {
            nächste () {
                console.log('Iterator ausgeführt');
                zurückkehren {
                    Wert: '',
                    done: true // Flag, ob es vorbei ist, true bedeutet, dass es vorbei ist}
            }
        }
    }
}

Wir haben in der next() Methode einen Druck hinzugefügt, um zu überprüfen, ob

der Iterator ausgeführt wurde.

Generator

ist eine in ES2015 bereitgestellte asynchrone Programmierlösung Das function Verwenden Sie ein Sternchen * zwischen dem Funktionsnamen und dem Funktionsnamen und verwenden Sie das Schlüsselwort yield innerhalb der Funktion, um verschiedene Zustände zu definieren.

Der Beispielcode lautet wie folgt:

function* testGenerator() {
  // yield definiert einen staatlichen Ertrag „eine Schüssel mit Wochen“
  yield 'esnew Features'
  return 'generator' // Generator beenden, auch wenn später ein yield-Schlüsselwort vorhanden ist, ist es ungültig}
const g = testGenerator() // Das Generator-Objekt zurückgeben und den Status durch die next()-Methode verschieben g.next()
/* { value: 'A bowl of Zhou', done: false } */

g.next()
/* { value: 'es neue Funktionen', done: false } */

g.next()
/* { value: 'generator', done: true } */

Proxy- und Refect

-Proxy-Objekte werden verwendet, um ein Proxy-Objekt zu erstellen, um das Abfangen und Anpassen grundlegender Vorgänge zu implementieren. Es gibt 13 Grundoperationen, wie in der folgenden Tabelle gezeigt:

Proxy folgende Code zeigt die Verwendung von Proxy Objekten:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
  <title>Dom automatisch durch Set aktualisieren</title>
</head>

<Körper>
  <p class="card" style="width: 300px; margin: 100px auto">
    <p class="card-body">
      <h1 id="name"></h1>
      <button id="btn" class="btn btn-primary">Ändern</button>
    </p>
  </p>
  <Skript>
    // DOM-Knoten abrufen const name = document.getElementById('name')
    const btn = document.getElementById('btn')
    //Definieren Sie eine Funktion, die den Wert ändert const updateDOM = (el, value) => {
      el.innerHTML = Wert
    }
    const person = neuer Proxy({
      Name: „Eine Schüssel Haferbrei“,
    }, {
      set(target, propKey, value) {
        //Wenn sich der darin enthaltene Wert ändert, rufen Sie unser updateDOM auf
        updateDOM(Name, Wert)
        target[propKey] = Wert
        Rückkehr wahr
      },
    })
    name.innerHTML = person.name
    // Klicken Sie auf die Schaltfläche, um den Änderungsvorgang auszulösen btn.addEventListener('click', () => {
      person.name === 'Eine Schüssel Zhou'?
        (person.name = 'Eine Schüssel Brei'):
        (person.name = 'One Bowl Zhou')
    })
  </script>
</body>
</html>

Der obige Code verwendet die Set-Methode für die Datenbindung. Wenn sich das Objekt ändert, wird unser DOM automatisch aktualisiert.

Reflect ist ein von ECMAScript2015 bereitgestelltes Objekt. Es stellt einige statische Methoden zum Abfangen von JavaScript-Operationen bereit. Diese Methoden sind mit den Methoden in handlers in Proxy konsistent.

Reflect ist kein Konstruktor, was bedeutet, dass es nicht instanziiert werden kann.

Jeder Abfangvorgang im Proxy Objekt (z. B. get , delete usw.) ruft intern die Reflect -Methode entsprechend auf. Die bereitgestellten statischen Methoden stimmen wie folgt mit den Methodennamen in handlers in Proxy überein

:

Set, Map, WeakSet, WeakMap

Set , Map , WeakSet und WeakMap sind mehrere neue Objekte in ES2015:

• Set und WeakSet ähneln Arrays. Der Unterschied zwischen den beiden besteht darin, dass Set jeden Datentyp speichern kann, während WeakSet nur Referenzen auf Objekte speichern kann und die

am häufigsten verwendeten

Das Festlegen von Objekten in der tatsächlichen Entwicklung dient der Implementierung der Datendeduplizierung. Der Beispielcode lautet wie folgt:

const arr = [1, 2, 2, 3, 4, 3, 5]
const set = new Set(arr)
// Das Set-Objekt kann verwendet werden... um alle Elemente zu erweitern console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map und WeakMap ähneln Objekten und werden in gespeichert die Form von Schlüssel-Wert-Paaren Ja, der Unterschied zwischen den beiden besteht darin, dass die Schlüssel-Wert-Paare von Map beliebig sein können, während die Schlüssel von WeakMap Verweise auf Objekte sein müssen und die Werte von beliebigem Typ sein können.

ES2016 (ES7)

ES2016 veröffentlicht relativ wenige neue Funktionen, hauptsächlich zwei neue Funktionen, wie in der folgenden Abbildung dargestellt:

Der Exponentenoperator

ES2016 verfügt über einen neuen Exponenten ** , auch Potenzoperator genannt, der dieselbe Funktion wie Math.pow() hat.

Der Beispielcode lautet wie folgt:

console.log(2 ** 10 === Math.pow (2, 10)) // true

Array.prototype.includes()-Methode

fügt dem Array-Prototyp in ES2016 die Methode includes() hinzu. Diese Methode wird verwendet, um zu bestimmen, ob ein Array einen angegebenen Wert enthält und einen booleschen Wert

zurückgibt Der Beispielcode lautet wie folgt:

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

Es ist erwähnenswert, dass NaN und NaN , +0 und -0 bei Verwendung von includes() gleich sind.

ES2017(ES8)

Async/Await-Syntax Sugar

Promise das Problem der Callback-Hölle löst, wird die Lesbarkeit immer noch schlechter. Die neue Async/Await-Syntax Sugar in ES2017 löst dieses Problem.

Promise wird wie folgt geschrieben:

;(function () {
  Funktion Promise(v) {
    neues Versprechen zurückgeben((auflösen, ablehnen) => {
      lösen(v)
    })
  }
  const p = Versprechen(1)
  p.then(res => {
    Rückgabeversprechen
  }).then(res => {
    console.log(res)
  })
})()

Wenn das nächste Versprechen vom vorherigen abhängt, wird diese Aufrufkette sehr lang sein. Jetzt schreiben wir es mit async/await syntaktischem Zucker um:

;(async function () {.
  Funktion Promise(v) {
    neues Versprechen zurückgeben((auflösen, ablehnen) => {
      lösen(v)
    })
  }
  const r1 = Warten auf Versprechen(1)
  const r2 = Warten auf Versprechen(r1)
  const res = warte auf Versprechen(r2)
  console.log(res)
})()

Wie Sie sehen können, können wir den syntaktischen Zucker async/await verwenden, um Promise in eine flache Schreibmethode umzuschreiben.

Atomics-Objekt

ES2017 fügt eine Reihe statischer Methoden zum Betreiben von SharedArrayBuffer- und ArrayBuffer-Objekten hinzu. Dieses Objekt kann nicht mit dem new Schlüsselwort instanziiert werden. Es

wurden nur drei statische Methoden

bereitgestellt

für Object in ES2017 wie folgt erweitert:

• Object.values() : Gibt ein Array aller aufzählbaren Eigenschaftswerte eines bestimmten Objekts selbst zurück;
• Object.entries() : Gibt ein Array aller aufzählbaren Eigenschaftswerte eines bestimmten Objekts zurück Objekt selbst. Ein Array von Schlüssel-Wert-Paaren für aufgezählte Eigenschaften;
• Object.getOwnPropertyDescriptors() : Gibt die Eigenschaftsdeskriptoren aller eigenen Eigenschaften eines bestimmten Objekts zurück.

Durch die Funktionserweiterung

in ES2017 können wir am Ende der Funktionsparameterliste ein Komma hinzufügen. Diese kleine Funktion ist sehr nützlich, da beim Aktualisieren des nachgestellten Kommas nur eine Codezeile geändert werden muss. Es müssen zwei Codezeilen geändert werden.

Der Beispielcode lautet wie folgt:

function fun(
  aaaaa,
  bbbbb,
  ccccc,
) {}

Wenn es ein nachgestelltes Komma gibt, müssen Sie am Ende nur eine Zeile hinzufügen. Wenn es nicht vorhanden ist, müssen Sie das Komma am Ende hinzufügen und dann eine Zeile hinzufügen. Dadurch werden zwei Zeilen in der Versionsverwaltung geändert, nicht eine.

Die String-Erweiterung

fügt zwei neue Instanzmethoden für Strings in ES2017 hinzu:

• padStart() : füllt Leerzeichen am Anfang des Strings;
• padEnd() : füllt Leerzeichen am Ende des Strings

:

const str = 'Eine Schüssel Zhou'
console.log(str.padStart(10)) /* Eine Schüssel Zhou*/
console.log(str.padEnd(10)) /* Yiwan Zhou*/

ES2018(ES9)

Für die asynchrone Iteration

gibt es in ES2018 eine neue for await...of -Anweisung, mit der asynchrone iterierbare Objekte durchlaufen werden können.

Der Beispielcode lautet wie folgt:

var asyncIterable = {
  [Symbol.asyncIterator]() {
    zurückkehren {
      ich: 0,
      nächste() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false })
        }

        return Promise.resolve({ done: true })
      },
    }
  },
}
;(asynchrone Funktion () {
  forwait (Anzahl asyncIterable) {
    console.log(num)
  }
})()

// 0
// 1
// 2

Erweiterungen für reguläre Ausdrücke

In ES2018 werden die folgenden Erweiterungen an regulären Ausdrücken vorgenommen:

Benennung von Gruppen mit regulären Ausdrücken:

Vor ES2018 konnten wir die Gruppen in regulären Ausdrücken nicht benennen. Diese Funktion wurde in ES2018 eingeführt Referenz,

der Beispielcode lautet wie folgt:

const RE_DATE = /(?<Jahr>d{4})-(?<Monat>d{2})-(?<Tag>d {2})/

const matchObj = RE_DATE.exec('2022-02-22')
const year = matchObj.groups.year // 2022
const Monat = matchObj.groups.month // 02
const day = matchObj.groups.day // 22

s-Modifikator/dotALl-Modus: Der neue s-Modifikator ermöglicht die Verwendung jedes einzelnen Zeichens . und das ****-Attribut gibt an, ob die „ s “-Modifikation zusammen im regulären Ausdruckssymbol verwendet werden soll .

Reverse-Assertions: Vor ES2018 gab es nur Forward-Assertions, während in ES2018 Reverse-Assertions und Reverse-Negative-Assertions hinzugefügt wurden.

Objekt-Spread-Operator

In ES2015 wurde diese Funktion zum Objekt hinzugefügt. Der Beispielcode lautet wie folgt:

const n = { name: 'One Bowl of Zhou' }
const a = { Alter: 18 }
const person = { ...n, ...a }
// Objekt zusammenführen console.log(person) // { Name: „A Bowl of Zhou“, Alter: 18 }

Promise.prototype.finally()

finally() gibt ein Promise Objekt zurück, wenn der Zustand des Versprechens erreicht ist Ändert sich, ob finally() -Rückruf ausgeführt wird, wenn er rejected oder fulfilled wird.

Der Beispielcode lautet wie folgt:

fetch(url)
  .then(res => {
    console.log(res)
  })
  .catch(error => {
    console.log(Fehler)
  })
  .finally(() => {
    console.log('end')
  })

ES2019(ES10)

Die Optimierung

hat die folgenden zwei Inhalte in ES2019 optimiert:

• Function.prototype.toString() : Der zurückgegebene Funktionskörper enthält Kommentare und Leerzeichen;
• try...catch : catch in der Anweisung lässt keine Parameter zu. Der Beispielcode lautet wie folgt:

try {
  console.log('Eine Schüssel voller Wochen')
} fangen {
  console.error('Eine Schüssel voller Wochen')
}

trimStart()/trimLeft() und trimEnd()/trimRight()

• String.prototype.trimStart : werden verwendet, um Leerzeichen auf der linken Seite der Zeichenfolge zu entfernen;
• String.prototype.trimLeft : ist ein Alias ​​von trimStart
• String.prototype.trimEnd : verwendet, um die Leerzeichen auf der rechten Seite der Zeichenfolge zu entfernen.
• String.prototype.trimRight : Es trimEnd

eine Erweiterung des Alias-Arrays

, nämlich:

• Array.prototype.flat() : Dies Die Methode folgt einem spezifizierbaren Array, durchläuft das Array tief rekursiv und führt alle Elemente mit den Elementen im durchquerten Unterarray zu einem neuen Array zusammen und gibt es einfach zurück, um eine Abflachung des Arrays zu erreichen.

const arr = [0, 1, 2, [3, 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : Diese Methode ordnet das Array zu, reduziert es und gibt ein neues Array zurück (nur eine Ebene des Arrays kann). erweitert werden).

Object.fromEntries()

Die neue Object.fromEntries() -Methode in ES2019 konvertiert eine Liste von Schlüssel-Wert-Paaren in ein Objekt. Es handelt sich um die umgekehrte Operation Object.entries() -Methode.

Der Beispielcode lautet wie folgt:

const person = {
  Name: „Eine Schüssel Zhou“,
  Alter: '18',
}
const e = Object.entries(person)

const p = Object.fromEntries(e)
console.log(p) // { Name: 'Eine Schüssel voller Wochen', Alter: '18' }

Symbol.prototype.descrption

description ist eine schreibgeschützte Eigenschaft, die beim Erstellen des Symbolobjekts die optionale Beschreibungszeichenfolge zurückgibt.

ES2020 (ES11)

Durch die Modularisierung

wird in ES2020 ein dynamischer Import hinzugefügt, was bedeutet, dass das Modul geladen wird, wenn wir es benötigen. Dies kann den Overhead und die Seitenladezeit reduzieren. Der Beispielcode lautet wie folgt:

import('/modules/my-module.js'). then(module => {
  // Etwas mit dem Modul machen.
})

Der dynamische Import verwendet import() , die ein Promise zurückgibt.

In ES2020 wird auch ein meta zu import hinzugefügt, das dem JavaScript-Modul ein Objekt mit kontextspezifischen Metadatenattributen verfügbar macht.

des BigInt-Datentyps

BigInt löst das Problem, dass die in JavaScript maximal zulässige Zahl 2**53-1 beträgt. BigInt kann jede große ganze Zahl darstellen.

const theBiggestInt = 9007199254740991n;
const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
const riesigString = BigInt("9007199254740991");
// ↪ 9007199254740991n
const riesigHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n
const riesigBin = BigInt("0b11111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

globalThis Objekt

Global globalThis in ES2020 eingeführt, was die Einführung globaler Objekte in Node darstellt. und die Browserumgebung ist Window ; Der folgende Code zeigt den Unterschied zwischen GlobalThis :

// vorher var getGlobal = function () { 
  if (typeof self !== 'undefiniert') { return self } 
  if (typeof window !== 'undefiniert') { return window } 
  if (typeof global !== 'undefiniert') { return global; 
  throw new Error('Globales Objekt konnte nicht gefunden werden'); 
}; 

var globals = getGlobal(); 

if (typeof globals.setTimeout !== 'function') { 
  // kein setTimeout in dieser Umgebung! 
}

// nach if (typeof globalThis.setTimeout !== 'function') {
  // kein setTimeout in dieser Umgebung!
}

Nullwert-Koaleszieroperator

Der Nullwert-Koaleszieroperator wird durch zwei Fragezeichen dargestellt. Dieser Operator ist ebenfalls ein logischer Operator, der dem logischen ODER-Operator ähnelt. Die Berechnungsregel lautet: Solange der linke Operand null oder undefined ist, wird der rechte Operand zurückgegeben, andernfalls wird der linke Operand zurückgegeben. Der logische ODER-Operator gibt nur dann den rechten Operanden zurück, wenn der linke Operand in boolean Typ konvertiert wird und false hat.

Der Beispielcode lautet wie folgt:

console.log(null ?? 10) // 10
console.log (undefiniert? 10) // 10
console.log (false? 10) // false

,

um Werte ohne Werte zuzuweisen

Code ist wie folgt:

VAR -Wert

// Wenn der Wertwert nicht null oder undefiniert ist, weisen Sie ihm einen Wert von 10 zu
Wert = Wert? 10
console.log (Wert) // 10it

ist zu beachten () dass der Null -Wert -Koalescing -Operator und logisch und logisch oder nicht gleichzeitig verwendet werden kann. Andernfalls wird eine Ausnahme ausgeworfen.

Optionaler Kettenbetreiber

Der optionale Kettenbetreiber wird verwendet, um den Wert eines Attributs tief in der Kette eines Objekts zu lesen. Attribut Aab , wir müssen zunächst sicherstellen, Aa A Aab .

Die Verwendung des optionalen Kettenbetreibers verursacht kein solches Problem undefind

var a = {}

(

(

aa?

// Wenn die methode obj.fun () vorhanden ist, wird sie direkt aufgerufen.
obj.fun?.a (

Promise.allSettled()

verspricht

ES2021 (ES12)

String.Prototype.ReplaceAll ()

(

) replaceAll() eine neue Zeichenfolge zurück.

const newstr = str.replaceall ('Brei', 'Woche')

(

Newstr) // Eine Schüssel

_

Separatoren.

(

1_0000_0000

) // Das Symbol 1000000

WeakRef

nur zum Lesen.

Verweise auf ein anderes Objekt.

Verheißung.Ante ()

Das neue Promise.any() Methode in ES2021 akzeptiert die gleichen Parameter wie Promise.any() promise.all() (Das heißt, alle Versprechen scheitern/ablehnen), ein gescheitertes Versprechen und eine Instanz des AggregateError -Typs werden zurückgegeben.

Logische Zuordnungsbetreiber

Einige neue Zuordnungsbetreiber wurden in ES2021 wie folgt hinzugefügt:

&&

=

• &&=
• ||=
• ??=

] = [wahr, falsch]
f1 && = 'Eine Schüssel mit Wochen' // gleichwertig zu Str = str && 'eine Schüssel von Wochen' '
f2 || = 'eine Schüssel mit Wochen' // gleichwertig zu Str = str || 'eine Schüssel von Wochen'
f3

?

Die Erweiterung der Klasse

ermöglicht es uns, Klassenmitglieder zu definieren , ohne sie im constructor in ES2022 zu definieren

.
  myname = 'Eine Schüssel Zhou'
}
/* Beide sind konsistent*/
Klasse C {
  Konstruktor() {
    myname = 'Eine Schüssel Zhou'
  }
}

Wenn ein Mitglied ohne Initialisierung deklariert wird, ist sein Standardwert undefiniert.

In ES2022 dürfen wir Variablen verwenden, die mit # als private Mitglieder der Klasse bezeichnet

werden

.

  #myname = 'One Bowl Week' '
}
const c = neu c ()

await

) // privates Feld '#myname' muss in einer umschließenden Klasse deklariert werden

.

Die obere Ebene ohne async Funktion

.
AwaitaSyncfun ()
console.log (

Object.hasOwn() )

Objekt

.
  Name: 'Eine Schüssel Zhou',
  Alter: 18,
}
console.log (Object.hasown (Person, 'Name')) // true
console.log (Object.hasown (Person, "Sex") // False

Array.Prototype.at ()

Die neue at() -Methode in ES2022, seine Funktion besteht darin, ein Mitglied des Arrays zu erhalten, und seine Parameter ist der Index ist der Index

Array

.

6]
console.log (arr.at (-1)) // 6
// Äquivalent zu arr [arr.Length - 1]

D Modifikator

exec() reguläre Ausdruck fügt einen A /d /d hinzu. Attribut, das verwendet wird, um den Startindexwert des Matching -Ergebniss in der ursprünglichen Zeichenfolge anzugeben.

Der Beispielcode lautet wie folgt:

const str = 'JavaScript'
const r = /a /d

const m = r.exec (str)
Konsole.Log (M.Inness [0]) // [1, 2]

ist am Ende geschrieben

.

Die Mind Map lautet wie folgt: