es6features

ECMAScript 6 ^{git.io/es6features}

Einführung

ECMAScript 6, auch bekannt als ECMAScript 2015, ist die neueste Version des ECMAScript-Standards. ES6 ist ein bedeutendes Update der Sprache und das erste Update der Sprache seit der Standardisierung von ES5 im Jahr 2009. Die Implementierung dieser Funktionen in wichtigen JavaScript-Engines ist derzeit im Gange.

Die vollständige Spezifikation der ECMAScript 6-Sprache finden Sie im ES6-Standard.

ES6 enthält die folgenden neuen Funktionen:

• Pfeile
• Klassen
• erweiterte Objektliterale
• Vorlagenzeichenfolgen
• zerstörend
• Standard + Rest + Spread
• sei + const
• Iteratoren + for..of
• Generatoren
• Unicode
• Module
• Modullader
• Karte + Set + Weakmap + Weakset
• Proxys
• Symbole
• Unterklassierbare Einbauten
• verspricht
• Mathematik + Zahl + Zeichenfolge + Array + Objekt-APIs
• binäre und oktale Literale
• API reflektieren
• Schwanzrufe

ECMAScript 6-Funktionen

Pfeile

Pfeile sind eine Funktionskurzschrift mit der Syntax => . Sie ähneln syntaktisch der entsprechenden Funktion in C#, Java 8 und CoffeeScript. Sie unterstützen sowohl Anweisungsblockkörper als auch Ausdruckskörper, die den Wert des Ausdrucks zurückgeben. Im Gegensatz zu Funktionen haben Pfeile dasselbe lexikalische this wie ihr umgebender Code.

 // Expression bodies
var odds = evens . map ( v => v + 1 ) ;
var nums = evens . map ( ( v , i ) => v + i ) ;
var pairs = evens . map ( v => ( { even : v , odd : v + 1 } ) ) ;

// Statement bodies
nums . forEach ( v => {
  if ( v % 5 === 0 )
    fives . push ( v ) ;
} ) ;

// Lexical this
var bob = {
  _name : "Bob" ,
  _friends : [ ] ,
  printFriends ( ) {
    this . _friends . forEach ( f =>
      console . log ( this . _name + " knows " + f ) ) ;
  }
}

Weitere Informationen: MDN-Pfeilfunktionen

Klassen

ES6-Klassen sind ein einfacher Zucker gegenüber dem prototypbasierten OO-Muster. Ein einziges praktisches deklaratives Formular erleichtert die Verwendung von Klassenmustern und fördert die Interoperabilität. Klassen unterstützen prototypbasierte Vererbung, Superaufrufe, Instanz- und statische Methoden und Konstruktoren.

 class SkinnedMesh extends THREE . Mesh {
  constructor ( geometry , materials ) {
    super ( geometry , materials ) ;

    this . idMatrix = SkinnedMesh . defaultMatrix ( ) ;
    this . bones = [ ] ;
    this . boneMatrices = [ ] ;
    //...
  }
  update ( camera ) {
    //...
    super . update ( ) ;
  }
  get boneCount ( ) {
    return this . bones . length ;
  }
  set matrixType ( matrixType ) {
    this . idMatrix = SkinnedMesh [ matrixType ] ( ) ;
  }
  static defaultMatrix ( ) {
    return new THREE . Matrix4 ( ) ;
  }
}

Weitere Informationen: MDN-Klassen

Erweiterte Objektliterale

Objektliterale werden erweitert, um das Festlegen des Prototyps bei der Konstruktion, Kurzform für foo: foo Zuweisungen, das Definieren von Methoden, das Durchführen von Superaufrufen und das Berechnen von Eigenschaftsnamen mit Ausdrücken zu unterstützen. Zusammen bringen diese auch Objektliterale und Klassendeklarationen näher zusammen und ermöglichen es dem objektbasierten Design, von einigen der gleichen Annehmlichkeiten zu profitieren.

 var obj = {
    // __proto__
    __proto__ : theProtoObj ,
    // Shorthand for ‘handler: handler’
    handler ,
    // Methods
    toString ( ) {
     // Super calls
     return "d " + super . toString ( ) ;
    } ,
    // Computed (dynamic) property names
    [ 'prop_' + ( ( ) => 42 ) ( ) ] : 42
} ;

Weitere Informationen: MDN-Grammatik und -Typen: Objektliterale

Vorlagenzeichenfolgen

Vorlagenzeichenfolgen bieten syntaktischen Zucker zum Erstellen von Zeichenfolgen. Dies ähnelt den String-Interpolationsfunktionen in Perl, Python und anderen. Optional kann ein Tag hinzugefügt werden, um die Anpassung des String-Aufbaus zu ermöglichen und so Injektionsangriffe zu vermeiden oder übergeordnete Datenstrukturen aus String-Inhalten zu erstellen.

 // Basic literal string creation
`In JavaScript 'n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob" , time = "today" ;
`Hello ${ name } , how are you ${ time } ?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST `http://foo.org/bar?a= ${ a } &b= ${ b }
     Content-Type: application/json
     X-Credentials: ${ credentials }
     { "foo": ${ foo } ,
       "bar": ${ bar } }` ( myOnReadyStateChangeHandler ) ;

Weitere Informationen: MDN-Vorlagenzeichenfolgen

Destrukturierend

Die Destrukturierung ermöglicht die Bindung mithilfe von Mustervergleichen und unterstützt den Vergleich von Arrays und Objekten. Die Destrukturierung ist ausfallsicher, ähnlich der Standardobjektsuche foo["bar"] und erzeugt undefined Werte, wenn sie nicht gefunden werden.

 // list matching
var [ a , , b ] = [ 1 , 2 , 3 ] ;

// object matching
var { op : a , lhs : { op : b } , rhs : c }
       = getASTNode ( )

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var { op , lhs , rhs } = getASTNode ( )

// Can be used in parameter position
function g ( { name : x } ) {
  console . log ( x ) ;
}
g ( { name : 5 } )

// Fail-soft destructuring
var [ a ] = [ ] ;
a === undefined ;

// Fail-soft destructuring with defaults
var [ a = 1 ] = [ ] ;
a === 1 ;

Weitere Informationen: MDN-Destrukturierungsauftrag

Standard + Ruhe + Spread

Vom Aufrufer ausgewertete Standardparameterwerte. Wandeln Sie ein Array in einem Funktionsaufruf in aufeinanderfolgende Argumente um. Binden Sie nachgestellte Parameter an ein Array. Rest ersetzt die Notwendigkeit von arguments und geht direkter auf häufige Fälle ein.

 function f ( x , y = 12 ) {
  // y is 12 if not passed (or passed as undefined)
  return x + y ;
}
f ( 3 ) == 15 

 function f ( x , ... y ) {
  // y is an Array
  return x * y . length ;
}
f ( 3 , "hello" , true ) == 6 

 function f ( x , y , z ) {
  return x + y + z ;
}
// Pass each elem of array as argument
f ( ... [ 1 , 2 , 3 ] ) == 6

Weitere MDN-Informationen: Standardparameter, Restparameter, Spread-Operator

Sei + Konst

Blockbezogene Bindungskonstrukte. let ist die neue var . const ist eine Einzelzuweisung. Statische Beschränkungen verhindern eine Nutzung vor der Zuweisung.

 function f ( ) {
  {
    let x ;
    {
      // okay, block scoped name
      const x = "sneaky" ;
      // error, const
      x = "foo" ;
    }
    // error, already declared in block
    let x = "inner" ;
  }
}

Weitere MDN-Informationen: let-Anweisung, const-Anweisung

Iteratoren + For..Of

Iteratorobjekte ermöglichen benutzerdefinierte Iterationen wie CLR IEnumerable oder Java Iterable. Verallgemeinern Sie for..in auf eine benutzerdefinierte Iterator-basierte Iteration mit for..of . Es ist nicht erforderlich, ein Array zu realisieren, was Lazy-Design-Muster wie LINQ ermöglicht.

 let fibonacci = {
  [ Symbol . iterator ] ( ) {
    let pre = 0 , cur = 1 ;
    return {
      next ( ) {
        [ pre , cur ] = [ cur , pre + cur ] ;
        return { done : false , value : cur }
      }
    }
  }
}

for ( var n of fibonacci ) {
  // truncate the sequence at 1000
  if ( n > 1000 )
    break ;
  console . log ( n ) ;
}

Die Iteration basiert auf diesen Duck-Typ-Schnittstellen (unter Verwendung der TypeScript-Typsyntax nur zur Darstellung):

 interface IteratorResult {
  done : boolean ;
  value : any ;
}
interface Iterator {
  next ( ) : IteratorResult ;
}
interface Iterable {
  [ Symbol . iterator ] ( ) : Iterator
}

Weitere Informationen: MDN für...von

Generatoren

Generatoren vereinfachen die Iteratorerstellung mithilfe von function* und yield . Eine als Funktion* deklarierte Funktion gibt eine Generator-Instanz zurück. Generatoren sind Untertypen von Iteratoren, die zusätzlich next und throw enthalten. Diese ermöglichen den Rückfluss von Werten in den Generator, daher ist yield eine Ausdrucksform, die einen Wert zurückgibt (oder auslöst).

Hinweis: Kann auch verwendet werden, um „await“-ähnliche asynchrone Programmierung zu ermöglichen, siehe auch ES7- await -Vorschlag.

 var fibonacci = {
  [ Symbol . iterator ] : function * ( ) {
    var pre = 0 , cur = 1 ;
    for ( ; ; ) {
      var temp = pre ;
      pre = cur ;
      cur += temp ;
      yield cur ;
    }
  }
}

for ( var n of fibonacci ) {
  // truncate the sequence at 1000
  if ( n > 1000 )
    break ;
  console . log ( n ) ;
}

Die Generatorschnittstelle ist (unter Verwendung der TypeScript-Typsyntax nur für die Darstellung):

 interface Generator extends Iterator {
    next ( value ?: any ) : IteratorResult ;
    throw ( exception : any ) ;
}

Weitere Informationen: MDN-Iterationsprotokolle

Unicode

Geschützte Ergänzungen zur vollständigen Unterstützung von Unicode, einschließlich neuer Unicode-Literalform in Strings und des neuen RegExp- u Modus zur Verarbeitung von Codepunkten sowie neuer APIs zur Verarbeitung von Strings auf der 21-Bit-Codepunktebene. Diese Ergänzungen unterstützen die Erstellung globaler Apps in JavaScript.

 // same as ES5.1
"?" . length == 2

// new RegExp behaviour, opt-in ‘u’
"?" . match ( / . / u ) [ 0 ] . length == 2

// new form
"u{20BB7}" == "?" == "uD842uDFB7"

// new String ops
"?" . codePointAt ( 0 ) == 0x20BB7

// for-of iterates code points
for ( var c of "?" ) {
  console . log ( c ) ;
}

Weitere Informationen: MDN RegExp.prototype.unicode

Module

Unterstützung auf Sprachebene für Module zur Komponentendefinition. Kodiert Muster aus beliebten JavaScript-Modulladern (AMD, CommonJS). Laufzeitverhalten, das von einem hostdefinierten Standardlader definiert wird. Implizit asynchrones Modell – kein Code wird ausgeführt, bis angeforderte Module verfügbar und verarbeitet sind.

 // lib/math.js
export function sum ( x , y ) {
  return x + y ;
}
export var pi = 3.141593 ; 

 // app.js
import * as math from "lib/math" ;
alert ( "2π = " + math . sum ( math . pi , math . pi ) ) ; 

 // otherApp.js
import { sum , pi } from "lib/math" ;
alert ( "2π = " + sum ( pi , pi ) ) ;

Zu den zusätzlichen Funktionen gehören export default und export * :

 // lib/mathplusplus.js
export * from "lib/math" ;
export var e = 2.71828182846 ;
export default function ( x ) {
    return Math . log ( x ) ;
} 

 // app.js
import ln , { pi , e } from "lib/mathplusplus" ;
alert ( "2π = " + ln ( e ) * pi * 2 ) ;

Weitere MDN-Informationen: Import-Anweisung, Export-Anweisung

Modullader

Unterstützung für Modullader:

• Dynamisches Laden
• Staatliche Isolation
• Globale Namespace-Isolation
• Zusammenstellungs-Hooks
• Verschachtelte Virtualisierung

Der Standardmodullader kann konfiguriert werden, und es können neue Lader erstellt werden, um Code in isolierten oder eingeschränkten Kontexten auszuwerten und zu laden.

 // Dynamic loading – ‘System’ is default loader
System . import ( 'lib/math' ) . then ( function ( m ) {
  alert ( "2π = " + m . sum ( m . pi , m . pi ) ) ;
} ) ;

// Create execution sandboxes – new Loaders
var loader = new Loader ( {
  global : fixup ( window ) // replace ‘console.log’
} ) ;
loader . eval ( "console.log('hello world!');" ) ;

// Directly manipulate module cache
System . get ( 'jquery' ) ;
System . set ( 'jquery' , Module ( { $ : $ } ) ) ; // WARNING: not yet finalized

Karte + Set + WeakMap + WeakSet

Effiziente Datenstrukturen für gängige Algorithmen. WeakMaps bietet leckagefreie Seitentabellen mit Objektschlüsseln.

 // Sets
var s = new Set ( ) ;
s . add ( "hello" ) . add ( "goodbye" ) . add ( "hello" ) ;
s . size === 2 ;
s . has ( "hello" ) === true ;

// Maps
var m = new Map ( ) ;
m . set ( "hello" , 42 ) ;
m . set ( s , 34 ) ;
m . get ( s ) == 34 ;

// Weak Maps
var wm = new WeakMap ( ) ;
wm . set ( s , { extra : 42 } ) ;
wm . size === undefined

// Weak Sets
var ws = new WeakSet ( ) ;
ws . add ( { data : 42 } ) ;
// Because the added object has no other references, it will not be held in the set

Weitere MDN-Informationen: Map, Set, WeakMap, WeakSet

Proxys

Proxys ermöglichen die Erstellung von Objekten mit dem gesamten Spektrum an Verhaltensweisen, die Hostobjekten zur Verfügung stehen. Kann zum Abfangen, zur Objektvirtualisierung, zur Protokollierung/Profilerstellung usw. verwendet werden.

 // Proxying a normal object
var target = { } ;
var handler = {
  get : function ( receiver , name ) {
    return `Hello, ${ name } !` ;
  }
} ;

var p = new Proxy ( target , handler ) ;
p . world === 'Hello, world!' ; 

 // Proxying a function object
var target = function ( ) { return 'I am the target' ; } ;
var handler = {
  apply : function ( receiver , ... args ) {
    return 'I am the proxy' ;
  }
} ;

var p = new Proxy ( target , handler ) ;
p ( ) === 'I am the proxy' ;

Für alle Metaoperationen auf Laufzeitebene sind Traps verfügbar:

 var handler =
{
  get :... ,
  set :... ,
  has :... ,
  deleteProperty :... ,
  apply :... ,
  construct :... ,
  getOwnPropertyDescriptor :... ,
  defineProperty :... ,
  getPrototypeOf :... ,
  setPrototypeOf :... ,
  enumerate :... ,
  ownKeys :... ,
  preventExtensions :... ,
  isExtensible :...
}

Weitere Informationen: MDN-Proxy

Symbole

Symbole ermöglichen die Zugriffskontrolle für den Objektstatus. Mit Symbolen können Eigenschaften entweder durch string (wie in ES5) oder symbol verschlüsselt werden. Symbole sind ein neuer primitiver Typ. Optionaler description , der beim Debuggen verwendet wird, aber nicht Teil der Identität ist. Symbole sind eindeutig (wie gensym), aber nicht privat, da sie über Reflexionsfunktionen wie Object.getOwnPropertySymbols verfügbar gemacht werden.

 var MyClass = ( function ( ) {

  // module scoped symbol
  var key = Symbol ( "key" ) ;

  function MyClass ( privateData ) {
    this [ key ] = privateData ;
  }

  MyClass . prototype = {
    doStuff : function ( ) {
      ... this [ key ] . . .
    }
  } ;

  return MyClass ;
} ) ( ) ;

var c = new MyClass ( "hello" )
c [ "key" ] === undefined

Weitere Informationen: MDN-Symbol

Unterklassierbare Einbauten

In ES6 können integrierte Elemente wie Array , Date und DOM Element s in Unterklassen unterteilt werden.

Die Objektkonstruktion für eine Funktion namens Ctor verwendet jetzt zwei Phasen (beide werden virtuell ausgeführt):

• Rufen Sie Ctor[@@create] auf, um das Objekt zuzuweisen und jedes spezielle Verhalten zu installieren
• Rufen Sie den Konstruktor für die neue Instanz auf, um sie zu initialisieren

Das bekannte @@create -Symbol ist über Symbol.create verfügbar. Integrierte Funktionen machen ihr @@create jetzt explizit verfügbar.

 // Pseudo-code of Array
class Array {
    constructor ( ... args ) { /* ... */ }
    static [ Symbol . create ] ( ) {
        // Install special [[DefineOwnProperty]]
        // to magically update 'length'
    }
}

// User code of Array subclass
class MyArray extends Array {
    constructor ( ... args ) { super ( ... args ) ; }
}

// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
var arr = new MyArray ( ) ;
arr [ 1 ] = 12 ;
arr . length == 2

Mathematik + Zahl + String + Array + Objekt-APIs

Viele neue Bibliothekserweiterungen, darunter grundlegende Mathematikbibliotheken, Array-Konvertierungshilfen, String-Helfer und Object.assign zum Kopieren.