ES6 Grundlagen Cheat Sheet by FunThomas424242

Mit Hilfe der Spread Syntax lassen sich anstelle von kommaseparierten Argumentlisten einfach Teile eines oder auch ganze Arrays übergeben. 


Beispiele

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

Was sind Klassen
Das Schlüsselwort class gibt es seit ES6 (Ecmascript Version 6). Es handelt sich um syntaktischen Zucker durch den die class Syntax auf eine Funktion abgebildet wird. Also sind Klassen eigentlich nix weiter als Funktionen aber schöner lesbar. 

Anbei der Beweis:
'use strict';
class Foo{}
console.log(typeof Foo);
> function

Der Typ einer Klasse ist also eine Funktion und nicht wie erwartet eine Metaklasse. 

// Klassen definieren
class Person {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
 
  greet() {
    console.log('Hallo ' + this.firstname + ' ' + this.lastname);
  }
}

// Vererbung von Klassen
var john = new Person('John', 'Maier');
john.greet();

class Child extends Person {
  constructor(firstname, lastname, age) {
    super(firstname, lastname);

    this.age = age;
  }

  greet() {
    super.greet();
    console.log('Du bist ' + this.age + ' Jahre alt!');
  }
}

// Statische Methoden
class Child extends Person {
  static isTeenager(child) {
    if (child.age >= 10 && child.age <= 19) {
      return true;
    }
    return false;
  }
}

Achtung: Bei Klassen gibt es kein hoisting! Daraus folgt, die Benutzung einer nicht vorher definierten Klasse führt zum ReferenceError.

Alte Syntax
doSomething(function(result) {
  console.log('Das Ergebnis ist: ' + result);
});

Neue Syntax
doSomething(result => console.log('Das Ergebnis ist: ' + result));

Achtung: Semantischer Unterschied ist this! Während this sich bei der alten Syntax nur auf den Scope innerhalb der Funktion bezieht, bezieht sich this bei der neuen Syntax auf Dinge aus der Aufrufenden Umgebung der Funktion.
Quelle: https://www.ab-heute-programmieren.de/es2015-teil-2-pfeilfunktionen/


Beweis mit Plunker:

var test = {
  a : 10,
  b : [1, 2, 3],
  add : function() {
    this.b.forEach(function (b) {
      console.log(this.a + b);
    });
  }
}
 
test.add();

>NaN
>NaN
>NaN

var test = {
  a : 10,
  b : [1, 2, 3],
  add : function() {
    this.b.forEach(b => console.log(this.a + b));
  }
}
 
test.add();

>11
>12
>13