Pages

Affichage des articles dont le libellé est ES6. Afficher tous les articles
Affichage des articles dont le libellé est ES6. Afficher tous les articles

createClass : ES6

class Nb {
    constructor(x, y) {
        this.x = x;
    }
    carre () {
        return this.x*this.x;
    }
}
const p1 = new Nb(2);
console.log(p1.carre());


Fonctions fléchées : ES6

Voici un cas d'écriture de fonction fléchées :

var motL = "anticonstitutionnelement myélosaccoradiculographie cyclopentanoperhydrophénanthrène intergouvernementalisation";

motT = motL.split(" ");

console.log(motT.map(el => el.length).reduce((a, b) => Math.max(a, b)));

console.log(motT.reduce((a, b) => a.length > b.length ? a : b));


Voici une utilisation sur le DOM ! 

motL = document.querySelector("div");

motT = motL.innerHTML.split(" ");

var Max = motT.reduce((a, b) => a.length > b.length ? a : b);


motL.innerHTML = motL.innerHTML.replace(Max, "<span>"+Max+"</span>");

JS Bin on jsbin.com

Lire l'article suivant pour découvrir le this lexical dans les fonctions fléchées.


perte du this : objet

Voici un exemple montrant la perte de la référence du this dans les objets.

function P() {

  this.age = 0;

  setInterval(function () {
    this.age++; // this ref sur global et non l'objet
  }, 1000);
}
var pPerte = new P();


En voici une version corrigée ! Les fonctions fléchées capturent la valeur this de leur contexte.

function Personne() {
  this.age = 0;

  setInterval(() => this.age++, 1000);
}

var p = new Personne();

setInterval(() => console.log(p.age), 3000);



Une autre solution fût l'utilisation de bind

module : node.js

Ecrire un fichier moduleDir.js


var fs = require('fs');

module.exports = function (dirPath, cb) {

  fs.readdir(dirPath, function (err, listFiles) {
    
    if (err) {
      return cb(err); //par convention
    }

    cb(null, listFiles);
  });
};


Ecrire un programme programmeDir.js


var filterDir = require('./moduleDir');

var dirPath = process.argv[2];

filterDir(dirPath, function (err, list) {
   if (err) {
    console.log('Erreur sur ' + dirPath);
    return err;
  }

  list.forEach(function (filename,i) {
    console.log(i,filename);
  });

});

lancer : node programmeDir.js .

Activer et tester ECMAScript 6


Pour tester les nouvelles fonctionnalités de ECMAScript 6, il faut activer une option dans chrome.

  1. tapez chrome://flags/#enable-javascript-harmony dans la barre d'adresse.
  2. Redémarrer (ou aller tout en bas)

Tester dans la console.

[1, 2, 3].map(n => n * 2); 
> [2,4,6]
Son équivalent en ECMAScript 5 est
[1, 2, 3].map(function(n) { return n * 2; }, this);