ES6 en action: affectation destructuring –

L'affectation destructive semble complexe. Cela me rappelle des termes orientés objet tels que encapsulation et polymorphisme . Je suis convaincu qu'ils ont été choisis pour rendre les concepts simples plus sophistiqués!

En fait, l'affectation de destructuration ECMAScript 6 (ES2015) vous permet d'extraire des éléments individuels de tableaux ou d'objets et de les placer dans une syntaxe sténographique. Ceux venant de PHP peuvent avoir rencontré la fonction list () qui extrait des tableaux dans des variables en une seule opération. ES6 le prend à un autre niveau.

Supposons que nous ayons un tableau:

 var myArray = ['a', 'b', 'c'];

Nous pouvons extraire ces valeurs par index dans ES5:

 var
  one = monArray [0],
  deux = myArray [1],
  trois = myArray [2];

// un = 'a', deux = 'b', trois = 'c'

La déstructuration ES6 permet une alternative plus simple et moins sujette aux erreurs:

 const [one, two, three] = myArray;

// un = 'a', deux = 'b', trois = 'c'

Vous pouvez ignorer certaines valeurs, par exemple

 const [one, , three] = myArray;

// one = 'a', trois = 'c'

ou utilisez l'opérateur de repos ( ... ) pour extraire les éléments restants:

 const [one, ...two] = myArray;

// one = 'a', two = ['b, 'c']

La déstructuration fonctionne également sur les objets, par exemple

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

// exemple ES5
var
  one = myObject.one,
  deux = myObject.two,
  trois = myObject.three;

// un = 'a', deux = 'b', trois = 'c'

// Exemple de déstructuration ES6
const {un, deux, trois} = monObjet;

// un = 'a', deux = 'b', trois = 'c'

Dans cet exemple, les noms de variable un deux et trois correspondaient aux noms de propriété d'objet. Nous pouvons également assigner des propriétés à des variables avec n'importe quel nom, par exemple

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

// Exemple de déstructuration ES6
const {un: premier, deux: deuxième, trois: troisième} = myObject;

// first = 'a', second = 'b', third = 'c'

Des objets imbriqués plus complexes peuvent également être référencés, par exemple

 const meta = {
  titre: 'Destructuring Assignment',
  auteurs: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  éditeur: {
    nom: 'SitePoint',
    url: 'http://www.sitepoint.com/'
  }
}

const {
    titre: doc,
    auteurs: [{ firstname: name }],
    éditeur: {url: web}
  } = meta;

/ *
  doc = 'Destructuring Assignment'
  nom = 'Craig'
  web = 'http://www.sitepoint.com/'
* /

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

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

Il existe un certain nombre d'autres mises en garde. Tout d'abord, vous ne pouvez pas démarrer une instruction avec une accolade, car elle ressemble à un bloc de code, par exemple

 // CE N'EST PAS
{a, b, c} = monObjet;

Vous devez déclarer les variables, par exemple

 // CECI FONCTIONNE
const {a, b, c} = monObjet;

ou utilisez des parenthèses si des variables sont déjà déclarées, par exemple

 // CECI FONCTIONNE
({a, b, c} = monObjet);

Vous devriez également vous méfier du mélange de variables déclarées et non déclarées, par exemple

 // CE N'EST PAS
laisse un;
Soit {a, b, c} = monObjet;

// CELA MARCHE
a, b, c;
({a, b, c} = monObjet);

Voilà les bases de la déstructuration. Alors, quand cela serait-il utile? Je suis content que vous ayez demandé …

Déclaration plus facile

Les variables peuvent être déclarées sans définir explicitement chaque valeur, par exemple

 // ES5
var a = 'un', b = 'deux', c = 'trois';

// ES6
const [a, b, c] = ['one', 'two', 'three'];

Certes, la version déstructurée est plus longue. C'est un peu plus facile à lire, bien que cela ne soit pas forcément le cas avec d'autres items.

Échange de valeur variable

L'échange de valeurs dans ES5 requiert une troisième variable temporaire, mais beaucoup plus simple:

 var a = 1, b = 2;

// Echange ES5
var temp = a;
a = b;
b = temp;

// a = 2, b = 1

// ES6 échange
[a, b] = [b, a];

// a = 1, b = 2

Vous n'êtes pas limité à deux variables; n'importe quel nombre d'éléments peut être réarrangé, par exemple

 // tourner à gauche
[b, c, d, e, a] = [a, b, c, d, e];

Paramètres de la fonction par défaut

Supposons que nous ayons une fonction pour générer notre objet meta :

 var meta = {
  titre: 'Destructuring Assignment',
  auteurs: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  éditeur: {
    nom: 'SitePoint',
    url: 'http://www.sitepoint.com/'
  }
}

prettyPrint (méta);

Dans ES5, il est nécessaire d'analyser cet objet pour vérifier que les valeurs par défaut appropriées sont disponibles, par exemple

 // Valeurs par défaut ES5
function prettyPrint (param) {
  param = param || {};
  var
    pubTitle = param.title || 'Pas de titre',
    pubName = (param.publisher & amp; & amp; 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
function prettyPrint (param = {}) {

mais 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'}
  } = {}
) {
  return pubTitle + ',' + pubName;
}

Je ne suis pas convaincu que cela soit plus facile à lire, mais beaucoup plus court.

Renvoyer plusieurs valeurs à partir d'une fonction

Les fonctions ne peuvent renvoyer qu'une seule valeur, mais peut être un objet complexe ou un tableau multidimensionnel . L'affectation destructuring rend cela plus pratique, par exemple

 function f () {
  retour [1, 2, 3];
}

const [a, b, c] = f ();

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

For-of itération

Considérons un tableau d'informations de livre:

 const books = [
  {
    title: 'Full Stack JavaScript',
    author: 'Colin Ihrig and Adam Bretz',
    url: 'http://www.sitepoint.com/store/full-stack-javascript-development-mean/'
  },
  {
    title: 'JavaScript: Novice to Ninja',
    author: 'Darren Jones',
    url: 'http://www.sitepoint.com/store/leaern-javascript-novice-to-ninja/'
  },
  {
    title: 'Jump Start CSS',
    author: 'Louis Lazaris',
    url: 'http://www.sitepoint.com/store/jump-start-css/'
  },
];

L'ES6 for-of est similaire à for-in sauf qu'il extrait chaque valeur plutôt que l'index / clé, par exemple

 pour (const b de livres ) {
  console.log (b.title + 'par' + b.author + ':' + b.url);
}

L'affectation destructive fournit d'autres améliorations, par exemple

 pour (const {titre, auteur, url} des livres) {
  console.log (titre + 'par' + auteur + ':' + url);
}

Gestion des expressions régulières

Les fonctions d'expressions régulières telles que match renvoient un tableau d'éléments correspondants pouvant constituer la source d'une affectation destructuring:

 const [a, b, c, d] = 'one two three '.match (/  w + / g);

// a = 'un', b = 'deux', c = 'trois', d = indéfini

Support d'affectation destructuring

L'affectation destructuring ne peut pas révolutionner votre vie de développement, mais il pourrait sauver un effort de frappe considérable!

Actuellement, support pour la déstructuration affectation est bon. Il est disponible dans Node et tous les principaux navigateurs, à l'exception d'Internet Explorer. Si vous devez supporter des navigateurs plus anciens, il est conseillé d'utiliser un compilateur tel que Babel ou Traceur qui traduira les affectations déstructurantes ES6 en un équivalent ES5.

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