danielhagnoul

[Actualité] ES2015 (ES6) c'est le JS d'aujourd'hui !

Noter ce billet

par

, 26/08/2015 à 03h42 (1882 Affichages)

Il est plus que temps de se documenter et d'apprendre à s'en servir !

Ce n'est pas parce qu'à votre travail les outils datent de l'âge des dinosaures que votre esprit doit y rester.

Documentation

Pour apprendre en français, il y a MDN

Mais pour approfondir le sujet ou avoir accès aux dernières nouveautés, il faut consulter les sources anglophones.

Pour débuter, je vous conseille : Getting started with ECMAScript 6

Puis de lire : Exploring ES6

ES2015 natif

Exemple, non exhaustif, de ce qui est déjà utilisable :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
</head>
<body>
 
  <h1>Test du ES2015 natif (exemple non exhaustif)</h1>
  <h2>Voir le code et le contenu de la console</h2>
 
  <div>
    <p>Le code ci-dessous fonctionne dans les navigateurs dignes de ce nom, à savoir Edge et Chrome.</p>
    <p>J'ai testé avec Edge 20.10240.16384.0 et Chrome 45.0.2454.46 beta-m (64-bit)</p>
    <p>Firefox 40.0.2 se contente d'afficher "SyntaxError: let is a reserved identifier".</p>
    <p>Ce navigateur est à la traîne depuis des mois, je le délaisse de plus en plus.</p>
    <p>Pour les navigateurs totalement obsolètes (genre IE), il faut arrêter de croire au Père Noël.</p>
  </div>
 
  <script>
    "use strict";
    
    const y = 5;
    let x = 100;
    
    { // bloc de code
      
      let x = 6;
      
      // 6 * 5 = 30
      console.log( x * y );
    }
    
    {
      let x = 0.5;
      
      // 0.5 * 5 = 2.5
      console.log( x * y );
    }
    
    // 100 * 5 = 500
    console.log( x * y );
    
    // Impossible
    // TypeError: Assignment to constant variable.
    // y = 12;
    
    {
      // Array.from() facilite la manipulation des nodes
      
      Array.from( document.querySelectorAll( 'p' ) ).forEach( ( node ) => { console.log( node.innerText ); } );
      
      /*
       * ( p ) => { console.log( p.innerText ); }
       * signbifie : function( p ){ console.log( p.innerText ); }
       */
      
      // variante avec for of
      
      for ( let node of Array.from( document.querySelectorAll( 'p' ) ) ){
          console.log( node.innerText );
      }
 
    }
    
    {
      // Array.findIndex() et Object.is() facilite la
      // recherche d'un élément, même si cet élément est NaN
      
      let myIndexOf = function( arr, elem ){
        return arr.findIndex( x => Object.is( x, elem ) );
      }
      
      /*
       * x => Object.is( x, elem )
       * signifie : function( x ){ return Object.is( x, elem ); }
       */ 
      
      let
        arr = [ 0, NaN, 2 ],
        pos = myIndexOf( arr, NaN );
      
      // 1
      console.log( pos );
    }
    
    {
      // pour vos messages, n'utilisez plus "text" ou 'text' mais
      // `text` (accent grave)
      
      console.log( `Un texte qui se moque des ' et des ".` );
      
      // on peut alors utiliser la forme template ${ ... } pour insérer
      // la valeur d'une variable dans le texte
      
      console.log( `y = ${ y } ne peut pas être modifié, c'est une constante !` );
    }
 
    {
      // manipulation d'un objet
      // filter() facilite le tri
      
      let animals = [
        {
          "name" : "Waffles",
          "type": "dog",
          "age" : 12
        },
        {
          "name" : "Fluffy",
          "type" : "cat",
          "age" : 14
        },
        {
          "name" : "Spelunky",
          "type" : "dog",
          "age" : 4
        },
        {
          "name" : "Hank",
          "type" : "dog",
          "age" : 11
        }
      ];
      
      let
        oldDogNames = animals
          .filter( ( x ) => x.age > 10 && x.type === "dog" )
          .map( ( x ) => x.name );
      
      // oldDogNames = [ "Waffles", "Hank" ].
      console.log( oldDogNames );
      
      let
        totalDogYears = animals
          .filter( ( x ) => x.type === "dog" )
          .map( ( x ) => x.age )
          .reduce( function( prev, cur ){
            return ( prev + cur );
          }, 0 );
      
      // totalDogYears = 27 (Waffles 12 + Spelunky 4 + Hank 11)
      console.log( totalDogYears );
    }
    
    {
      // déclaration et construction d'un objet
      // rappel : x (let) et y (const) sont déclarés au début du script
      // et accessible dans tous les blocs de code.
      
      let Obj = Object.assign( {}, { x, y, "bar" : true } );
      
      // Obj = { "x" : 100, "y" : 5, "bar" : true }
      console.log( JSON.stringify( Obj ) );
      
      // 100
      console.log( `Obj.x = ${ Obj.x }` );
    }
    
    {
      // fonction asynchrone grâce aux promesses
      
      let asyncFunc = function( ){
        
        return new Promise( function( resolve, reject ){
          
          if ( x < 100 ){
              resolve( 15 );
          } else {
              reject( `Valeur incompatible, promesse non tenue` );
          }
          
        });
      };
      
      // utilisation
      
      asyncFunc( )
        .then( ( value ) => { console.log( "done", value ); } )
        .catch( ( error ) => { console.log( "fail", error ); } );
    }
    
    {
      // Map, création, remplissage et manipulation
      
      let map = new Map([
        [ false, 'no' ],
        [ true, 'yes' ],
      ]);
      
      map.set( "numéro", 123 );
      map.set( "nom", "Hagnoul" );
      
      for ( let key of map.keys() ){
        console.log( key );
      }
      
      for ( let value of map.values() ){
        console.log( value );
      }
      
      for ( let entry of map.entries() ){
        console.log( entry[ 0 ], entry[ 1 ] );
      }
      
      console.log( map.size, map.has( "numéro" ), map.get( "nom" ) );
      
      map.delete( true );
      
      console.log( map.size, map.has( true ) );
    }
    
    {
      // Set, création, remplissage et manipulation
      // méthodes get(), set(), has(), delete() et propriété size comme pour Map
      
      // les doublons sont écartés automatiquement
      let set = new Set( [5, 1, 5, 7, 7, 5] );
 
      for ( let value of set.values() ){
        console.log( value );
      }
    }
 
  </script>
</body>
</html>

ES2015 compilé en ES5

Les outils transformant du code ES2015 en ES5 sont nombreux.

Celui qui fait le plus de bruit, c'est Babel.

J'utilise exclusivement traceur.js dans le navigateur Chrome.

Exemple composé de deux fichiers JS et d'un fichier HTML.

Le fichier dvjhUtilities.js est un fichier contenant des fonctions utilitaires :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
"use strict";
 
const
    kIsoFormat = d3.time.format( "%Y-%m-%dT%H:%M:%S.%L%Z" ),
    kModel = Symbol( 'ObjModel' ),
    kGetType = function( Obj ){
        return Object.prototype.toString.call( Obj ).match( /\s([a-zA-Z]+)/ )[ 1 ].toLowerCase();
    },
    kSetModel = function( Obj ){
 
        if ( kGetType( Obj ) === "object" ){
 
            Obj[ kModel ] = Object.create( Object.prototype );
 
            Object.getOwnPropertyNames( Obj ).forEach( function( key ){
 
                if ( key != kModel ) {
 
                    Object.defineProperty( Obj[ kModel ], key, {
                        "value" : kGetType( Obj[ key ] ),
                        "enumerable" : true
                    });
                }
            });
 
            Object.getOwnPropertySymbols( Obj ).forEach( function( key ){
 
                if ( key != kModel ) {
 
                    Object.defineProperty( Obj[ kModel ], key, {
                        "value" : kGetType( Obj[ key ] ),
                        "enumerable" : true
                    });
                }
            });
 
        } else {
            throw `Erreur dans kSetModel(), ${Obj} n'est pas un objet`;
        }
    },
    kCreateDOMObject = function( domFragment, keys, boolChildren ){
 
        let
            Obj = Object.create( Object.prototype ),
            nodes = [],
            treeWalker = {},
            bool = boolChildren || false;
 
        if ( kGetType( domFragment ).slice( 0, 4 ) === "html" ) {
 
            treeWalker = document.createTreeWalker(
                domFragment,
                NodeFilter.SHOW_ELEMENT,
                {
                    "acceptNode" : function( node ){
                        if ( bool ) {
                            return NodeFilter.FILTER_ACCEPT;
                        } else if ( node.parentNode === domFragment ) {
                            return NodeFilter.FILTER_ACCEPT;
                        }
 
                        return NodeFilter.FILTER_SKIP;
                    }
                },
                false
            );
 
            while( treeWalker.nextNode() ){
                nodes.push( treeWalker.currentNode );
            }
 
            nodes.forEach( function( item, i ){
                let key = "dom_" + (  keys[ i ] ? keys[ i ] : i );
 
                Object.defineProperty( Obj, key, {
                    "value" : item,
                    "enumerable" : true
                });
            });
        } else {
            alert( `L'objet créé est vide, car le paramètre domFragment ne contient pas un fragment du DOM` );
        }
 
        return Obj;
    },
    dvjhDate = class extends Date {
        constructor( p ){
            if ( p ) {
                super( p );
            } else {
                super();
            }
 
            this.auteur = 'Daniel Hagnoul';
        }
        toString(){
            return kIsoFormat( this );
        }
    };

Le fichier dvjhClass.js est exploité comme module ES2015 :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
"use strict";
 
const
    kFirstName = new WeakMap(),
    kLastName = new WeakMap(),
    kFirstNameType = 'string',
    kLastNameType = 'string',
    kSetPerson = function( obj, first, last ){
 
        if ( kGetType( first ) === kFirstNameType && kGetType( last ) === kLastNameType ){
 
            kFirstName.set( obj, first );
            kLastName.set( obj, last );
 
        } else {
            throw `Type des paramètres incompatibles.
                    first : ${ kFirstNameType } attendu, 
                    last : ${ kLastNameType } attendu`;
        }
 
        return obj;
    },
    kPays = Symbol( 'Pays' ),
    kPaysType = 'string',
    kSetPays = function( obj, value ){
 
        if ( kGetType( value ) === kPaysType ){
            obj[ kPays ] = value;
 
        } else {
            throw `Type des paramètres incompatibles.
                    pays : ${ kPaysType } attendu`;
        }
 
        return obj;
    };
 
export const Person = class {
    constructor( first, last ){
        kSetPerson( this, first, last );
    }
    get firstName( ){
        return kFirstName.get( this );
    }
    get lastName( ){
        return kLastName.get( this );
    }
    fullName( ){
        return kFirstName.get( this ) + " " + kLastName.get( this );
    }
};
 
export const Employee = class extends Person {
    constructor( prenom, nom, pays ){
        super( prenom, nom );
        kSetPays( this, pays );
    }
    get pays( ){
        return this[ kPays ];
    }
    set pays( value ){
        kSetPays( this, pays );
    }
};

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    
    h1 { color: rgb( 202, 26, 84 ); }
    
  </style>
</head>
<body>
 
  <h1>Titre</h1>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  <script src="dvjhUtilities.js"></script>
  <script type="module">
    // script type module indique qu'il s'agit d'un fichier exploité par traceur.js
 
    // on importe les fonctions exportables du module
 
    import { Person, Employee } from 'dvjhClass.js';
 
    // construction de l'objet Moi à partir de la class Employee
 
    let Moi = new Employee( "Daniel", "Hagnoul", "Belgique" );
 
    // on applique une fonction utilitaire sur l'objet Moi
 
    kSetModel( Moi );
    console.log( Moi );
 
    console.log( Moi.firstName, Moi.lastName, Moi.pays );
 
    // fonction utilitaire, accessible
    console.log( new dvjhDate() );
 
    // appel d'une fonction du module non exportée, donc inacessible
    // provoque une erreur !
    // ReferenceError: kSetPerson is not defined
    // console.log( kSetPerson( {}, "Jean", "Dupond" ) );
  </script>
</body>
</html>