Tutoriel présentant les nouveautés ECMAScript 6

Vous utilisez sans doute beaucoup d'initialisateurs d'objets de ce genre :

let identite = { 
  nom: "Durand", 
  prenom: "Louis", 
  caracteristiques: {
     age: 20,
     poids: 75
  } 
};

C'est une syntaxe simple et rapide.

Avec ES6 vous pouvez initialiser les propriétés avec des variables existantes :

let nom = "Durand";
let prenom = "Louis"; 
let age = 20;
let poids = 75;
let identite = { 
  nom, 
  prenom, 
  caracteristiques: {
    age,
    poids
  } 
};

Avec ES5 vous déclarez une méthode ainsi :

let nom = "Durand";
let identite = { 
  nom, 
  getNom: function() {
    return this.nom; 
  }
};
console.log(identite.getNom());  // Durand

Avec ES6 vous avez une syntaxe simplifiée (on évite function) :

let nom = "Durand";
let identite = { 
  nom, 
  getNom() {
    return this.nom; 
  }
};
console.log(identite.getNom());  // Durand

On peut maintenant avoir un nom de propriété déterminé par une expression. Il suffit d'utiliser des crochets :

let identifiant = "no";
let identite = { 
  [identifiant + "m"]: "Durand", 
};
console.log(identite.nom);  // Durand

Regardez ce code :

const identite = { nom: "Durand" };
Object.assign(identite, { prenom: "Louis" });
console.log(identite);  // {"nom":"Durand","prenom":"Louis"}

On effectue une composition d'objets en ajoutant à l'objet identite les propriétés d'un autre objet.

On ne copie que les propriétés énumérables et non héritées.

Et bien on va faire un essai :

const identite = { nom: "Durand", prenom : "Louis" };
Object.assign(identite, { prenom: "Alfred" });
console.log(identite);  // {"nom":"Durand","prenom":"Alfred"}

On a une surcharge de la propriété.

const identite = { 
  nom: "Durand", 
  prenom: "Louis",
  get nomComplet() { return this.nom + " " + this.prenom }
};
let copie = Object.assign({}, identite);
console.log(copie);  // {"nom":"Durand","prenom":"Louis","nomComplet":"Durand Louis"}

On se retrouve avec une propriété dont la valeur est celle retournée par l'accesseur.

Lorsqu'on veut comparer deux valeurs on utilise == ou ===. La seconde syntaxe est la plus sûre parce qu'elle ne se contente pas de comparer les valeurs mais aussi le type. Mais même avec cette syntaxe, on a deux petits soucis :

• -0 === +0 est considéré comme vrai ;
• NaN === NaN est considéré comme faux.

ES6 introduit la méthode is pour avoir un vrai contrôle de l'identité de deux valeurs :

Object.is([], []);     // false
Object.is(null, null); // true
Object.is(0, -0);      // false
Object.is(-0, -0);     // true
Object.is(NaN, 0/0);   // true

La méthode Array.from permet de créer un nouveau tableau à partir d'un objet itérable ou « qui ressemble » à un tableau :

const commeUnTableau = { 0: "Durand", 1: "Louis", length: 2 };

const tableau = Array.from(commeUnTableau);
for (const item of tableau) {
    console.log(item);
}

L'objet commeUnTableau a des éléments indexés et une propriété length.

En le transformant en tableau, on peut maintenant le parcourir.

Un autre exemple d'utilisation est celui de l'objet arguments.

function f() {
  console.log(Array.from(arguments));  // ["un","deux","trois","quatre"] 
}
f('un', 'deux', 'trois', 'quatre');

On peut ajouter un argument pour effectuer un traitement sur les éléments :

function f() {
  console.log(Array.from(arguments, x => 2 * x));  // [2,4,6] 
}
f(1, 2, 3);

D'après vous, qu'obtenez-vous avec cette déclaration de tableau ?

let tableau = new Array(2);

Voilà le résultat :

console.log(items); //  [null,null]

Lorsqu'on passe juste un argument avec une valeur numérique au constructeur, ça donne juste la longueur du tableau.

Et maintenant dans ce cas ?

let tableau = new Array("2");

Cette fois on obtient un tableau avec juste l'élément transmis.

C'est là qu'intervient la nouvelle méthode Array.of :

let tableau = Array.of(2);
console.log(tableau);  // [2]

On se contente de transmettre les éléments qu'on veut dans le tableau.

ES5 n'est pas très bien équipé pour faire des recherches dans un tableau. On a bien les méthodes indexOf et lastIndexOf, mais leur action est limitée.

Avec ES6 arrivent les méthodes find et findIndex qui ouvrent de nouvelles possibilités.

La différence entre find et findIndex est que la première renvoie une valeur, alors que la seconde renvoie un index, sinon c'est exactement le même fonctionnement.

On doit passer comme argument une fonction de rappel qui effectue un test sur les valeurs du tableau :

let valeur = [1, 3, 2].find(x => x > 2);
let index = [1, 3, 2].findIndex(x => x > 2);
console.log(valeur);  // 3
console.log(index);  // 1

Et quand on ne trouve pas, voilà les valeurs retournées :

let valeur = [1, 3, 2].find(x => x > 3);
let index = [1, 3, 2].findIndex(x => x > 3);
console.log(valeur);  // undefined
console.log(index);  // -1

La méthode fill permet de remplacer toutes les valeurs d'un tableau par une certaine valeur. On peut limiter l'action avec un index de départ et un index d'arrivée :

console.log([1, 2, 3].fill(0));         // [0,0,0]
console.log([1, 2, 3].fill(0, 1));      // [1,0,0]
console.log([1, 2, 3].fill(0, 1 , 2));  // [1,0,3]

La méthode copyWithin effectue une copie superficielle d'une partie d'un tableau sur lui-même. On dispose de trois arguments :

• cible : index de début de la copie (peut être négatif) ;
• début : index de début de la partie à copier (optionnel, peut être négatif) ;
• fin : index de fin de la partie à copier (optionnel, peut être négatif).

Voici quelques exemples :

console.log([1, 2, 3, 4].copyWithin(-1));        // [1,2,3,1]
console.log([1, 2, 3, 4].copyWithin(2));         // [1,2,1,2]
console.log([1, 2, 3, 4].copyWithin(1, 3));      // [1,4,3,4]
console.log([1, 2, 3, 4].copyWithin(1, 2, 3));   // [1,3,3,4]

Un buffer est un espace mémoire qui contient un certain nombre d'octets de données. Pour créer un buffer c'est tout simple :

let buffer = new ArrayBuffer(4);

Ici on a créé un buffer de 4 octets.

Une vue est une interface pour manipuler les données stockées dans un buffer : lecture, écriture.

Il existe une vue générique qu'on crée avec DataView :

let buffer = new ArrayBuffer(4);
let vue = new DataView(buffer);

On peut alors manipuler les données du buffer avec cette vue.

Mais il existe aussi neuf vues spécifiques à certains types de données :

On peut donc créer des vues qui gèrent un certain type de données :

let buffer = new ArrayBuffer(8);
let vue = new Uint8Array(buffer);

Ici on a une vue pour gérer des entiers non signés sur 8 bits. On peut en mettre 8 dans le buffer.

let buffer = new ArrayBuffer(8);
let vue = new DataView(buffer, 4, 2);

On a ajouté deux arguments :

• l'offset : ici on a 4, donc on commence au quatrième octet ;
• le nombre d'octets à prendre en compte : ici on a 2, on gère donc les octets de 4 à 5.