In diesem Tutorial lernen Sie anhand von Beispielen JavaScript ES6 kennen.
JavaScript ES6 (auch als ECMAScript 2015 oder ECMAScript 6 bekannt ) ist die neuere Version von JavaScript, die 2015 eingeführt wurde.
ECMAScript ist der Standard, den die Programmiersprache JavaScript verwendet. ECMAScript enthält die Spezifikation, wie die Programmiersprache JavaScript funktionieren soll.
Dieses Tutorial enthält eine kurze Zusammenfassung der häufig verwendeten Funktionen von ES6, damit Sie schnell mit ES6 beginnen können.
JavaScript lassen
JavaScript letwird verwendet, um Variablen zu deklarieren. Bisher wurden Variablen mit dem varSchlüsselwort deklariert.
Um mehr über den Unterschied zwischen letund zu erfahren var, besuchen Sie JavaScript let vs var.
Die deklarierten Variablen verwenden letsind Block-scoped . Dies bedeutet, dass sie nur innerhalb eines bestimmten Blocks zugänglich sind. Beispielsweise,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript const
Die constAnweisung wird verwendet, um Konstanten in JavaScript zu deklarieren. Beispielsweise,
// name declared with const cannot be changed const name = 'Sara';
Einmal deklariert, können Sie den Wert einer constVariablen nicht mehr ändern .
JavaScript-Pfeilfunktion
In der ES6- Version können Sie mit Pfeilfunktionen Funktionsausdrücke erstellen. Zum Beispiel
diese Funktion
// function expression let x = function(x, y) ( return x * y; )
kann geschrieben werden als
// function expression using arrow function let x = (x, y) => x * y;
Weitere Informationen zu Pfeilfunktionen finden Sie unter JavaScript-Pfeilfunktion.
JavaScript-Klassen
Die JavaScript-Klasse wird zum Erstellen eines Objekts verwendet. Die Klasse ähnelt einer Konstruktorfunktion. Beispielsweise,
class Person ( constructor(name) ( this.name = name; ) )
Mit dem Schlüsselwort classwird eine Klasse erstellt. Die Eigenschaften werden in einer Konstruktorfunktion zugewiesen.
Jetzt können Sie ein Objekt erstellen. Beispielsweise,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Weitere Informationen zu Klassen finden Sie unter JavaScript-Klassen.
Standardparameterwerte
In der ES6-Version können Sie Standardwerte in den Funktionsparametern übergeben. Beispielsweise,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
Wenn Sie im obigen Beispiel den Parameter für nicht übergeben y, wird standardmäßig 5 benötigt .
Weitere Informationen zu Standardparametern finden Sie unter Standardparameter für JavaScript-Funktionen.
JavaScript-Vorlagenliterale
Das Vorlagenliteral hat es einfacher gemacht, Variablen in eine Zeichenfolge aufzunehmen. Zum Beispiel, bevor Sie tun mussten:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Dies kann mithilfe des Vorlagenliteral erreicht werden durch:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Weitere Informationen zu Vorlagenliteralen finden Sie unter JavaScript-Vorlagenliteral.
JavaScript-Destrukturierung
Die Destrukturierungssyntax erleichtert das Zuweisen von Werten zu einer neuen Variablen. Beispielsweise,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Unter Verwendung der ES6- Destructuring-Syntax kann der obige Code wie folgt geschrieben werden:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Weitere Informationen zur Destrukturierung finden Sie unter JavaScript-Destrukturierung.
JavaScript-Import und -Export
Sie können eine Funktion oder ein Programm exportieren und durch Importieren in einem anderen Programm verwenden. Dies hilft, wiederverwendbare Komponenten herzustellen. Wenn Sie beispielsweise zwei JavaScript-Dateien mit den Namen contact.js und home.js haben.
In der Datei contact.js können Sie die Funktion exportierencontact() :
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Wenn Sie die contact()Funktion dann in einer anderen Datei verwenden möchten , können Sie sie einfach importieren. Zum Beispiel in der Datei home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
JavaScript verspricht
Versprechen werden verwendet, um asynchrone Aufgaben zu erledigen. Beispielsweise,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Um mehr über Versprechen zu erfahren, besuchen Sie JavaScript-Versprechen.
JavaScript Rest Parameter und Spread Operator
Mit dem Parameter rest können Sie eine unbestimmte Anzahl von Argumenten als Array darstellen. Beispielsweise,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Sie übergeben die restlichen Argumente mithilfe der … Syntax. Daher der Name Rest Parameter .
Sie verwenden die Spread-Syntax, … um die Elemente in ein einzelnes Array zu kopieren. Beispielsweise,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Sowohl der Rest-Parameter als auch der Spread-Operator verwenden dieselbe Syntax. Der Spread-Operator wird jedoch mit Arrays (iterierbaren Werten) verwendet.
Weitere Informationen zum Spread-Operator finden Sie unter JavaScript-Spread-Operator.
