JavaScript Affectation de déstructuration

Object et Array sont les deux structures de données les plus couramment utilisées en JavaScript.

Avec l'aide des objets, vous pouvez créer une entité stockant des éléments de données par clé. Avec l'aide des tableaux, vous pouvez assembler des éléments de données en une collection ordonnée.

En cas de passage de ceux-ci à une fonction, il se peut qu'elle ait besoin non pas d'un objet ou d'un tableau dans son ensemble, mais de quelques éléments individuels.

Les expressions littérales de l'objet et du tableau permettent de créer des packages ad hoc. Voici la syntaxe:

const x = [1, 2, 3, 4, 5];

L'affectation de déstructuration est une syntaxe unique qui aide à "décomposer" les objets ou les tableaux en un groupe de variables. La déstructuration peut également fonctionner efficacement avec des fonctions complexes, des valeurs par défaut, et plus encore.

L'affectation de déstructuration utilise la syntaxe suivante:

Vous pouvez trouver des fonctionnalités similaires dans d'autres langages. Par exemple, en Python ou Perl.

Maintenant, examinons un exemple de déstructuration de tableau en variables:

En conséquence, il est possible de travailler avec des variables au lieu de membres de tableau.

cela fonctionnera encore mieux si vous le combinez avec split ou d'autres méthodes de retour de tableau:

let [firstName, surname] = "John Doe".split(' ');

Notez que la déstructuration n'est pas la même chose que "destructive".

Nous l'appelons déstructuration car elle "déstructurise" par le biais de la méthode de copie d'éléments dans des variables.

Voici une façon plus courte d'écrire:

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

Prenez en considération que vous pouvez jeter les éléments indésirables en utilisant une virgule supplémentaire, comme ceci:

Il peut fonctionner avec n'importe quel itérable sur le côté droit:

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

De plus, vous pouvez utiliser n'importe quels éléments assignables du côté gauche.

Par exemple, la propriété d'un objet:

Une autre chose utile est qu'il est possible d'utiliser la méthode Object.entries(obj) avec la déstructuration pour boucler sur les clés et les valeurs d'un objet.

Voici un exemple:

Le reste ‘…’

Au cas où il est nécessaire d'obtenir non seulement les premières valeurs mais aussi d'assembler toutes les suivantes, vous avez la possibilité d'ajouter un autre paramètre pour obtenir "le reste" en utilisant simplement trois points "...”, comme ceci:

Des valeurs par défaut

En cas de valeurs moins nombreuses dans le tableau que de variables dans l'affectation, aucune erreur ne se produira. Les valeurs qui sont absentes seront considérées comme indéfinies:

Si vous voulez une valeur par défaut pour remplacer celle qui manque, utilisez le signe =, comme suit:

Destructurer un objet

Vous pouvez utiliser l'affectation de déstructuration avec des objets, également, en utilisant la syntaxe de base suivante:

let {  var1,  var2} = {  var1: …,  var2: …}

Sur le côté droit, il y a un objet existant qu'il faut diviser en variables. Sur le côté gauche, il y a un motif pour faire correspondre les propriétés. Le signe des trois points {...} inclut un groupe de noms de variables.

Voici un exemple:

Les propriétés options.title, options.width et options.height sont attribuées à des variables correspondantes. L'agencement n'a pas d'importance. Cette option fonctionnera également:

// changed the order in let {...}
let {
  year,
  model,
  title
} = {
  title: "Car",
  model: "BMW M5",
  year: 2020
}

Pour attribuer une propriété à une variable avec un nom différent, alors vous pouvez agir ainsi:

Pour les propriétés possiblement manquantes, vous avez la possibilité de définir des valeurs par défaut en utilisant le signe de "=", comme suit:

Les valeurs par défaut peuvent être n'importe quelles expressions ou appels de fonction.

En cas de présence d'un objet complexe avec une gamme de propriétés, vous pouvez choisir d'extraire ce dont vous avez besoin, comme suit:

Le modèle Rest “…”

Un autre scénario peut également se produire: la quantité de propriétés de l'objet est supérieure à celle des variables que vous possédez. Dans de tels cas, vous pouvez utiliser le modèle rest. Mais, notez qu'il ne fonctionne que sur les navigateurs modernes.

Voici l'exemple:

Destructuration imbriquée

Imaginez qu'un tableau ou un objet contient d'autres tableaux ou objets imbriqués. Des motifs côté gauche plus complexes peuvent être utilisés pour extraire des portions plus profondes.

Dans l'exemple ci-dessous, options contient un autre objet dans la propriété views et un tableau dans la propriété items :

Il est important de savoir que toutes les propriétés de l'objet options sauf extra (il est absent du côté gauche), sont attribuées à des variables correspondantes.

Ainsi, les model, year, item1, item2, et title sont de la même valeur. Mais, il n'existe pas de variables pour views et items.

Les paramètres de Smart Function

Parfois, une fonction a de nombreux paramètres, et la plupart d'entre eux sont facultatifs. Mais, voyons qu'une fonction crée un menu. Elle aura une hauteur, une largeur, une liste d'articles, un titre, et plus encore.

Nous ne vous recommandons pas d'écrire la fonction, comme ceci:

function showBook(title = "Javascript", page = 200,  species : "programming"
, items = []) {
  // ...
}

Le principal problème est de se souvenir de l'ordre des arguments. Un autre problème est de trouver un moyen d'appeler une fonction lorsque la majorité des paramètres sont bons par défaut.

L'action la plus facultative est de passer des paramètres sous forme d'objet. La fonction les déstructurisera en variables d'un seul coup, comme ceci:

Il existe un autre moyen plus complexe de déstructuration, comprenant des objets imbriqués et des mappages de colonnes.

Par exemple:

La syntaxe complète ressemblera à ceci:

function ({
  incomingProperty: varName = defaultValue
    ...
})

Comme vous pouvez le voir, c'est la même chose que pour une affectation de déstructuration.

Ensuite, pour l'objet des paramètres, il y aura une variable varName pour incomingProperty.

Une déstructuration comme celle-ci considère que showBook() n'a pas d'argument. Au cas où vous voulez toutes les valeurs par défaut, alors spécifiez un objet vide, comme ceci:

showBook({}); // ok, all values are default
showBook(); // this would give an error

Il est possible de corriger cela en définissant {} comme valeur par défaut pour l'objet des paramètres.

Par exemple: