Über Front-End JavaScript ES6 Details

1. Einleitung

ES6 ist ein allgemeiner Begriff und bezeichnet den JavaScript Standard der nächsten Generation nach Version 5.1, der ES2015 , ES2016 und ES2017 umfasst.

Die neuen Funktionen von ES6 werden derzeit nur von einigen neueren Browserversionen unterstützt. Um sie in älteren Browserversionen auszuführen, müssen wir ES6 in ES5 konvertieren.

• Chrome : Ab Version 51 werden 97 % der neuen ES6-Funktionen unterstützt.
• Firefox : Ab Version 53 werden 97 % der neuen Funktionen von ES6 unterstützt.
• Safari : Version 10 und höher unterstützt 99 % der neuen Funktionen von ES6.
• IE : Edge 15 kann 96 % der neuen Funktionen von ES6 unterstützen. Edge 14 kann 93 % der neuen ES6-Funktionen unterstützen. (IE7~11 unterstützen ES6 grundsätzlich nicht)

1.1 Babel-Transcoder

Es ist ein weit verbreiteter ES6-Transpiler.

npm install --save-dev @babel/core

Konfigurationsdatei .babelrc

# Neueste Transkodierungsregeln $ npm install --save-dev @babel/preset-env

# Transkodierungsregeln reagieren$ npm install --save-dev @babel/preset-react
// Das Feld „presets“ legt die Transcodierungsregeln fest. Die offizielle Website bietet die folgenden Regelsätze, die Sie nach Bedarf installieren können.
  {
    "Voreinstellungen": [
      "@babel/env",
      „@babel/Voreinstellung-reagieren“
    ],
    "Plugins": []
  }

1.2 Füllwatte

Standardmäßig konvertiert Babel nur die neue JavaScript Syntax. Um die neue API zu unterstützen, müssen Sie außerdem mit polyfill einen Shim für die aktuelle Umgebung bereitstellen (das heißt, die vorherige Version verfügt nicht über einen Shim, Sie müssen also einen Patch anwenden).

Zum Beispiel: core-js und regenerator-runtime

$ npm install --save-dev core-js regenerator-runtime
importiere "core-js";
importiere "Regenerator-Laufzeit/Laufzeit";

2. let und const

2.1 let

In Bezug auf den Umfang hat ES5 nur einen globalen Umfang und einen Funktionsumfang. Mit let deklarierte Variablen sind nur innerhalb des Codeblocks gültig, in dem sie deklariert sind.

wenn(wahr){ lass a = 1; var b = 2 }
console.log(a) // Referenzfehler: a ist nicht definiert
console.log(b) // 2

Im folgenden Beispiel erwarten wir eine Ausgabe von 1, da nur eine globale Variable i vorhanden ist. Nach der Ausführung von for ist daher i=5 und der von der Funktion ausgegebene Wert ist immer 5.

var-Funktionen = [];
für (var i = 0; i < 5; i++) {
  funcs.push(Funktion () {
    konsole.log(i);
  });
}
Funktionen[1](); // 5

Lösung: Verwenden Sie für jede Iteration den lokalen Speicher für die Variable „i“ und schließen Sie den Bereich mit einem Abschluss.

var-Funktionen = [];
für (var i = 0; i < 5; i++) { 
    (Funktion () {
            var lokal = i
            funcs.push(Funktion () {
                konsole.log(lokal);
            });
        }
    )()
}
Funktionen[1](); // 1

Derselbe Effekt lässt sich durch die Verwendung let zum Deklarieren der Variable i erzielen.

2.2 konstant

const wird verwendet, um eine schreibgeschützte Konstante zu deklarieren. Muss initialisiert werden und kann nach der Zuweisung nicht mehr geändert werden. const deklarierte Variablen haben ebenfalls einen Blockbereich.

wenn (wahr) {
 Konstante PI = 3,141515926;
 PI = 66666 // TypeError: Zuweisung zur konstanten Variable.
}
console.log(PI) // ReferenceError: PI ist nicht definiert

const Deklarationsobjekt

const obj = {};
//Fügen Sie erfolgreich ein Attribut zu obj hinzu obj.name = 'hello';

// Wenn obj auf ein anderes Objekt zeigt, tritt ein Fehler auf obj = {}; // TypeError: „obj“ ist schreibgeschützt

3. Dekonstruktion

Dekonstruktion bedeutet wörtlich die Zerlegung der Struktur, also das Aufbrechen der ursprünglichen Struktur.

3.1 Objektdestrukturierung

Grundlegende Verwendung:

let { name, age } = { name: "hallo", alter: 12 };
console.log(Name, Alter) // hallo 12

Festlegen von Standardwerten

let { name = 'hi', age = 12 } = { name : 'hallo' };
console.log(Name, Alter) // hallo 12

Mit dem rest (in der Form ...Variablenname) können Sie aus einem Objekt beliebig viele Elemente auswählen oder sich ein Objekt bestehend aus den restlichen Elementen holen.

let { name, ...remaining } = { name: "hallo", alter: 12, geschlecht: '男' };
console.log(Name, verbleibend) // hallo {Alter: 12, Geschlecht: 'männlich'}

3.2 Array-Destrukturierung

Der rest (in der Form ...Variablenname) wählt eine beliebige Anzahl von Elementen aus einem Array aus oder ruft ein Array der verbleibenden Elemente ab.

sei [a, ...restlich] = [1, 2, 3, 4];
console.log(a, verbleibend) // 1 [2, 3, 4]

Einige Mitglieder werden bei der Destrukturierung des Arrays ignoriert.

sei [a, , ...restlich] = [1, 2, 3, 4];
console.log(a, verbleibend) // 1 [3, 4]

3.3 Destrukturierung von Funktionsparametern

Array-Parameter

Funktion addieren([x, y]){
  gib x + y zurück;
}
hinzufügen([1, 2]); // 3

Objektparameter

Funktion add({x, y} = { x: 0, y: 0 }) {
  gib x + y zurück;
}
füge hinzu({x:1,y:2});

3.4 Gängige Szenarien

Tauschen Sie Variablen aus, ohne die dritte Variable zu verwenden.

sei x = 1;
sei y = 2;

[x, y] = [y, x];

Extrahieren von JSON-Daten

lass json = {
  Code: 0,
  Daten: {Name: 'hi'}
};
let { Code, Daten: Benutzer } = json;
console.log(Code, Benutzer); // 0 {Name: 'hi'}

Durchlaufen der Kartenstruktur

const map = neue Map();
map.set('name', 'hallo');
map.set('Alter', 12);

für (let [Schlüssel, Wert] von Map) {
  console.log(Schlüssel + " ist " + Wert);
}

4. Verlängerung

4.1 String-Erweiterungen

Vorlagenzeichenfolge, das ist sehr nützlich. Verwenden Sie Backticks (`), um sie zu kennzeichnen. Es kann als normale Zeichenfolge verwendet werden oder zum Definieren mehrzeiliger Zeichenfolgen oder zum Einbetten von Variablen in Zeichenfolgen.

`Benutzer ${user.name} ist angemeldet…`);

4.2 Funktionserweiterung

ES6 ermöglicht das Festlegen von Standardwerten für Funktionsparameter, die direkt nach der Parameterdefinition geschrieben werden können.

Sobald die Standardwerte der Parameter festgelegt sind, bilden die Parameter einen separaten context (Kontext), wenn die Funktion deklariert und initialisiert wird. Wenn die Initialisierung abgeschlossen ist, verschwindet der Bereich. Dieses Syntaxverhalten tritt nicht auf, wenn der Standardwert des Parameters nicht festgelegt ist.

Funktion add(x, y = 1) {
 Rückgabewert x + y
}

Alternative zu apply()

// ES5-Version Math.max.apply(null, [1, 3, 2])

// ES6-Schreibweise von Math.max(...[1, 3, 2])

4.3 Array-Erweiterung

Arrays zusammenführen

// ES5-Schreibweise für var list = [1,2]
liste = liste.concat([3])

// ES6-Weg var list = [1,2]
Liste = [...Liste, 3]

Neue Array-API

Array.from(), Array.of(), find() und findIndex() usw., siehe MDN

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

4.4 Objekterweiterung

Objekteigenschaften, Methodenabkürzungen

Daten = [1,2]
const resp = {data}; // Attributabkürzung, entspricht {data: data}
const obj = {
  add(x, y) { // Methodenabkürzung, entspricht add: function(x, y){...}
    gib x + y zurück;
  }
};

Erweiterte Attribute

konstanter Punkt = {x: 1, y: 2}
const PunktD = {...Punkt, z: 3}
console.log(PunktD) // {x: 1, y: 2, z: 3}

// Bei sich wiederholenden Attributen auf die Reihenfolge achten.
konstanter Punkt = {x: 1, y: 2}
const PunktD = {...Punkt, x: 4, z: 3}
console.log(PunktD) // {x: 4, y: 2, z: 3}

konstanter Punkt = {x: 1, y: 2}
const PunktD = {x: 4, z: 3, ...Punkt}
console.log(PunktD) // {x: 1, z: 3, y: 2}

Das Beschreibungsobjekt der Eigenschaft

Jede Eigenschaft eines Objekts hat ein Descriptor , das das Verhalten der Eigenschaft steuert.

konstanter Punkt = {x: 1, y: 2}
Object.getOwnPropertyDescriptor(Punkt, 'x') 
/**
{ konfigurierbar: true
  enumerable: true // gibt den aufzählbaren Wert an: 1
 beschreibbar: true // bedeutet beschreibbar}
**/

Attributdurchquerung

• for...in Schleife: Durchläuft nur die eigenen und geerbten aufzählbaren Eigenschaften des Objekts.
• Object.keys() : Gibt die Schlüsselnamen aller aufzählbaren Eigenschaften des Objekts selbst zurück.
• JSON.stringify() : Serialisiert nur die aufzählbaren Eigenschaften des Objekts.
• Object.assign() : Ignorieren Sie Eigenschaften, deren enumerable false ist, und kopieren Sie nur die aufzählbaren Eigenschaften des Objekts.
  

konstanter Punkt = {x: 1, y: 2}
für (let-Eingabepunkt) {
  console.log(Schlüssel)
}

Einige neue Methoden von Objekten: Object.assign()

Object.assign() führt eine oberflächliche Kopie aus, keine tiefe Kopie. Das heißt, wenn der Wert einer Eigenschaft des Quellobjekts ein Objekt ist, dann kopiert das Zielobjekt eine Referenz auf dieses Objekt. Häufige Verwendungen:

Klonen eines Objekts

Funktion Klon(Ursprung) {
  returniere Object.assign({}, Ursprung);
}

Objekte zusammenführen

const merge = (Ziel, ...Quellen) => Object.assign(Ziel, ...Quellen);

Festlegen von Standardwerten

const DEFAULT_CONFIG = {
  debuggen: wahr,
};

Funktion Prozess (Optionen) {
  Optionen = Objekt.assign({}, DEFAULT_CONFIG, Optionen);
  console.log(Optionen);
  // ...
}

4.5 Operatorerweiterungen

Exponentialoperator

2 ** 10 // 1024
2 ** 3 ** 2 // 512 entspricht 2 ** (3 ** 2)

sei a=10; a **= 3; // entspricht a = a * a * a

Verkettungsoperatoren

obj?.prop bestimmt, ob eine Objekteigenschaft vorhanden ist, func?.(...args) bestimmt, ob eine Funktion oder Objektmethode vorhanden ist.

const obj = {name: 'job', say(){console.log('hallo')}}
obj?.name // ist gleich obj == null ? undefiniert : obj.name
obj?.say() // ist gleich obj == null ? undefiniert : obj.say()

Nullprüfoperator

In JavaScript verwenden wir den Operator ||, um Standardwerte anzugeben. Wenn der Standardwert nur ausgelöst werden soll, wenn die linke Seite null oder undefined ist, verwenden Sie ??.

const obj = {name: ''}
obj.name || 'hallo' // 'hallo'
obj.name ?? 'hallo' // ''

5. für … von

Da for...in Schleife hauptsächlich zum Durchlaufen von Objekten konzipiert ist und die Schlüssel des Arrays Zahlen sind, gibt sie beim Durchlaufen des Arrays Zahlen zurück. Dies kann den Entwicklungsanforderungen offensichtlich nicht gerecht werden. Die Verwendung for...of kann dieses Problem lösen.

Konstante Liste = ['a', 'b', 'c']
für (lass v in Liste) {
  console.log(v) // 0,1,2
}
für (sei v der Liste){
  console.log(v) // a,b,c
}

6. Zusammenfassung

Dies ist das Ende dieses Artikels über die Details von Front-End JavaScript ES6. Weitere relevante Inhalte zu JavaScript ES6 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!