JavaScript ES6

Was ist ECMAScript 6?}

ECMAScript 6 wird auch ES6 und ECMAScript 2015 genannt.

Einige nennen es JavaScript 6.

Dieses Kapitel stellt einige neue Funktionen von ES6 vor.

  • JavaScript let
  • JavaScript const
  • Potenzoperator (**)
  • Standardparameterwerte
  • Array.find()
  • Array.findIndex()

Browser-Unterstützung für ES6 (ECMAScript 2015)

Safari 10 und Edge 14 sind die ersten Browser, die ES6 vollständig unterstützen:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018

JavaScript let

Das let Statement ermöglicht es Ihnen, Variablen im Blockbereich zu deklarieren.

Beispiel

var x = 10;
// Hier ist x 10
{ 
  let x = 2;
  // Hier ist x 2
}
// Hier ist x 10

Probieren Sie es selbst aus

JavaScript const

const Der Statement ermöglicht es Ihnen, Konstanten (JavaScript-Variablen mit konstanten Werten) zu deklarieren.

Konstanten sind ähnlich wie let Variablen, deren Wert aber nicht geändert werden kann.

Beispiel

var x = 10;
// Hier ist x 10
{ 
  const x = 2;
  // Hier ist x 2
}
// Hier ist x 10

Probieren Sie es selbst aus

Bitte lesen Sie in unseren JavaScript Let / Const Mehr über let und const Inhalt.

Exponentenoperator

Der Potenzoperator (**）erhebt den ersten Operanden zur Potenz des zweiten Operanden.

Beispiel

var x = 5;
var z = x ** 2;          // das Ergebnis ist 25

Probieren Sie es selbst aus

x ** y Das Ergebnis entspricht Math.pow(x,y) Gleiches gilt für:

Beispiel

var x = 5;
var z = Math.pow(x,2);   // das Ergebnis ist 25

Probieren Sie es selbst aus

Standardparameterwerte

ES6 Funktion参数可以具有默认值。

Beispiel

function myFunction(x, y = 10) {
  // y ist 10, wenn nicht übergeben oder undefined
  return x + y;
}
myFunction(5); // wird 15 zurückgeben

Probieren Sie es selbst aus

Array.find()

find() Die Methode gibt den Wert des ersten Elements des Arrays zurück, das durch die Testfunktion erfüllt.

In diesem Beispiel wird der erste Elementwert (der Wert) gesucht (zurückgegeben), der größer als 18 ist:

Beispiel

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

Probieren Sie es selbst aus

Bitte beachten Sie, dass diese Funktion 3 Parameter annimmt：

  • Der Wert des Elements
  • Der Index des Elements
  • Das Array selbst

Array.findIndex()

findIndex() Die Methode gibt den Index des ersten Elements des Arrays zurück, das durch die Testfunktion erfüllt.

Dieser Beispielcode bestimmt den Index des ersten Elements, das größer als 18 ist：

Beispiel

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

Probieren Sie es selbst aus

Bitte beachten Sie, dass diese Funktion 3 Parameter annimmt：

  • Der Wert des Elements
  • Der Index des Elements
  • Das Array selbst

Neue numerische Eigenschaften

ES6 hat die folgenden Eigenschaften zum Number-Objekt hinzugefügt：

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

Beispiel

var x = Number.EPSILON;

Probieren Sie es selbst aus

Beispiel

var x = Number.MIN_SAFE_INTEGER;

Probieren Sie es selbst aus

Beispiel

var x = Number.MAX_SAFE_INTEGER;

Probieren Sie es selbst aus

Neue Numerische Methoden

ES6 hat 2 neue Methoden für das Number-Objekt hinzugefügt：

  • Number.isInteger()
  • Number.isSafeInteger()

Die Methode Number.isInteger()

Wenn der Parameter ein Integer ist, dann Number.isInteger() Das Methode gibt zurück true.

Beispiel

Number.isInteger(10);        // Rückgabewert true
Number.isInteger(10.5);      // Rückgabewert false

Probieren Sie es selbst aus

Die Methode Number.isSafeInteger()

Sichere Integer sind Integer, die präzise als Double-Wert dargestellt werden können.

Wenn der Parameter ein sicherer Integer ist, dann Number.isSafeInteger() Das Methode gibt zurück true.

Beispiel

Number.isSafeInteger(10);    // Rückgabewert true
Number.isSafeInteger(12345678901234567890);  // Rückgabewert false

Probieren Sie es selbst aus

Sichere Integer sind alle Integer von -(253 - 1) bis +(253 - 1).

Das ist sicher: 9007199254740991. Das ist unsicher: 9007199254740992.

Neue globale Methoden

ES6 hat auch 2 neue globale Nummermethoden hinzugefügt：

  • isFinite()
  • isNaN()

Die Methode isFinite()

Wenn der Parameter ist Infinity oder NaN, dann global isFinite() Die Methode gibt false zurück。

Sonst wird true zurückgegeben：

Beispiel

isFinite(10/0);       // Rückgabewert false
isFinite(10/1);       // Rückgabewert true

Probieren Sie es selbst aus

Die Methode isNaN()

Wenn der Parameter ist NaN, dann global isNaN() Das Methode gibt zurück true. Andernfalls wird false:

Beispiel

isNaN("Hello");       // gibt true zurück

Probieren Sie es selbst aus

Pfeilfunktion (Arrow Function)

Pfeilfunktionen erlauben es, Funktionsausdrücke mit einer kurzen Syntax zu schreiben.

Sie benötigen nicht function Schlüsselwörter,return Schlüsselwörter undKlammern.

Beispiel

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

Probieren Sie es selbst aus

Pfeilfunktionen haben keine eigene this. Sie sind nicht geeignet, umObjektmethoden.

Pfeilfunktionen werden nicht aufgewertet. Sie müssen in der Nähe vonvorum zu definieren.

verwenden const vergleichen var sicherer, weil Funktionsausdrücke immer konstanten Wert sind.

Wenn die Funktion nur ein einziges Statement ist, kann sie weggelassen werden return Schlüsselwörter und Klammern. Daher könnte es eine gute Gewohnheit sein, sie zu behalten:

Beispiel

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

Probieren Sie es selbst aus