es6features
1.0.0
ECMAScript 6, également connu sous le nom d'ECMAScript 2015, est la dernière version de la norme ECMAScript. ES6 est une mise à jour importante du langage et la première mise à jour du langage depuis la standardisation d'ES5 en 2009. La mise en œuvre de ces fonctionnalités dans les principaux moteurs JavaScript est actuellement en cours.
Consultez la norme ES6 pour connaître la spécification complète du langage ECMAScript 6.
ES6 inclut les nouvelles fonctionnalités suivantes :
Les flèches sont un raccourci de fonction utilisant la syntaxe => . Ils sont syntaxiquement similaires à la fonctionnalité associée en C#, Java 8 et CoffeeScript. Ils prennent en charge à la fois les corps de blocs d'instructions et les corps d'expression qui renvoient la valeur de l'expression. Contrairement aux fonctions, les flèches partagent le même lexical this le code qui les entoure.
// 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 ) ) ;
}
}Plus d'informations : Fonctions des flèches MDN
Les classes ES6 sont un simple sucre par rapport au modèle OO basé sur un prototype. Disposer d’un seul formulaire déclaratif pratique facilite l’utilisation des modèles de classe et encourage l’interopérabilité. Les classes prennent en charge l'héritage basé sur des prototypes, les super appels, les méthodes et constructeurs d'instance et statiques.
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 ( ) ;
}
}Plus d'informations : Cours MDN
Les littéraux d'objet sont étendus pour prendre en charge la configuration du prototype lors de la construction, un raccourci pour foo: foo , la définition de méthodes, l'exécution de super appels et le calcul des noms de propriétés avec des expressions. Ensemble, ceux-ci rapprochent également les littéraux d'objet et les déclarations de classe et permettent à la conception basée sur les objets de bénéficier de certaines des mêmes commodités.
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
} ;Plus d'informations : Grammaire et types MDN : Littéraux d'objet
Les chaînes de modèles fournissent du sucre syntaxique pour la construction de chaînes. Ceci est similaire aux fonctionnalités d'interpolation de chaînes en Perl, Python et plus encore. En option, une balise peut être ajoutée pour permettre de personnaliser la construction de la chaîne, en évitant les attaques par injection ou en construisant des structures de données de niveau supérieur à partir du contenu de la chaîne.
// 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 ) ;Plus d'informations : chaînes de modèles MDN
La déstructuration permet la liaison à l'aide de la correspondance de modèles, avec prise en charge de la correspondance de tableaux et d'objets. La déstructuration est sans échec, similaire à la recherche d'objet standard foo["bar"] , produisant des valeurs undefined lorsqu'elles ne sont pas trouvées.
// 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 ;Plus d'infos : Mission MDN Déstructuration
Valeurs des paramètres par défaut évaluées par l’appelé. Transformez un tableau en arguments consécutifs dans un appel de fonction. Liez les paramètres de fin à un tableau. Le repos remplace le besoin d’ arguments et aborde plus directement les cas courants.
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 ] ) == 6Plus d'informations MDN : paramètres par défaut, paramètres de repos, opérateur de propagation
Constructions de liaison à portée de bloc. let la nouvelle var . const est une affectation unique. Les restrictions statiques empêchent l'utilisation avant l'affectation.
function f ( ) {
{
let x ;
{
// okay, block scoped name
const x = "sneaky" ;
// error, const
x = "foo" ;
}
// error, already declared in block
let x = "inner" ;
}
}Plus d'informations MDN : instruction let, instruction const
Les objets itérateur permettent une itération personnalisée comme CLR IEnumerable ou Java Iterable. Généralisez for..in à une itération personnalisée basée sur un itérateur avec for..of . Ne nécessite pas la réalisation d'un tableau, ce qui permet des modèles de conception paresseux comme LINQ.
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 ) ;
}L'itération est basée sur ces interfaces de type canard (en utilisant la syntaxe de type TypeScript à des fins d'exposition uniquement) :
interface IteratorResult {
done : boolean ;
value : any ;
}
interface Iterator {
next ( ) : IteratorResult ;
}
interface Iterable {
[ Symbol . iterator ] ( ) : Iterator
}Plus d'infos : MDN pour...de
Les générateurs simplifient la création d'itérateurs à l'aide function* et yield . Une fonction déclarée comme function* renvoie une instance de Generator. Les générateurs sont des sous-types d'itérateurs qui incluent next et throw supplémentaires. Ceux-ci permettent aux valeurs de revenir dans le générateur, donc yield est une forme d'expression qui renvoie une valeur (ou la lance).
Remarque : peut également être utilisé pour activer la programmation asynchrone de type « attendre », voir également la proposition await ES7.
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 ) ;
}L'interface du générateur est (en utilisant la syntaxe de type TypeScript à des fins d'exposition uniquement) :
interface Generator extends Iterator {
next ( value ?: any ) : IteratorResult ;
throw ( exception : any ) ;
}Plus d'informations : Protocoles d'itération MDN
Ajouts ininterrompus pour prendre en charge l'Unicode complet, y compris la nouvelle forme littérale Unicode dans les chaînes et le nouveau mode RegExp u pour gérer les points de code, ainsi que de nouvelles API pour traiter les chaînes au niveau des points de code 21 bits. Ces ajouts prennent en charge la création d'applications globales en 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 ) ;
}Plus d'informations : MDN RegExp.prototype.unicode
Prise en charge au niveau linguistique des modules de définition de composants. Codifie les modèles des chargeurs de modules JavaScript populaires (AMD, CommonJS). Comportement d'exécution défini par un chargeur par défaut défini par l'hôte. Modèle implicitement asynchrone – aucun code ne s’exécute tant que les modules demandés ne sont pas disponibles et traités.
// 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 ) ) ; Certaines fonctionnalités supplémentaires incluent export default et 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 ) ;Plus d'informations MDN : déclaration d'importation, déclaration d'exportation
Prise en charge des chargeurs de modules :
Le chargeur de module par défaut peut être configuré et de nouveaux chargeurs peuvent être construits pour évaluer et charger du code dans des contextes isolés ou contraints.
// 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 finalizedStructures de données efficaces pour les algorithmes courants. WeakMaps fournit des tables latérales sans fuite avec clé d'objet.
// 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 setPlus d'informations MDN : Map, Set, WeakMap, WeakSet
Les proxys permettent la création d'objets avec toute la gamme de comportements disponibles pour héberger des objets. Peut être utilisé pour l'interception, la virtualisation d'objets, la journalisation/profilage, etc.
// 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' ;Des interruptions sont disponibles pour toutes les méta-opérations au niveau de l'exécution :
var handler =
{
get :... ,
set :... ,
has :... ,
deleteProperty :... ,
apply :... ,
construct :... ,
getOwnPropertyDescriptor :... ,
defineProperty :... ,
getPrototypeOf :... ,
setPrototypeOf :... ,
enumerate :... ,
ownKeys :... ,
preventExtensions :... ,
isExtensible :...
}Plus d'informations : Proxy MDN
Les symboles permettent le contrôle d'accès à l'état de l'objet. Les symboles permettent de saisir les propriétés soit par string (comme dans ES5), soit symbol . Les symboles sont un nouveau type primitif. Paramètre description facultatif utilisé dans le débogage - mais ne fait pas partie de l'identité. Les symboles sont uniques (comme gensym), mais pas privés puisqu'ils sont exposés via des fonctionnalités de réflexion comme Object.getOwnPropertySymbols .
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" ] === undefinedPlus d'informations : Symbole MDN
Dans ES6, les éléments intégrés tels que Array , Date et DOM Element s peuvent être sous-classés.
La construction d'objets pour une fonction nommée Ctor utilise désormais deux phases (toutes deux virtuellement réparties) :
Ctor[@@create] pour allouer l'objet, en installant tout comportement spécial Le symbole @@create connu est disponible via Symbol.create . Les éléments intégrés exposent désormais explicitement leur @@create .
// 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 == 2De nombreux nouveaux ajouts de bibliothèques, notamment les bibliothèques mathématiques de base, les assistants de conversion de tableaux, les assistants de chaînes et Object.assign pour la copie.
