ES6 : les objets
Dimanche 10 décembre 2017 23:47
On va voir bientôt que la principale avancée de ES6 au niveau des objets est l'arrivée de la syntaxe des classes. Mais avant d'aborder ce sujet on va commencer par voir quelques nouvelles possibilités pour les objets.
Les initialisateurs d'objets (objets littéraux)
Simplification pour les propriétés
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
}
};
Simplification pour les méthodes
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
Propriété calculée
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
Les nouvelles méthodes pour Object
Object.assign
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.
Que se passe-t-il si des propriétés ont le même nom ?
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é.
Et les accesseurs ?
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.
Object.is
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.
Object.is([], []); // false
Object.is(null, null); // true
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
En résumé
- ES6 apporte une simplification de la syntaxe pour les propriétés et les méthodes des initialisateurs d'objets.
- ES6 enrichi Object des méthodes assign et is.
Par bestmomo
Aucun commentaire