Javascript ES6
ECMAScript 2015 war die zweite große Überarbeitung von JavaScript.
ECMAScript 2015 ist auch als ES6 und ECMAScript 6 bekannt.
Dieses Kapitel beschreibt die wichtigsten Funktionen von ES6.
Neue Funktionen in ES6
- Das Let-Schlüsselwort
- Das const-Schlüsselwort
- Pfeilfunktionen
- Für/von
- Kartenobjekte
- Objekte setzen
- Klassen
- Versprechen
- Symbol
- Standardparameter
- Funktion Ruheparameter
- String.includes()
- String.startsWith()
- String.endsWith()
- Array.from()
- Array-Schlüssel ()
- Array find()
- Array findIndex()
- Neue mathematische Methoden
- Neue Zahleneigenschaften
- Neue Zahlenmethoden
- Neue globale Methoden
- Iterables Objekt.Einträge
- JavaScript-Module
Browserunterstützung für ES6 (2015)
Safari 10 und Edge 14 waren die ersten Browser, die ES6 vollständig unterstützten:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript lassen
Mit dem letSchlüsselwort können Sie eine Variable mit Blockbereich deklarieren.
Beispiel
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Lesen Sie mehr dazu letim Kapitel: JavaScript Let .
JavaScript-Konstante
Mit dem constSchlüsselwort können Sie eine Konstante (eine JavaScript-Variable mit einem konstanten Wert) deklarieren.
Konstanten ähneln let-Variablen, außer dass der Wert nicht geändert werden kann.
Beispiel
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Lesen Sie mehr dazu constim Kapitel: JavaScript Const .
Pfeilfunktionen
Pfeilfunktionen ermöglichen eine kurze Syntax zum Schreiben von Funktionsausdrücken.
Sie brauchen das functionSchlüsselwort, das returnSchlüsselwort und die
geschweiften Klammern nicht .
Beispiel
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Pfeilfunktionen haben keine eigenen this. Sie eignen sich nicht gut zum Definieren von Objektmethoden .
Pfeilfunktionen werden nicht gehisst. Sie müssen vor ihrer Verwendung definiert werden.
Die Verwendung const
ist sicherer als die Verwendung von var, da ein Funktionsausdruck immer ein konstanter Wert ist.
Sie können das Schlüsselwort und die geschweiften Klammern nur weglassen, returnwenn die Funktion eine einzelne Anweisung ist. Aus diesem Grund könnte es eine gute Angewohnheit sein, sie immer beizubehalten:
Beispiel
const x = (x, y) => { return x * y };
Erfahren Sie mehr über Pfeilfunktionen im Kapitel: JavaScript-Pfeilfunktion .
Die For/Of-Schleife
Die JavaScript for/of-Anweisung durchläuft die Werte eines iterierbaren Objekts.
for/of können Sie iterierbare Datenstrukturen wie Arrays, Strings, Maps, NodeLists und mehr durchlaufen.
Die for/ofSchleife hat folgende Syntax:
for (variable of iterable) {
// code block to be executed
}
Variable - Bei jeder Iteration wird der Variablen der Wert der nächsten Eigenschaft zugewiesen. Variablen können mit
const, let, oder deklariert werden var.
iterable – Ein Objekt mit iterierbaren Eigenschaften.
Looping über ein Array
Beispiel
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Looping über einen String
Beispiel
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Erfahren Sie mehr im Kapitel: JavaScript Loop For/In/Of .
JavaScript-Kartenobjekte
Die Möglichkeit, ein Objekt als Schlüssel zu verwenden, ist eine wichtige Kartenfunktion.
Beispiel
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Erfahren Sie mehr über Map-Objekte im Kapitel: JavaScript Map() .
JavaScript-Set-Objekte
Beispiel
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Erfahren Sie mehr über Set-Objekte im Kapitel: JavaScript Set() .
JavaScript-Klassen
JavaScript-Klassen sind Vorlagen für JavaScript-Objekte.
Verwenden Sie das Schlüsselwort class, um eine Klasse zu erstellen.
Fügen Sie immer eine Methode mit dem Namen hinzu constructor():
Syntax
class ClassName {
constructor() { ... }
}
Beispiel
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Das obige Beispiel erstellt eine Klasse namens "Car".
Die Klasse hat zwei anfängliche Eigenschaften: "Name" und "Jahr".
Eine JavaScript-Klasse ist kein Objekt.
Es ist eine Vorlage für JavaScript-Objekte.
Verwenden einer Klasse
Wenn Sie eine Klasse haben, können Sie die Klasse verwenden, um Objekte zu erstellen:
Beispiel
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Erfahren Sie mehr über Klassen im Kapitel: JavaScript-Klassen .
JavaScript verspricht
Ein Promise ist ein JavaScript-Objekt, das „Producing Code“ und „Consuming Code“ verknüpft.
"Producing Code" kann einige Zeit dauern und "Consuming Code" muss auf das Ergebnis warten.
Promise-Syntax
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Beispiel mit einem Promise
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Erfahren Sie mehr über Promises im Kapitel: JavaScript Promises .
Der Symboltyp
Ein JavaScript-Symbol ist ein primitiver Datentyp, genau wie Number, String oder Boolean.
Es stellt eine eindeutige "versteckte" Kennung dar, auf die kein anderer Code versehentlich zugreifen kann.
Wenn beispielsweise verschiedene Programmierer eine person.id-Eigenschaft zu einem Personenobjekt hinzufügen möchten, das zu einem Drittanbietercode gehört, könnten sie die Werte der anderen mischen.
Die Verwendung von Symbol() zum Erstellen einer eindeutigen Kennung löst dieses Problem:
Beispiel
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
Symbole sind immer eindeutig.
Wenn Sie zwei Symbole mit derselben Beschreibung erstellen, haben sie unterschiedliche Werte.
Symbol("id") == Symbol("id") // false
Standardparameterwerte
ES6 lässt zu, dass Funktionsparameter Standardwerte haben.
Beispiel
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Funktion Ruheparameter
Der rest-Parameter (...) ermöglicht es einer Funktion, eine unbestimmte Anzahl von Argumenten als Array zu behandeln:
Beispiel
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
String.includes()
Die includes()Methode gibt zurück, truewenn eine Zeichenfolge einen angegebenen Wert enthält, andernfalls false:
Beispiel
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith()
Die startsWith()Methode gibt zurück, true
wenn eine Zeichenfolge mit einem bestimmten Wert beginnt, andernfalls false:
Beispiel
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
Die endsWith()Methode gibt zurück, true
wenn eine Zeichenfolge mit einem bestimmten Wert endet, andernfalls false:
Beispiel
var text = "John Doe";
text.endsWith("Doe") // Returns true
Array.from()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true