Qu'est-ce que la syntaxe de diffusion en javascript | Expliqué avec des exemples
JavaScript a publié de nombreuses fonctionnalités avec la sortie du JavaScript ES6 en 2015, l'une des fonctionnalités qui étaient nouvelles pour JavaScript était l'opérateur de diffusion; L'opérateur de propagation a un identifiant similaire aux paramètres de repos, qui est le triple point «…» Avant le nom de la variable.
L'opérateur de propagation (…)
L'identifiant à triple point lorsqu'il est utilisé avant un nom de variable dans un argument est connu sous le nom de syntaxe de propagation ou un argument de propagation. L'argument de propagation brise l'objet itérable (tableau ou une chaîne) et les transmet aux arguments.
Syntaxe
(… Nom de variable)
Pour comprendre la différence entre la sortie variable normale et la variable d'écart, jetez un œil à la figure ci-dessous:
Comment la propagation fonctionne avec la console.enregistrer()
Pour comprendre les fonctionnalités de base de l'opérateur de diffusion, vous allez simplement créer un objet de chaîne et le passer à l'intérieur du console.enregistrer() fonction. Ensuite, utilisez l'opérateur de propagation pour le passer à l'intérieur du console.enregistrer() Pour examiner le comportement de l'opérateur de propagation:
String = "Google";
console.Log ("Résultat de syntaxe normale:" + chaîne)
console.Log ("Scread Syntax Résultat:");
console.journal (… chaîne);
Vous obtiendrez la sortie suivante lorsque vous exécutez l'extrait de code ci-dessus:
La flèche pointe vers la sortie normale de la chaîne et le rectangle rouge enferme la sortie de la syntaxe de propagation. Vous pouvez remarquer des lacunes entre chaque caractère de la sortie de syntaxe de propagation, c'est-à-dire que chaque caractère est traité comme un élément différent.
Passer la syntaxe de propagation dans les arguments d'une fonction
Le but de la syntaxe de propagation et de l'opérateur de propagation est de créer les arguments de propagation et de les passer à l'intérieur de la fonction. Pour démontrer cela, vous allez créer une fonction qui prendra 5 arguments et imprimera le résultat des valeurs transmises à l'intérieur des arguments avec les lignes de code suivantes:
fonction imprimés (a, b, c, d, e)
console.log (a + b + c + d + e);
Vous allez créer un tableau avec 5 valeurs entières à l'intérieur en utilisant la ligne suivante:
nombres = [1,2,3,4,5];
Pour la dernière étape, vous allez appeler cette fonction en utilisant les arguments de propagation et passer Nombres Array en utilisant la syntaxe de propagation comme un seul argument avec la ligne suivante:
Printum (… numéros);
L'extrait complet serait:
fonction imprimés (a, b, c, d, e)
console.log (a + b + c + d + e);
nombres = [1, 2, 3, 4, 5, 6];
Printum (… numéros);
Après avoir exécuté le code, vous obtiendrez la sortie suivante:
Tous les éléments à l'intérieur du tableau des nombres ont été passés sous forme d'arguments individuels à la fonction, puis chaque argument a été ajouté imprimé sur la console.
Mais que se passe-t-il si votre tableau de chiffres a plus d'éléments que les arguments de la fonction?; Eh bien, dans ce cas, seuls les 5 premiers éléments du tableau seront utilisés et d'autres seront rejetés, empêchant ainsi toute erreur.
Pour montrer cela, prenez la fonction susmentionnée et passez dans le tableau suivant à l'intérieur:
Déployer:
Nombres = [3,52,6,7,1,3,5,3,1,5,3,6,7,3,5,6,1,2];
En utilisant la commande suivante:
Printum (… numéros);
Vous verrez le résultat suivant sur la console:
Vous pouvez voir, même si nous avions plus d'éléments à l'intérieur du tableau qui ont été transmis dans la liste de l'argument avec la syntaxe de propagation, les éléments supplémentaires ont tous été jetés, et par conséquent, nous n'avons eu aucune erreur.
Comment concaténer les tableaux en utilisant la propagation?
Nous pouvons même utiliser la syntaxe de propagation ou l'opérateur de propagation pour concaténer les éléments du tableau avec d'autres éléments en passant dans le tableau complet dans un seul élément.
Array1 = [2, 3, 4, 5, 6, 6, 7, 7];
Array2 = [1, 10, 2, 44, 66, 22, 11, 33, 56];
finalArray = [… array1,… array2];
console.journal (finalArray);
Vous obtiendrez la sortie suivante:
Vous pouvez voir que le finesse a à la fois le Array1 et Array2 concaténés à l'intérieur et nous n'avons donné que deux éléments dans le «FinalArray».
C'est-à-dire pour la syntaxe de propagation en javascript.
Conclusion
Spread Syntax a été introduit dans JavaScript comme une nouvelle fonctionnalité avec la version d'ES6. Syntaxe de propagation ou communément appelé l'argument de propagation est utilisé pour étendre les éléments d'un objet itérable -: tableau ou chaîne - sur une liste d'arguments d'une fonction en passant individuellement chaque élément. Cette fonctionnalité du langage de programmation JavaScript ES6 permet de traiter certains scénarios où vous avez plus d'arguments que les paramètres de la fonction. L'opérateur de propagation peut également être utilisé pour concaténer les éléments du tableau que nous avons examinés à l'aide d'un exemple.