JavaScript ES6

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

ECMAScript 2015 war die zweite große Überarbeitung von JavaScript.

ECMAScript 2015 ist auch als ES6 und ECMAScript 6 bekannt.

In diesem Kapitel werden die wichtigsten Funktionen von ES6 beschrieben.

Neue Funktionen in ES6

  • Das let-Schlüsselwort

  • Das const-Schlüsselwort

  • Pfeilfunktionen

  • Der ... Operator

  • Für/von

  • Kartenobjekte

  • Objekte festlegen

  • Klassen

  • Versprechen

  • Symbol

  • Standardparameter

  • Funktionsrestparameter

  • String.includes()

  • String.startsWith()

  • String.endsWith()

  • Array.from()

  • Array-Schlüssel()

  • Array find()

  • Array findIndex()

  • Neue mathematische Methoden

  • Neue Nummerneigenschaften

  • Neue Zahlenmethoden

  • Neue globale Methoden

  • Objekteinträ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 let

Mit dem Schlüsselwort let können Sie eine Variable mit deklarieren Blockbereich.

Beispiel

var x = 10;
// Here x is 10
{ 
  let x = 2;
    // Here x is 2
}
// Here x is 10

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Lesen Sie mehr über let im Kapitel: JavaScript Let.

JavaScript-Konst

Mit dem Schlüsselwort const können Sie eine Konstante deklarieren (a JavaScript-Variable mit einem konstanten Wert).

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using const</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Lesen Sie mehr über const im Kapitel: JavaScript Const.

Pfeilfunktionen

Pfeilfunktionen ermöglichen eine kurze Syntax zum Schreiben von Funktionsausdrücken.

Sie benötigen nicht das Schlüsselwort function, das Schlüsselwort return und das geschweifte Klammern.

Beispiel

// ES5
var x = function(x, y) {
     
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Pfeilfunktionen haben keinen eigenen dies. Sie eignen sich nicht gut zum Definieren von Objektmethoden.

Pfeilfunktionen sind nicht aktiviert. Sie müssen vor ihrer Verwendung definiert werden.

Verwenden von const ist sicherer als die Verwendung von var, da dies bei einem Funktionsausdruck der Fall ist immer ein konstanter Wert.

Sie können das Schlüsselwort return und die geschweiften Klammern nur weglassen, wenn es sich bei der Funktion um eine einzelne Anweisung handelt. Aus diesem Grund könnte es eine gute Angewohnheit sein, sie immer zu behalten:

Beispiel

const x = (x, y) => { return x * y };

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Erfahren Sie mehr über Pfeilfunktionen im Kapitel: JavaScript-Pfeilfunktion.

Der Spread (...)-Operator

Der ...-Operator erweitert ein Iterable (wie ein Array) in weitere Elemente:

Beispiel

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

<p id="demo"></p>

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

Der ...-Operator kann verwendet werden, um eine Iterable in weitere Argumente für Funktionsaufrufe zu erweitern:

Beispiel

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "Spread" operator can be used to expand an iterable into more arguments for function calls:</p>

<p id="demo"></p>

<script>
const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

document.getElementById("demo").innerHTML = maxValue; 
</script>

</body>
</html>

Die For/Of-Schleife

Die JavaScript-Anweisung for/of führt eine Schleife aus durch die Werte eines iterierbaren Objekts.

Mit for/of können Sie Datenstrukturen durchlaufen die iterierbar sind, wie Arrays, Strings, Maps, NodeLists und mehr.

Die for/of-Schleife hat die folgende Syntax:

for (variable of iterable) {
      // code block to be executed
}

Variable - Für jede Iteration ist der Wert der nächsten Eigenschaft der Variablen zugewiesen. Variable kann mit deklariert werden const, let oder var.

iterable - Ein Objekt mit iterierbaren Eigenschaften.

Schleife über ein Array

Beispiel

const cars = ["BMW", "Volvo", "Mini"];
let text = "";

for (let x of cars) {
  text += x + " ";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>
<p>The for of statement loops through the values of any iterable object:</p>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Schleife über einen String

Beispiel

let language = "JavaScript";
let text = "";


for (let x of language) {
  
  text += x + " ";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>

<p>The for of statement loops through the values of an iterable object.</p>

<p id="demo"></p>

<script>
let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Erfahren Sie mehr im Kapitel: JavaScript-Schleife For/In/Of.

JavaScript-Karten

Die Möglichkeit, ein Objekt als Schlüssel zu verwenden, ist eine wichtige Kartenfunktion.

Beispiel

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Erfahren Sie mehr über Map-Objekte und den Unterschied zwischen einer Map und einem Array im Kapitel: JavaScript-Maps.

JavaScript-Sets

Beispiel

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Erfahren Sie mehr über Set-Objekte im Kapitel: JavaScript-Sets.

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 constructor() hinzu:

Syntax

class ClassName {
   constructor() { ... }
}

Beispiel

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Das obige Beispiel erstellt eine Klasse mit dem Namen „Car“.

Die Klasse verfügt über zwei Anfangseigenschaften: „name“ und „year“.

Eine JavaScript-Klasse ist kein ein Objekt.

Es ist eine Vorlage für JavaScript-Objekte.

Verwenden einer Klasse

Wenn Sie eine Klasse haben, können Sie diese zum Erstellen von Objekten verwenden:

Beispiel

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

Erfahren Sie mehr über Klassen im Kapitel: JavaScript-Klassen.

JavaScript-Versprechen

Ein Promise ist ein JavaScript-Objekt, das „Code produzieren“ und „Code konsumieren“ verknüpft.

„Code produzieren“ kann einige Zeit dauern und „Code konsumieren“ 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 für die Verwendung eines Versprechens

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

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 Code eines Drittanbieters gehört, Sie könnten die Werte des anderen vermischen.

Die Verwendung von Symbol() zum Erstellen eindeutiger Bezeichner 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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Using JavaScript Symbol()</h2>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;

document.getElementById("demo").innerHTML = person[id] + " " + person.id;
</script>

</body>
</html>

Notiz

Symbole sind immer einzigartig.

Wenn Sie zwei Symbole mit derselben Beschreibung erstellen, haben diese unterschiedliche Werte:

Symbol("id") == Symbol("id"); // false

Standardparameterwerte

ES6 ermöglicht, 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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Default Parameter Values</h2>
<p>If y is not passed or undefined, then y = 10:</p>

<p id="demo"></p>

<script>
function myFunction(x, y = 10) {
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>

Funktionsrestparameter

Der rest-Parameter (...) ermöglicht einer Funktion, eine unbegrenzte 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);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Rest Parameter</h2>

<p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:</p>

<p id="demo"></p>

<script>
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);

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

String.includes()

Die Methode includes() gibt true zurück, wenn eine Zeichenfolge einen angegebenen Wert enthält. andernfalls false:

Beispiel

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

String.startsWith()

Die Methode startsWith() gibt true zurück wenn eine Zeichenfolge mit einem angegebenen Wert beginnt, andernfalls false:

Beispiel

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // Returns true

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

String.endsWith()

Die Methode endsWith() gibt true zurück wenn eine Zeichenfolge mit einem angegebenen Wert endet, andernfalls false:

Beispiel

var text = "John Doe";
text.endsWith("Doe")    // Returns true

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Array.from()

Die Methode Array.from() gibt ein Array-Objekt von jedem Objekt mit einer Länge zurück Eigenschaft oder ein beliebiges iterierbares Objekt.

Beispiel

Erstellen Sie ein Array aus einem String:

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>

<p>Return an array object from any object with a length property or any iterable object.</p>

<p id="demo"></p>

<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

Array-Schlüssel()

Die Methode keys() gibt ein Array-Iterator-Objekt mit den Schlüsseln eines Arrays zurück.

Beispiel

Erstellen Sie ein Array-Iterator-Objekt, das die Schlüssel des Arrays enthält:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>

<p>Return an Array Iterator object with the keys of the array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

Array find()

Die Methode find() gibt den Wert des ersten Array-Elements zurück, das a übergibt Testfunktion.

In diesem Beispiel wird das erste Element gefunden (gibt den Wert von zurück), das größer ist als 18:

Beispiel

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.find(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Beachten Sie, dass die Funktion drei Argumente benötigt:

  • Der Artikelwert

  • Der Artikelindex

  • Das Array selbst

Array findIndex()

Die Methode findIndex() gibt den Index des ersten Array-Elements zurück, das besteht eine Testfunktion.

In diesem Beispiel wird der Index des ersten Elements ermittelt, das größer als 18 ist:

Beispiel

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.findIndex(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Beachten Sie, dass die Funktion drei Argumente benötigt:

  • Der Artikelwert

  • Der Artikelindex

  • Das Array selbst

Neue mathematische Methoden

ES6 hat dem Math-Objekt die folgenden Methoden hinzugefügt:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()

Die Math.trunc()-Methode

Math.trunc(x) gibt den ganzzahligen Teil von x zurück:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.trunc()</h2>

<p>Math.trunc(x) returns the integer part of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.trunc(4.7);
</script>

</body>
</html>

Die Math.sign()-Methode

Math.sign(x) gibt zurück, wenn x negativ, null oder positiv ist:

Beispiel

Math.sign(-4);    // returns -1
Math.sign(0);    // returns 0
Math.sign(4);    // returns 1

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.sign()</h2>

<p>Math.sign(x) returns if x is negative, null or positive:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.sign(4);
</script>

</body>
</html>

Die Math.cbrt()-Methode

Math.cbrt(x) gibt die Kubikwurzel von x zurück:

Beispiel

Math.cbrt(8);    // returns 2
Math.cbrt(64);    // returns 4
Math.cbrt(125);    // returns 5

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.cbrt()</h2>

<p>Math.cbrt(x) returns the cube root of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.cbrt(8);
</script>

</body>
</html>

Die Math.log2()-Methode

Math.log2(x) gibt den Logarithmus zur Basis 2 von x zurück:

Beispiel

Math.log2(2);    // returns 1

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log2()</h2>

<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log2(8);
</script>

</body>
</html>

Die Math.log10()-Methode

Math.log10(x) gibt den Logarithmus zur Basis 10 von x zurück:

Beispiel

Math.log10(10);    // returns 1

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log10()</h2>

<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log10(1000);
</script>

</body>
</html>

Neue Nummerneigenschaften

ES6 hat dem Number-Objekt die folgenden Eigenschaften hinzugefügt:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

EPSILON-Beispiel

let x = Number.EPSILON;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>EPSILON</p>

<p id="demo"></p>

<script>
let x = Number.EPSILON;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

MIN_SAFE_INTEGER Beispiel

let x = Number.MIN_SAFE_INTEGER;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MIN_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MIN_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

MAX_SAFE_INTEGER Beispiel

let x = Number.MAX_SAFE_INTEGER;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MAX_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MAX_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Neue Zahlenmethoden

ES6 hat dem Number-Objekt zwei neue Methoden hinzugefügt:

  • Number.isInteger()

  • Number.isSafeInteger()

Die Number.isInteger()-Methode

Die Methode Number.isInteger() gibt true zurück, wenn das Argument eine Ganzzahl ist.

Beispiel

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isInteger() Method</h2>

<p>The isInteger() method returns true if the argument is an integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>

Die Number.isSafeInteger()-Methode

Eine sichere Ganzzahl ist eine Ganzzahl, die genau als Zahl mit doppelter Genauigkeit dargestellt werden kann.

Die Methode Number.isSafeInteger() gibt true zurück, wenn das Argument eine sichere Ganzzahl ist.

Beispiel

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isSafeInteger() Method</h2>

<p>The isSafeInteger() method returns true if the argument is a safe integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>

Sichere Ganzzahlen sind alle Ganzzahlen von -(253 - 1) bis +(253 - 1).
Dies ist sicher: 9007199254740991. Dies ist nicht sicher: 9007199254740992.

Neue globale Methoden

ES6 hat zwei neue globale Zahlenmethoden hinzugefügt:

  • isFinite()

  • isNaN()

Die isFinite()-Methode

Die globale Methode isFinite() gibt false zurück, wenn das Argument ist Unendlich oder NaN.

Andernfalls wird true zurückgegeben:

Beispiel

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isFinite() Method</h2>

<p>The isFinite() method returns false if the argument is Infinity or NaN.</p>
<p>Otherwise it returns true.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>

Die isNaN()-Methode

Die globale Methode isNaN() gibt true zurück, wenn das Argument ist NaN. Andernfalls wird false zurückgegeben:

Beispiel

isNaN("Hello");       // returns true

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isNaN() Method</h2>

<p>The isNan() method returns true if the argument is NaN. Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>

Objekteinträge()

Beispiel

Erstellen Sie einen Array-Iterator und iterieren Sie dann über die Schlüssel/Wert-Paare:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

Die Methode entries() gibt ein Array-Iterator-Objekt mit Schlüssel/Wert-Paaren zurück:

[0, „Banane“]
[1, „Orange“]
[2, „Apfel“]
[3, „Mango“]

Die Methode entries() ändert das ursprüngliche Array nicht.

Module

Module werden auf zwei verschiedene Arten importiert:

Import aus benannten Exporten

Benannte Exporte aus der Datei person.js importieren:

import { name, age } from "./person.js";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Import aus Standardexporten

Importieren Sie einen Standardexport aus der Datei message.js:

import message from "./message.js";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Erfahren Sie mehr über Module unter: JavaScript-Module.