Comment détruire les objets et les tableaux en javascript | Expliqué avec des exemples

La version ES6 est venue avec une vague de nouvelles fonctionnalités, l'une de ces fonctionnalités était la capacité de détruire des objets et des tableaux. Des tableaux ou des objets destructeurs sont le processus de prise de valeurs des objets ou des tableaux et de les attribuer à des variables locales en utilisant la syntaxe destructrice.

Destructurant fonctionne en attribuant les valeurs des éléments du tableau / objet à plusieurs variables en utilisant une seule ligne de code, puis vous pouvez accéder à ces valeurs en utilisant ces nouvelles variables. N'oubliez pas qu'il n'y a pas de «symbole» ou «opérateur» destructrice particulière.

Syntaxe
La syntaxe de l'utilisation de l'affectation destructuration est assez simple; Pour détruire l'objet en plusieurs variables:

• Utilisez les supports bouclés après la définition variable
• Mettez les variables à l'intérieur des supports bouclés
• puis définissez-le (déclaration variable entière) égale à l'objet

Objets:

const var1, var2 = objectName;

De même, pour détruire les tableaux à plusieurs variables, utilisez les crochets [] au lieu de supports bouclés.

Arris:

const [variable1, variable2] = arrayName;

Note: Dans le cas des objets destructuration, le nom des variables doit être le même que le nom des propriétés de l'objet.

Tableaux destructeurs en javascript

Créez un tableau contenant des éléments aléatoires à l'intérieur pour démontrer la destruction des tableaux en JavaScript en utilisant la commande suivante:

user = ["Alberto", "Rodrigo", 25, "Male"];

Vous pouvez voir, nous avons un tableau avec les détails d'une personne. La solution traditionnelle de stockage des valeurs des éléments de ce tableau dans les variables locales serait:

const FirstName = user [1];
const lastName = user [2];
const Age = utilisateur [3];
const Sexe = utilisateur [4];

C'est un long processus et nécessite plus de lignes de code.

En utilisant les fonctionnalités destructuration, le code ci-dessus change:

const [firstName, LastName, Age, Gender] = utilisateur;

Juste avec cette seule ligne, nous avons créé 4 variables et leur avons attribué les valeurs respectives du tableau.

Pour vérifier cela, vous pouvez imprimer la valeur de l'une de ces variables avec le code suivant:

console.log (firstName);
console.journal (genre);

L'extrait de code complet serait:

Array = ["Alberto", "Rodrigo", 25, "Male"];
const [firstName, LastName, Age, Gender] = Array;
console.log (firstName);
console.journal (genre);

Vous obtiendrez la sortie suivante:

Vous pouvez voir, les variables avaient leurs valeurs des éléments du tableau.

Détructeur des tableaux imbriqués

Destructing fonctionne même avec des tableaux imbriqués. Par exemple, prenez un tableau imbriqué qui peut être créé avec les lignes de code suivantes:

User = ["Alberto", "Rodrigo", 25, "Homme", ["M.John "," Samantha "]];

Vous pouvez voir que le dernier élément du tableau est un autre tableau contenant les noms du père et de la mère de la personne.

Nous pouvons détruire ce tableau imbriqué en utilisant le code suivant:

const [firstName, LastName, Age, Gender, [Fathername, MotherName]] = Array;

Vous pouvez vérifier cette destruction en utilisant les commandes suivantes:

console.log (firstName);
console.journal (genre);
console.log (fathername);
console.journal (nom mère);

L'extrait de code complet est:

Array = ["Alberto", "Rodrigo", 25, "Homme", ["M.John "," Samantha "]];
const [firstName, LastName, Age, Gender, [Fathername, MotherName]] = Array;
console.log (firstName);
console.journal (genre);
console.log (fathername);
console.journal (nom mère);

Vous verrez la sortie suivante à l'écran lorsque vous exécutez le programme.

Vous pouvez voir que vous avez pu détruire avec succès le tableau et vérifier le résultat également.

Objets destructrices en javascript

Supposons que nous ayons un objet «personne»:

var personne =
Firstname: "John",
Âge: 25,
LastName: "Doe",
Emploi: "Auditeur",
;

Et les paires de valeurs clés sont les propriétés de cette personne: prénom, nom de famille, âge et travail.

Vous pouvez détruire cet objet en utilisant la ligne suivante:

var FirstName, Age, LastName, Job = personne;

Note: Lorsque vous détruisez un objet, le nom des variables doit correspondre au nom des propriétés de l'objet autrement, la destructeur ne fonctionnera pas et la valeur de la variable serait indéfini.

Vous pouvez vérifier la destructeur en imprimant les valeurs de ces variables sur la console en utilisant les lignes de code suivantes.

console.log (firstName);
console.log (lastName);
console.journal (âge);
console.journal (travail);

L'extrait de code complet est:

var personne =
Firstname: "John",
Âge: 25,
LastName: "Doe",
Emploi: "Auditeur",
;
var FirstName, Age, LastName, Job = personne;
console.log (firstName);
console.log (lastName);
console.journal (âge);
console.journal (travail);

Lorsque vous exécutez ce programme, vous verrez la sortie suivante:

Vous avez réussi à créer un objet en javascript, et c'est tout pour les objets et les tableaux destructure.

Conclusion

Les tableaux et les objets peuvent être détruits en utilisant la syntaxe destructuration en JavaScript, des tableaux et objets destructuration sont une nouvelle fonctionnalité qui a été introduite dans la version JavaScript ES6. La destructeur est le processus d'attribution des valeurs des éléments / propriétés des tableaux / objets aux variables locales en utilisant une seule ligne de code. Dans ce guide, nous avons appris comment nous pouvons détruire les tableaux, les tableaux imbriqués et les objets à l'aide d'exemples.