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:

Javascript arrays destructuring

const x = [1, 2, 3, 4, 5]; const [y, z] = x; console.log(y); // 1 console.log(z); // 2

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:

Javascript arrays destructuring

// we have an array with the name and surname let arr = ["John", "Doe"]; // destructuring assignment // sets firstname = arr[0] // and surname = arr[1] let [firstname, surname] = arr; console.log(firstname); // John console.log(surname); // Doe

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:

Javascript arrays destructuring

// second element is not needed let [name, age , profession] = ["David", "23", "programmer"]; console.log(profession); // programmer

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:

Javascript arrays destructuring

let user = {}; [user.name, user.surname] = "John Doe".split(' '); console.log(user.name); // John

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:

Javascript object entries method with destructuring

let user = { name: "Maria", age: 25 }; // loop over keys-and-values for (let [key, value] of Object.entries(user)) { console.log(`${key}:${value}`); // name:Maria, then age:25 }

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:

Javascript arrays rest

let [name1, name2, ...rest] = ["John", "Doe", "doctor", "surgeon"]; console.log(name1); // John console.log(name2); // Doe // Note that type of `rest` is Array. console.log(rest[0]); // doctor console.log(rest[1]); // surgeon console.log(rest.length); // 2

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:

Javascript arrays rest

let [firstName, surname] = []; console.log(firstName); // undefined console.log(surname); // undefined

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

Javascript arrays rest

// default values let [name = "David", surname = "Smith"] = ["Peter"]; console.log(name); // Peter (from array) console.log(surname); // Smith (default used)

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: