Littéraux d'objets améliorés –

Cet article examine ce qui est possible avec les littéraux d'objets en JavaScript, en particulier à la lumière des récentes mises à jour d'ECMAScript

La possibilité de créer des objets JavaScript à l'aide de la notation littérale est puissante. Les nouvelles fonctionnalités introduites depuis ES2015 (ES6) facilitent la gestion des objets dans tous les navigateurs modernes (pas IE) et Node.js.

La création d'objets dans certaines langues peut être coûteuse en termes de temps de développement et de puissance de traitement La classe doit être déclarée avant que tout puisse être accompli. En JavaScript, il est facile de créer des objets à la volée. Par exemple:

 // code compatible ES5
var myObject = {
  prop1: 'bonjour',
  prop2: 'monde',
  sortie: function () {
    console.log (this.prop1 + '' + this.prop2);
  }
}

myObject.output (); // Bonjour le monde

Les objets à usage unique sont largement utilisés. Exemples: paramètres de configuration, définitions de modules, paramètres de méthodes, valeurs de retour de fonctions, etc. ES2015 (ES6) ajoute une série de fonctions pour améliorer les littéraux d'objet.

Initialisation d'objets à partir de variables

avec le même nom. Par exemple:

 // code ES5
var
  a = 1, b = 2, c = 3;
  obj = {
    a: a,
    b: b,
    c: c
  }

// obj.a = 1, obj.b = 2, obj.c = 3

Il n'y a pas besoin de mauvaise répétition dans ES6! …

 // Code ES6
const
  a = 1, b = 2, c = 3;
  obj = {
    une
    b
    c
  }

// obj.a = 1, obj.b = 2, obj.c = 3

Cela peut être utile pour les objets renvoyés lors de l'utilisation d'un modèle de module révélateur ce qui (effectivement) permet d'identifier le code de manière à éviter les conflits de noms. Par exemple:

 // code ES6
const lib = (() => {

  somme de fonctions (a, b) {return a + b; }
  Fonction mult (a, b) {return a * b; }

  revenir {
    somme,
    mult
  }

} ());

console.log (lib.sum (2, 3)); // 5
console.log (lib.mult (2, 3)); // 6

Vous l'avez peut-être vu utilisé dans les modules ES6:

 // lib.js
somme de fonctions (a, b) {return a + b; }
Fonction mult (a, b) {return a * b; }

export {sum, mult};

Object Method Definition Shorthand

Les méthodes d'objet dans ES5 requièrent l'instruction function . Par exemple:

 // code ES5
var lib = {
  somme: fonction (a, b) {return a + b; },
  mult: fonction (a, b) {return a * b; }
}

console.log (lib.sum (2, 3)); // 5
console.log (lib.mult (2, 3)); // 6

Ceci n'est plus nécessaire dans ES6; il permet la syntaxe abrégée suivante:

 // code ES6
const lib = {
  somme (a, b) {return a + b; },
  mult (a, b) {return a * b; }
}

console.log (lib.sum (2, 3)); // 5
console.log (lib.mult (2, 3)); // 6

Il n'est pas possible d'utiliser la syntaxe de la fonction ES6 fat arrow => ici, car la méthode nécessite un nom. Cela dit, vous pouvez utiliser les fonctions fléchées si vous nommez chaque méthode directement (comme ES5). Par exemple:

 // code ES6
const lib = {
  somme: (a, b) => a + b,
  mult: (a, b) => a * b
}

console.log (lib.sum (2, 3)); // 5
console.log (lib.mult (2, 3)); // 6

Clés de propriétés dynamiques

Dans ES5, il n'était pas possible d'utiliser une variable pour un nom de clé, bien qu'il puisse être ajouté après que l'objet ait été créé. Par exemple:

 // code ES5
var
  key1 = 'un',
  obj = {
    deux: 2,
    trois: 3
  }

obj [key1] = 1;

// obj.one = 1, obj.two = 2, obj.three = 3

Les clés d'objet peuvent être dynamiquement affectées dans ES6 en plaçant une expression dans [ crochets ] . Par exemple:

 // code ES6
const
  key1 = 'un',
  obj = {
    [key1]: 1,
    deux: 2,
    trois: 3
  }

// obj.one = 1, obj.two = 2, obj.three = 3

Toute expression peut être utilisée pour créer une clé. Par exemple:

 // code ES6
const
  i = 1,
  obj = {
    ['i' + i]: je
  }

console.log (obj.i1); // 1

Une clé dynamique peut être utilisée pour des méthodes aussi bien que des propriétés. Par exemple:

 // code ES6
const
  i = 2,
  obj = {
    ['mult' + i]: x => x * i
  }

console.log (obj.mult2 (5)); // dix

Le fait de créer des propriétés dynamiques et des méthodes est une autre question. Le code peut être difficile à lire et il peut être préférable de créer des usines ou des classes d'objets

Destructuring (Variables des propriétés d'objet)

Il est souvent nécessaire d'extraire une valeur de propriété d'un objet dans une autre variable. Cela a dû être explicitement déclaré dans ES5. Par exemple:

 // code ES5
var myObject = {
  un: 'a',
  deux: 'b',
  trois: "c"
}

var
  one = myObject.one, // 'a'
  two = myObject.two, // 'b'
  trois = myObject.three; // 'c'

ES6 prend en charge la déstructuration: vous pouvez créer une variable avec le même nom qu'une propriété d'objet équivalente. Par exemple:

 // code ES6
const myObject = {
  un: 'a',
  deux: 'b',
  trois: "c"
}

const {un, deux, trois} = monObjet;
// un = 'a', deux = 'b', trois = 'c'

Il est également possible d'affecter des propriétés à des variables avec n'importe quel nom en utilisant la notation {propertyName: newVariable} . Par exemple:

 // code ES6
const myObject = {
  un: 'a',
  deux: 'b',
  trois: "c"
}

const {un: premier, deux: deuxième, trois: troisième} = myObject;
// first = 'a', second = 'b', third = 'c'

Des objets plus complexes avec des tableaux imbriqués et des sous-objets peuvent également être référencés dans des affectations destructurantes. Par exemple:

 // code ES6
const meta = {
  titre: 'Literal Object Enhanced',
  pageinfo: {
    url: 'https://www.sitepoint.com/',
    description: 'Comment utiliser les littéraux d'objet dans ES2015 (ES6).',
    mots-clés: 'javascript, objet, littéral'
  }
}

const {
  titre: doc,
  pageinfo: {keywords: topic}
} = meta;

/ *
  doc = 'Littéraux d'objets améliorés'
  topic = 'javascript, objet, littéral'
* /

Cela semble initialement compliqué, mais rappelez-vous que dans toutes les affectations déstructurantes:

• le côté gauche de l'assignation est la source destructurante – le tableau ou l'objet qui contient les données extraites
• ] le côté droit de l'assignation est la cible déstructurante – le modèle qui définit la variable assignée.

Il y a un certain nombre de mises en garde. Vous ne pouvez pas démarrer une instruction avec une accolade car elle ressemble à un bloc de code. Par exemple:

 {a, b, c} = myObject; // ÉCHOUE

Vous devez déclarer les variables, par exemple:

 const {a, b, c} = myObject; // TRAVAUX

ou utilisez des parenthèses si des variables ont déjà été déclarées – par exemple:

 let a, b, c;
({a, b, c} = monObjet); // TRAVAUX

Veillez donc à ne pas mélanger des variables déclarées et non déclarées

Il existe un certain nombre de situations où la déstructuration d'objet est utile

Paramètres de fonction par défaut

Il est souvent plus facile de passer un objet à un fonction que d'utiliser une longue liste d'arguments. Par exemple:

 prettyPrint ({
  titre: 'Literal Object Enhanced',
  éditeur: {
    nom: 'SitePoint',
    url: "https://www.sitepoint.com/"
  }
});

Dans ES5, il est nécessaire d'analyser l'objet pour vérifier que les valeurs par défaut appropriées sont définies. Par exemple:

 // ES5 affectez des valeurs par défaut
function prettyPrint (param) {

  param = param || {};
  var
    pubTitle = param.title || 'Pas de titre',
    pubName = (param.publisher && param.publisher.name) || "Pas d'éditeur"

  return pubTitle + ',' + pubName;

}

Dans ES6, nous pouvons assigner une valeur par défaut à n'importe quel paramètre. Par exemple:

 // Valeur par défaut ES6
Fonction prettyPrint (param = {}) {...}

Nous pouvons ensuite utiliser la déstructuration pour extraire des valeurs et assigner des valeurs par défaut si nécessaire:

 // ES6 valeur par défaut déstructurée
fonction prettyPrint (
  {
    title: pubTitle = 'Aucun titre',
    éditeur: {name: pubName = 'Aucun éditeur'}
  } = {}
) {

  retourne `$ {pubTitle}, $ {pubName}`;

}

Le fait de trouver ce code plus facile à lire est une autre affaire

Analyse des objets retournés

Les fonctions ne peuvent renvoyer qu'une seule valeur, mais ce pourrait être un objet avec des centaines de propriétés et / ou méthodes. Dans ES5, il est nécessaire d'obtenir l'objet retourné, puis d'extraire les valeurs en conséquence. Par exemple:

 // code ES5
var
  obj = getObject (),
  un = obj.one,
  deux = obj.two,
  trois = obj.three;

La déstructuration d'ES6 rend ce processus plus simple, et il n'est pas nécessaire de conserver l'objet comme variable:

 // Code ES6
const {un, deux, trois} = getObject ();

Vous avez peut-être déjà vu des affectations similaires dans le code Node.js. Par exemple, si vous avez uniquement besoin des méthodes fs File System readFile et writeFile vous pouvez les référencer directement. Par exemple:

 // ES6 Node.js
const {readFile, writeFile} = require ('fs');

readFile ('file.txt', (err, data) => {
  console.log (err || data);
});

writeFile ('new.txt', 'nouveau contenu', err => {
  console.log (err || 'fichier écrit');
});

ES2018 (ES9) Rest / Spread Properties

Dans ES2015, la notation de paramètre de repos et d'opérateur de propagation à trois points ( ... ) s'applique uniquement aux baies. ES2018 permet une fonctionnalité de repos / propagation similaire pour les objets. Un exemple basique:

 const myObject = {
  a: 1,
  b: 2,
  c: 3
}

const {a, ... x} = monObjet;
// a = 1
// x = {b: 2, c: 3}

Vous pouvez utiliser cette technique pour transmettre des valeurs à une fonction:

 restParam ({
  a: 1,
  b: 2,
  c: 3
});

function restParam ({a, ... x}) {
  // a = 1
  // x = {b: 2, c: 3}
}

Vous ne pouvez utiliser qu'une seule propriété de repos à la fin de la déclaration. De plus, cela ne fonctionne que sur le niveau supérieur de chaque objet et non sur des sous-objets.

L'opérateur de propagation peut être utilisé dans d'autres objets. Par exemple:

 const
  obj1 = {a: 1, b: 2, c: 3},
  obj2 = {... obj1, z: 26};

// obj2 est {a: 1, b: 2, c: 3, z: 26}

Vous pouvez utiliser l'opérateur spread pour cloner des objets ( obj2 = {... obj1}; ), mais sachez que vous n'avez que des copies superficielles. Si une propriété contient un autre objet, le clone fera référence au même objet.

ES2018 (ES9) Le support de la propriété reste / spread est inégal, mais il est disponible dans Chrome, Firefox et Node.js 8.6 +.

ont toujours été utiles. Les nouvelles fonctionnalités introduites à partir de ES2015 n'ont pas fondamentalement changé le fonctionnement de JavaScript, mais elles économisent l'effort de dactylographie et conduisent à un code plus clair et plus concis.

Craig est un consultant web indépendant britannique qui a construit sa première page pour IE2.0 en 1995. Depuis ce temps, il préconise les normes, l'accessibilité et les meilleures pratiques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler