Destructuration des objets, paramètres de repos et syntaxe de propagation | Expliqué en javascript

La destruction des objets, les paramètres de repos et la syntaxe de propagation sont tous considérés comme des sujets avancés JavaScript. Nous allons les décomposer en étapes compréhensibles simples et les expliquer avec des exemples. Ces trois fonctionnalités ont été introduites dans JavaScript avec la sortie de ECMAV6 JavaScript (ES6 JS)

Destructuration des objets

C'est le processus de prise des «valeurs» des paires de valeurs clés d'un objet et de les placer dans des variables individuelles avec une seule ligne de code. Cette ligne de code unique attribue non seulement des valeurs aux variables, mais crée même ces variables également. Nous pouvons dire que nous déclarons et initialisons plusieurs variables en une seule ligne de code avec une détructage des objets.

Syntaxe de l'objet Destructuration:
Après la déclaration variable (const, let, var), placez les identificateurs des variables à l'intérieur des supports bouclés et mettez cette équation entière égale à l'objet que nous voulons destructure. N'oubliez pas que le nom des variables doit être le même que la «clé» des paires de valeurs clés de l'objet.

const identifier1, identifier2, identifier3 = objectName;

Remarque: il n'y a pas de «opérateur» destructeur, cependant, la déclaration ci-dessus est appelée «opérateur d'affectation destructrice»

Exemple:

Pour démontrer la destructeur de l'objet, nous allons d'abord créer un objet en javascript en utilisant les lignes de code suivantes:

téléphone =
Nom: 'iPhone',
Modèle: '13 Pro ',
Société: «Apple»,
Popularité: 10

Maintenant que nous avons notre objet, nous pouvons le détruire en diverses variables, avec la ligne de code suivante:

const nom, modèle = téléphone;

Remarque: nous ne faisons que déstouer l'objet et stocker deux valeurs avec le «nom» clé et le «modèle», c'est pourquoi nous devons donner le nom de l'identifiant le même que les touches des paires de valeurs clés.

Vous pouvez même accéder aux valeurs en utilisant des variables comme:

console.log ("Le nom du mobile est:" + nom);
console.Log ("Le modèle du mobile est:" + modèle);

L'extrait de code complet de cet exemple est comme

téléphone =
Nom: "iPhone",
Modèle: "13 Pro",
Société: "Apple",
Popularité: 10,
;
const nom, modèle = téléphone;
console.log ("Le nom du mobile est:" + nom);
console.Log ("Le modèle du mobile est:" + modèle);

Vous obtiendrez la sortie suivante lorsque vous exécutez ce code:

C'est tout pour la destructeur d'objets dans JavaScript es6

Paramètres de repos

Les paramètres de repos sont utilisés lorsque nous ne sommes pas certain du nombre de paramètres qu'une fonction doit prendre. Nous invitons le compilateur en utilisant l'opérateur à triple point avant le nom du paramètre pour indiquer clairement qu'il s'agit d'un paramètre de repos et non d'un paramètre normal.

Les valeurs à l'intérieur du paramètre de repos sont stockées comme un tableau sous le même identifiant que le paramètre lui-même.

Syntaxe
Comme mentionné ci-dessus, nous utilisons un opérateur à trois points avant l'identifiant dans les paramètres d'une fonction pour en faire un paramètre de repos

fonction xyz (… paramidentifier) ​​
// corps de la fonction

Restriction pour définir les paramètres de repos:

• Un seul paramètre de repos dans une fonction.
• Doit être le dernier paramètre de la fonction

Exemple de paramètres de repos

Pour démontrer l'utilisation des paramètres de repos avec JavaScript, nous allons créer une fonction simple qui résume les nombres qui lui sont donnés comme arguments avec les lignes de code suivantes:

Sum de fonction (a, b)
retourner a + b;

Comme vous pouvez le voir, cette fonction ne peut résumer que 2 nombres, mais nous voulons une fonction qui peut prendre une quantité indéfinie de nombres et les résumer pour nous, nous changeons donc la fonction pour le faire ressembler:

Sum de fonction (… nombres)
résultat = 0;
pour (valeur des nombres)
résultat = résultat + valeur;

Résultat de retour;

Comme vous pouvez le voir, nous ne prenons qu'un seul paramètre qui est le paramètre de repos qui permettra à cette fonction de prendre une quantité indéfinie de nombres et ensuite nous utilisons la boucle pour traverser les valeurs placées à l'intérieur du tableau et les ajoutant dans les autres. Tout ce qui reste à faire est d'appeler cette fonction et d'imprimer la valeur de retour avec les lignes de code suivantes:

console.Log (somme (6, 3, 83, 55, 13, 45));
console.journal (somme (1, 2, 3));

Vous verrez la sortie suivante à l'écran lorsque vous exécutez ce code:

C'est pour utiliser les paramètres de repos en javascript, nous pouvons maintenant passer à notre prochain sujet.

Répartir la syntaxe

Il est utilisé pour transmettre les éléments d'un objet itérable (soit une table.

Syntaxe
La syntaxe de la syntaxe de propagation est assez basique, nous utilisons simplement l'opérateur de triple point avant le nom de variable tout en le dépassant comme un argument.

(… ArgumentVariable);

Exemple

Pour démontrer l'utilisation de la syntaxe de propagation en JavaScript, nous allons avoir besoin d'une fonction que nous pouvons créer avec les lignes de code suivantes:

fonction addnumbers (a, b, c, d, e)
retourner a + b + c + d + e;

Maintenant que nous avons notre fonction, nous avons besoin d'un tableau qui contiendra nos chiffres à ajouter,

nombres = [5, 3, 1, 6, 2];

La dernière chose qui reste à faire est de transmettre ce tableau en utilisant la syntaxe de propagation dans la fonction avec la ligne de code suivante:

console.log (addnumbers (… nombres));

Vous devriez voir le résultat suivant sur votre console:

Comme vous pouvez le voir, les éléments du tableau ont été transmis avec succès à la fonction comme arguments avec l'utilisation de la syntaxe de propagation.

Paramètre de repos vs syntaxe de propagation

Souvent, les utilisateurs sont confus entre le paramètres de repos et le répartir la syntaxe pour passer des arguments. Cette confusion est créée en raison du fait que le opérateur car ces deux fonctionnalités sont les mêmes (dot-opérateur). Pour aborder cette confusion, nous pouvons dire que:

• Si l'opérateur de points est utilisé dans la définition de la fonction pour définir un paramètre, il sera appelé le Opérateur de paramètre de repos.
• D'un autre côté, si cet opérateur est utilisé en passant des arguments à une fonction, il sera appelé le opérateur de propagation.

Conclusion

JavaScript a diverses fonctionnalités, en particulier la version ECMA V6 de JavaScript a bombardé la communauté de programmation avec de nombreuses fonctionnalités utiles. Certaines de ces fonctionnalités sont: la destructeur des objets, les paramètres de repos et la syntaxe de propagation. Dans cet article, nous avons traversé l'explication et l'utilisation de ces trois fonctionnalités ainsi que leurs exemples.