ECMAScript 6 oder ES6 ist die neueste Version von JavaScript und bringt tolle neue Features mit. Dieser Artikel ist nun der zweite Teil, der sich mit einigen dieser Features auseinandersetzt. Teil 1 findest du unter folgendem Link: ECMAScript 6 Teil 1

Übersicht

• Math
• Spread Operator
• Destructuring
• Parameters
• Klassen

Math

Ein paar neue Methoden sind zum Math Objekt hinzugekommen

• Math.sign: gibt das Vorzeigen einer Nummer als 1, -1 oder 0 aus.
• Math.trunc: gibt die Zahl ohne Nachkommerstellen zurück
• Math.cbrt: gibt die Kubikwurzel der Zahl zurück

Math.sign(5); // 1
Math.sign(-9); // -1

Math.trunc(5.9); // 5
Math.trunc(5.123); // 5

Math.cbrt(64); // 4

Spread Operator

Der Spread Operator (…) ist eine Syntax, um Elemente eines Arrays in speziellen Orten, wie zum Beispiel bei Argumenten in Funktionsaufrufen, zu erweitern.
So erweiterte man Elemente eines Arrays innerhalb eines anderen Arrays:

let values = [1, 2, 4];
let some = [...values, 8]; // [1, 2, 4, 8]
let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]

// ES5 equivalent:
let values = [1, 2, 4];
// Iterate, push, sweat, repeat...
// Iterate, push, sweat, repeat...

Diese Syntax ist auch bei Funktionsaufrufen mit Argumenten sehr nützlich

let values = [1, 2, 4];

doSomething(...values);

function doSomething(x, y, z) {
   // x = 1, y = 2, z = 4
}

// ES5 equivalent:
doSomething.apply(null, values);

Bislang wurden Beispiele gezeigt, bei dem der Spread Operator bei Arrays und Argumenten angewendet wurde. Allerdings kann er bei allen zählbaren Objekten wie zum Beispiel NodeList verwendet werden.

let form = document.querySelector('#my-form'),
   inputs = form.querySelectorAll('input'),
   selects = form.querySelectorAll('select');

let allTheThings = [form, ...inputs, ...selects];

Nun ist allTheThings ein Array, das sowohl das <form> Element als auch ihre Kindelemente <input> und <select> beinhaltet.

Destructuring

Destructuring bietet eine bequeme Möglichkeit, um Daten von Objekten oder Arrays zu extrahieren.

let [x, y] = [1, 2]; // x = 1, y = 2

// ES5 equivalent:
var arr = [1, 2];
var x = arr[0];
var y = arr[1];

Mit dieser Syntax können mehreren Variablen ein Value in einem Schritt zugeordnet werden. Ein schöner Nebeneffekt ist, dass man leicht Values der Variablen tauschen kann:

let x = 1,
   y = 2;

[x, y] = [y, x]; // x = 2, y = 1

Das Ganze funktioniert ebenfalls mit Objekten

let obj = {x: 1, y: 2};
let {x, y} = obj; // x = 1, y = 2

Es können auch mehrere Return-Values simuliert werden:

function doSomething() {
   return [1, 2]
}

let [x, y] = doSomething(); // x = 1, y = 2

Parameters

Default Values

In ES6 ist die Definierung von Default Values für Funktionsparameter möglich.

function doSomething(x, y = 2) {
   return x * y;
}

doSomething(5); // 10
doSomething(5, undefined); // 10
doSomething(5, 3); // 15

Der Default Value wird genommen, sobald entweder undefined oder kein Argument übergeben wurde.

Rest Parameters

Rest Parameters sind dem spread operator sehr ähnlich. Sie verwenden ebenfalls die … syntax und ermöglicht, nachkommende Argumente zu speichern.

function doSomething(x, ...remaining) {
   return x * remaining.length;
}

doSomething(5, 0, 0, 0); // 15

Klassen

Klassen sind ab sofort ein Teil von ES6. Sie werden mit den Keywords class und constructor gebaut:

class Vehicle {
   constructor(name) {
      this.name = name;
      this.kind = 'vehicle';
   }	
   getName() {
      return this.name;
   }   
}

// Create an instance
let myVehicle = new Vehicle('rocky');

Um eine Instanz von einer Klasse zu kreieren, wird das Keyword new verwendet. Um von einer Klasse zu erben, das Keyword extends:

class Car extends Vehicle {
   constructor(name) {
      super(name);
      this.kind = 'car'
   }		
}

let myCar = new Car('bumpy');

myCar.getName(); // 'bumpy'
myCar instanceof Car; // true
myCar instanceof Vehicle; //true