Maison >interface Web >js tutoriel >Expliquez les avantages de la syntaxe étendue et en quoi elle diffère du reste de la syntaxe d'ES6 ?

Expliquez les avantages de la syntaxe étendue et en quoi elle diffère du reste de la syntaxe d'ES6 ?

WBOYavant: 2023-09-19 21:21:03845parcourir

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同？

Dans la version ES6 de JavaScript, la syntaxe étendue a été introduite comme une fonctionnalité très puissante. Nous pouvons utiliser la syntaxe d'extension pour étendre un tableau ou un objet en une variable du même type de données.

Par exemple, avant l'introduction de la syntaxe spread dans ES6, les développeurs utilisaient des boucles for pour copier tous les éléments d'un tableau vers un autre tableau. Pouvez-vous copier tous les éléments d'un tableau dans un autre en écrivant un code linéaire en utilisant une syntaxe étendue au lieu d'écrire 5 à 7 lignes de code en utilisant une boucle for ? Oui, vous avez bien entendu !

Ici, nous allons apprendre différents cas d'utilisation de la syntaxe d'extension dans ce tutoriel. Nous verrons également en quoi elle diffère du reste de la syntaxe à la fin du didacticiel.

Grammaire de propagation

La syntaxe d'expansion en JavaScript est une syntaxe qui permet à un objet itérable (tel qu'un tableau ou un objet) d'être développé en une seule variable ou un seul élément.

Les utilisateurs peuvent utiliser la syntaxe d'extension pour étendre les objets itérables selon la syntaxe ci-dessous.

let array = [10, 40, 7, 345];
let array2 = [...array];

Dans la syntaxe ci-dessus, nous copions tous les éléments du "tableau" itérable dans la variable array2.

Avantages de la syntaxe étendue

L'utilisation de la syntaxe étendue présente certains avantages ou fonctionnalités -

Copiez un tableau ou un objet,
Combinez des tableaux ou des objets, et
Passez plusieurs éléments comme paramètres de fonction.

Examinons différents exemples de chacune des fonctionnalités ci-dessus de la syntaxe étendue.

Exemple

Copier le tableau en utilisant la syntaxe spread

Dans cet exemple, nous utilisons la synatx étendue pour copier les éléments d'un tableau vers un autre tableau. Vous pouvez voir que le code linéaire unique copie tous les éléments du tableau dans array2.

<html>
   <body>
      <h2>Using the spread syntax to copy one array to another</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let array1 = [10, 40, 7, 345];
         output.innerHTML += "Original array: " + array1 + "</br>";
         
         // copy array using spread syntax
         let array2 = [...array1];
         output.innerHTML += "Copied array: " + array2 + "</br>";
      </script>
   </body>
</html>

Exemple

Utilisez la syntaxe répartie pour fusionner des tableaux ou des objets

Nous fusionnons array1 et array2 en utilisant la syntaxe étendue à l'intérieur de array1 au lieu d'utiliser la méthode concat() de JavaScript. De plus, lors de la fusion de deux tableaux, nous modifions l’ordre des éléments du tableau.

<html>
<body>
   <h2>Using the spread syntax to <i> copy one array to another</i></h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      let array = [10, 40, 7, 345];
      output.innerHTML += "Array 1: " + array + "</br>";
      let array2 = ["Hi, Hello"];
      output.innerHTML += "Array 2: " + array2 + "</br>";
      array = [...array2, ...array];
      output.innerHTML += "After merging the array2 and array1: " + array + "<br/>";
   </script>
</body>
</html>

Exemple

Utilisez une syntaxe étendue pour transmettre plusieurs éléments comme arguments de fonction

Dans cet exemple, nous avons créé la fonction add() qui prend trois valeurs comme paramètres et renvoie la somme des trois paramètres. Nous créons un tableau contenant trois valeurs. Nous avons utilisé une syntaxe étendue pour transmettre tous les éléments du tableau en tant que paramètres à la fonction add().

<html>
   <body>
      <h2>Using the spread syntax</h2>
      <p> Passing multiple array elements as a function argument </p>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
      
         // function to get a sum of 3 values
         function add(param1, param2, param3) {
            return param1 + param2 + param3;
         }
         let values = [50, 54, 72];
      
         // passed array values using the spread syntax
         let result = add(...values);
         output.innerHTML += "The sum of 3 array values: " + result + "</br>";
      </script>
   </body>
</html>

Exemple

Copier des objets à l'aide de synatx étendu

Dans l'exemple ci-dessous, nous avons créé un objet sample_obj contenant différentes paires clé-valeur. En utilisant une syntaxe étendue, nous avons copié toutes les paires clé-valeur de sample_obj dans copy_object.

Étant donné que les objets sont itérables, nous pouvons étendre les objets en utilisant la syntaxe extend.

<html>
   <body>
      <h2>Using the spread syntax to <i>create a copy of the object.</i></h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let sample_obj = {
            name: "Shubham",
            age: 22,
            hobby: "writing",
         };
         let copy_object = {
            ...sample_obj,
         };
         output.innerHTML += "The values of the copy_object are " + copy_object.name + " , " +copy_object.age + " , " + copy_object.hobby +  "</br>";
      </script>
   </body>
</html>

Syntaxe restante

En JavaScript, la syntaxe de la syntaxe de repos est la même que celle de la syntaxe étendue. Nous pouvons utiliser la syntaxe rest pour collecter des éléments dans un seul tableau ou itérable, contrairement à l'expansion utilisant la syntaxe spread.

Habituellement, les développeurs utilisent la syntaxe d'expansion pour les paramètres de fonction lorsque le nombre total de paramètres de fonction n'est pas défini ou que des paramètres facultatifs sont transmis.

Grammaire

Les utilisateurs peuvent utiliser le reste de la syntaxe selon la syntaxe suivante.

function func(...params){
   
   //params are the array of all arguments passed while calling the function
   
   //users can access the params like params[0], params[1], params[2], ...
}

Dans la syntaxe ci-dessus, nous avons collecté tous les paramètres de fonction dans le tableau params.

Exemple

Dans cet exemple, nous avons créé un tableau de chaînes et transmis tous les éléments du tableau comme arguments à la fonction mergeString() en utilisant une syntaxe étendue.

En utilisant le reste de la syntaxe, nous collectons tous les paramètres de la fonction mergeString() dans le tableau params. Nous parcourons le tableau params et concaténons chaque élément du tableau params dans la variable FinalString.

<html>
   <body>
      <h2>Using the rest syntax to collect function parameters</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // used the rest syntax to collect params
         function mergeString(...params) {
            let finalString = "";
            
            // Iterating through the array of params
            for (let param of params) {
               finalString += param;
               output.innerHTML += "Parameter: " + param + "<br>";
            }
            output.innerHTML += "The string after merging: " + finalString;
         }
         let strings = ["Welcome", "to", "the", "TutorialsPoint!"];
         
         // used the spread syntax to pass all elements of // the strings array as an argument.
         mergeString(...strings);
      </script>
   </body>
</html>

Grâce à l'exemple ci-dessus, les utilisateurs peuvent clairement comprendre la différence entre la syntaxe rest et la syntaxe spread.

Différences entre la syntaxe Spread et Rest dans ES6 :

La syntaxe étendue est différente du reste de la syntaxe, qui est utilisée pour collecter plusieurs éléments ou attributs dans un tableau. La syntaxe d'extension permet l'extension d'éléments, tandis que le reste de la syntaxe permet des collections d'éléments.

Des exemples d'utilisation de la syntaxe étendue incluent la copie d'un tableau dans un autre, la fusion de deux tableaux, la transmission de plusieurs éléments de tableau comme arguments de fonction et la copie des propriétés d'un objet vers un autre.

Des exemples d'utilisation de la syntaxe rest incluent la collecte d'éléments, les paramètres de fonction, etc.

Le tableau suivant met en évidence les différences entre la syntaxe spread et la syntaxe rest dans ES6 -

Syntaxe étendue	Syntaxe restante
Nous pouvons développer des objets itérables en utilisant la syntaxe d'expansion.	Nous pouvons utiliser la syntaxe rest pour collecter des éléments et rendre tous les éléments collectés itérables.
Nous pouvons l'utiliser pour étendre les données au format tableau ou objet.	Nous pouvons rassembler tous les éléments dans le format requis.
Nous pouvons l'utiliser pour transmettre des paramètres à l'intérieur de la fonction.	Nous pouvons l'utiliser pour collecter des paramètres de fonction ou définir des paramètres facultatifs.

Conclusion

La syntaxe d'expansion en JavaScript est une syntaxe qui permet à un objet itérable (tel qu'un tableau ou un objet) d'être développé en une seule variable ou un seul élément.

La syntaxe Expand est différente des autres. La syntaxe étendue est utile pour effectuer des tâches telles que copier des tableaux, fusionner des tableaux ou des objets et transmettre plusieurs éléments comme arguments de fonction.

La syntaxe restante est utile pour effectuer des tâches telles que la collecte de plusieurs éléments ou attributs dans un tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript es6 数据类型 Array for 字符串循环对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Programme JavaScript pour trouver la longueur d'une boucle dans une liste chaînéeArticle suivant：Programme JavaScript pour trouver la longueur d'une boucle dans une liste chaînée

Articles Liés

Voir plus