ES6 == ES2015

ES6 Aujourdh'hui !

ENSET Mohammedia

Universté HASSAN II Casablanca

A. DAAIF ==> aziz(at)daaif.net

Plan

• Généralités
• Constantes et variables
• Arrow Function
• Fonctions et paramètres
• String and Template literals
• Classes
• Objets
• Assignement
• Modules

Généralités

Généralités

• Support de ES6 par les browsers
• Deux besoins différents :
  1. Convertir ES6 en ES5 : Transpiler
     • Transpileur Babel
     • Transpileur Traceur
  2. Générer un seul fichier : Bundler
     • Bundler Rollup

Constantes et variables

let pour la portée de niveau bloc

const pour définir une cte

    // Constantes
    const PI = 3.14;
    PI = 3.15 // générera une erreur

    // Variables
    for(let i=0; i<10; i++) {
        var j = 2*i;
    }
    console.log(j); // 18
    console.log(i); // Uncaught ReferenceError: i is not defined

Arrow function

    // Uniquement en affectation
    let add = ( a, b ) => a+b;
    let doubles = [0,1,2,3,4,5].map( v => 2*v );

    // Contexte
    // this === windows
    document.body.addEventListener( 'click', function() {
        setTimeout( function(){ console.log( this ) }, 1000)
    });
    // this === HTMLBodyElement
    document.body.addEventListener( 'click', function() {
        setTimeout( () => console.log( this ), 1000 )
    });

Fonctions et paramètres

    // Paramètres par défaut
    let add = ( a=0, b=0 ) => a+b

    // Nombre de paramètres inconnu à l'avance
    let addAll = ( ...x ) => {let s=0; x.forEach(v => s += v); return s }

    // Idéale dans les callback
    let doubles = [0, 1, 2, 3, 4, 5].map(v => 2*v)

    // function accèpte aussi le même style de paramètres
    function double ( a = 0 ) { return 2 * a }
    function double2 ( ...x ) { return x.map( v => 2 * v ) }

String and Template literals

    // Chaine de caractère ordinaires en une ligne ES5 et ES6
    let s1 = "bla`bla"  //  ou s1 = 'bla bla'

    // Chaine de caractère multiligne
    let s1 = `bla
            bla`  //  le limiteur ` est appelé backtick

    // String interpolation
    let name = "toto"
    let msg = `Hello ${name} ! `  // contiendra 'Hello toto'

Classes

    // Intuitif ~ à la java
    class Person {
        // Constructeur
        constructor( name ) {
            this._name = name   // Attribut
        }
        // Méthode
        sayHello () {
            return `Hello ${ this.name } !`
        }
        // Getter
        get name() { return this._name }
        // Setter
        set name( name ) { this._name = name }
    }

Héritage

    class Employe extends Person {
        // Constructeur
        constructor( id, name ) {
            super(name)
            this._id = id
        }
        // Redéfinition
        sayHello () {
            return super.sayHello() + ` ID -> ${ this.id } !`
        }
        // Getter
        get id() { return this._id }
        // Redéfinition méthode de l'ancetre Object
        toString() { return 'Employé : ' + this.sayHello()}
    }

Objets

    // Attributs
    let a = 23, b = true
    let state = { a, b }
    // Equivaut à let state = { a: a, b: b}
    // et produit l'objet { a: 23, b: true}

    // Méthodes
    let lib = {
        pluralize(word) { return word + 's' }
    }
    // Equivaut à { pluralize : (word) => word + 's' }
    // Appel de la méthode lib.pluralize('book')

Assignements

    // Destructuring Assignment
    let list = [ 1, 2, 3 ]
    let  [ a, , b ] = list   // a -> 1 et b -> 3
    // Permutation
    [ b, a ] = [ a, b ]      // a -> 3 et b -> 1

    let obj = { a: 23, b: 33, c: 44 }
    let { a, c } = obj
    // Equivaut à let a = obj.a, b = ob.b
    // a -> 23, c -> 44

    ...

Modules

    // Fichier person.js
    export class Person {
        constructor(name) {
            this._name = name
        }
        get name() { return this._name }
    }

    // Fichier main.js
    import { Person } from 'person'
    let p = new Person('toto')
    console.log(p.name)
                    

Modules

Mettre en place un environnement de développement.

Pour se concentrer sur l'apprentissage de ES6, télécharger le module es6-sass

    // Installation globale
    npm install -g es6-sass

    // Générer la structure d'un projet
    mkdir my-project
    cd my-project
    es6-sass init

    // Utiliser le module
    es6-sass build       # transpiles and bundles es6 to es5
    es6-sass sass        # transpile .scss files to css
    es6-sass minify      # uglify .js file and compress .css file
    es6-sass eslint      # parse js files and show warnings
    es6-sass watch       # enables the watch mode