Show Menu

ES6 Grundlagen Cheat Sheet by

es6

ECMAScript - Javascript

Historie Namesg­ebung
Ecmascript wird seit etwa 1997 als Standard für Javascript und ähnliche Sprachen entwic­kelt. Die Versionen wurden einfach aufwärts nummeriert bis Ecmascript 6 welches dann nachtr­äglich in Ecmasc­rip­t2015 umbenannt wurde. Die aktuelle Bezeic­hnung für Ecmascript ist die mit Jahreszahl aber in der Praxis sind durchaus auch die alten Namen gebräu­chlich, welche sogar noch weiter gezählt werden wie Ecmascript 9 oder als Kurzform ES 9 beweißt.
Quelle: https:­//e­n.w­iki­ped­ia.o­rg­/wi­ki/­ECM­AScript

Brow­ser­kom­pat­ibi­lität und Transp­iler
Da es immer eine längere Zeit dauert bis die neuen Features einer neuen Ecmascript Version in allen Browsern umgesetzt ist, werden Transpiler benutzt um von der neuen Ecmascript Version auf die aktuell überall implem­ent­ierte Version zu überse­tzen. Transpiler sind uns aus der Compil­ert­echnik noch als Querüb­ers­etzer in Erinnerung welche eine Hochsp­rache in eine andere Hochsp­rache übersetzt haben, z.B. Oberon nach C damit Oberon auch für weitere Betrie­bss­ysteme bereit­ges­tellt werden konnte (fiktives Beispiel für Oberon). Die aktuelle Version wird dann vom echten Compiler (in Node.js oder Chrome Browser z.B. V8) in nativen OS Kode übersetzt.

ES6 - Feature: Spread­-Syntax

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"]

ES6 - Feature: Klassen

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.
 

ES6 - Feature: Pfeilf­unk­tionen

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

asynch / await

Es gelten folgende Regeln:

* await gibt immer ein aufgel­östes Promise zurück oder es wirft einen unbeha­ndelten Fehler
* await verpackt simple Werte ebenfalls in ein aufgel­östes Promise und gibt dieses zurück
* await wartet bis eine nachfo­lgende Promise aufgelöst wurde
* await ist nur innerhalb einer mit asynch markierten Funktion möglich
* asynch kennze­ichnet eine asynchrone Funktion

Eine Altern­ative zu await ist die Behandlung der Promis mittels then und catch. Nach Anwendung dieser Altern­ativen, wird keine Markierung der umschl­ieß­enden Funktion mit asynch mehr notwendig.

Download the ES6 Grundlagen Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/funthomas424242_es6-grundlagen.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Webcomponents - native Javscript Cheat Sheet
          ECMAScript 6 - ES6 Cheat Sheet

          More Cheat Sheets by FunThomas424242

          Erstellung Barrierefreiher Webseiten Cheat Sheet
          Notizen zu Typescript Cheat Sheet