Une brève introduction à la déstructuration des baies dans ES6

La déstructuration en JavaScript est une méthode simplifiée d'extraction de plusieurs propriétés d'un tableau en prenant la structure et en la déconstruisant en ses propres parties constituantes via des affectations en utilisant une syntaxe qui ressemble aux littéraux de tableau.

Il crée un modèle qui décrit le type de valeur que vous attendez et effectue l'affectation. La déstructuration des tableaux utilise la position.

Consultez l'extrait de code ci-dessous.

var [first, second, third] = ["Laide", "Gabriel", "Jets"];

La syntaxe avec la destruction.

var first = "laide", second = "Gabriel", third = "Jets";

La syntaxe sans destruction.

Vous ne pouvez pas utiliser les nombres pour la déstructuration. Les nombres généreront une erreur car les nombres ne peuvent pas être des noms de variables.
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

Cette syntaxe génère une erreur.

La destruction a rendu l'extraction de données à partir d'un tableau très simple et lisible. Imaginez essayer d'extraire des données d'un tableau imbriqué avec 5 ou 6 niveaux. Ce serait très fastidieux. Vous utilisez un littéral de tableau sur le côté gauche de l'affectation.

var thing = ["Table", "Chair", "Fan"];var [a, b, c] = thing;

Il prend chaque variable sur le littéral du tableau sur le côté gauche et la mappe au même élément au même index dans le tableau.

console.log(a); // Output: Tableconsole.log(b); //Output: Chairconsole.log(c); //Output: Fan

La déclaration et l'affectation peuvent être effectuées séparément dans la déstructuration.

var first, second;[first, second] = ["Male", "Female"];

Si le nombre de variables passées aux littéraux du tableau de déstructuration est supérieur aux éléments du tableau, alors les variables qui ne sont mappées à aucun élément du tableau retournentundefined.

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c, d, e] = things;console.log(c); //Output: Fanconsole.log(d); //Output: Rugconsole.log(e); //Output: undefined

Si le nombre de variables passées aux littéraux du tableau de déstructuration est inférieur à celui des éléments du tableau, les éléments sans variables auxquels mapper sont juste laissés. Il n'y a aucune erreur.

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c] = things;console.log(c); // Output: Fan

Destructuration des tableaux renvoyés

La destruction rend le travail avec une fonction qui renvoie un tableau sous forme de valeur plus précis. Cela fonctionne pour tous les itérables.

function runners(){ return ["Sandra", "Ola", "Chi"];}
var [a, b, c] = runners();console.log(a); //Output: Sandraconsole.log(b); //Output: Olaconsole.log(c); //Output: Chi

Valeur par défaut

La déstructuration permet d'affecter une valeur par défaut à une variable si aucune valeur ou undefinedest passé. C'est comme fournir une solution de secours lorsque rien n'est trouvé.

var a, b;[a = 40, b = 4] = [];console.log(a); //Output: 40console.log(b); //Output: 4
[a = 40, b = 4] = [1, 23];console.log(a); //Output: 1console.log(b); //Output: 23

Les valeurs par défaut peuvent également faire référence à d'autres variables, y compris celle du même littéral de tableau.

var [first = "Cotlin", second = first] = [];console.log(first); //Output: Cotlinconsole.log(second); //Output: Cotlin
var [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Koku
var [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.log(second); //Output: Lydia

Ignorer certaines valeurs

La déstructuration vous permet de mapper une variable aux éléments qui vous intéressent. Vous pouvez ignorer ou ignorer les autres éléments du tableau en utilisant des virgules de fin.

var a, b;[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Output: Lordyconsole.log(b); //Output: Roses

Le paramètre Rest et la syntaxe de diffusion

Le nouvel opérateur (…) qui a été ajouté dans ES6 peut être utilisé dans la déstructuration. Si l' opérateur (…) apparaît sur le côté gauche de la déstructuration, il s'agit d'un PARAMÈTRE REPOS . Un paramètre Rest est utilisé pour mapper tous les éléments restants dans le tableau qui n'ont pas été mappés à la variable rest elle-même. C'est comme rassembler ce qui reste . La variable Rest doit toujours être la dernière sinon un est lancé.SyntaxError

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, , third, ...others] = planets;
console.log(first); //Output: Mercuryconsole.log(third); //Output: Venusconsole.log(others); //Output: ["Mars", "Pluto", "Saturn"]

Si l'opérateur (…) apparaît à droite dans la déstructuration, alors c'est une SYNTAXE SPREAD . Ilprend tous les autres éléments du tableau sur lesquels aucune variable n'est mappée, puis le mappe à la variable rest.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Lorsque vous pouvez avoir plus de variables sur le côté gauche, il mappe les éléments individuels du tableau de manière égale aux variables.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Mercuryconsole.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Échange ou échange de variables

Une expression de déstructuration peut être utilisée pour permuter les valeurs de deux variables.

var a, b;[a, b] = ["Male", "Female"];[a, b] = [b, a];
console.log(a); //Output: Femaleconsole.log(b); //Output: Male

Destructuration des baies imbriquées

Vous pouvez également effectuer une déstructuration imbriquée avec des tableaux. L'élément correspondant doit être un tableau afin d'utiliser un littéral de tableau de déstructuration imbriqué pour affecter des éléments qu'il contient à des variables locales.

var numbers = [8, [1, 2, 3], 10, 12];var [a, [d, e, f]] = numbers;
console.log(a); // Output: 8console.log(d); // Output: 1console.log(e); // Output: 2

Destructuration de plusieurs baies

Vous pouvez déstructurer un tableau plusieurs fois dans le même extrait de code.

var places = ["first", "second", "third", "fourth"];var [a, b, , d] = [f, ...rest] = places;
console.log(a); //Output: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.log(rest); //Output: ["second", "third", "fourth"]

Conclusion

Vous pouvez copier et coller le code sur le site Web de Babel pour voir à quoi ressemblerait le code si la déstructuration n'existait pas. Vous auriez écrit plus de lignes de code, mais la déstructuration simplifie tout.