Les opérateurs révolutionnaires de repos et de propagation ES6

Exemples JavaScript

Introduit en 2015, ES6 (également connu sous le nom d’ECMAScript 2015 ou ECMAScript 6) était la révision la plus percutante de JavaScript depuis ES5 (ECMAScript 5) en 2009. Il a ajouté une véritable corne d’abondance de fonctionnalités, y compris Flèche Fonctions, les constante et laisser mots-clés, paramètres par défaut, entre autres. Ensuite, ECMAScript 2016, 2017 et 2018 en ont ajouté encore plus, y compris le quelque peu énigmatique Repos paramètres et Se propager opérateur (ou syntaxe, si vous préférez). Dans le cadre de la révision de 2018, le Se propager L’opérateur est en réalité deux opérateurs qui partagent la même syntaxe d’ellipse (…). Le but de ce tutoriel de développement web sera de vous donner un avant-goût de ce que ces opérateurs ont à offrir tout en montrant comment faire la différence entre les deux. Comme nous le verrons bientôt, tout est une question de contexte !

Lis: Meilleurs cours en ligne pour apprendre le HTML

Paramètres de repos et fonctions variadiques en JavaScript

Vous n’avez peut-être jamais entendu parler de variadique fonctions auparavant, mais il y a de fortes chances que vous en ayez rencontré au moins une. En termes simples, une fonction variadique est une fonction qui accepte un nombre variable d’arguments. En JavaScript pré-ES6 (JS), nous appliquions souvent un déployer méthode, comme trancheà l’objet local arguments afin de le convertir en un vrai tableau, que nous pourrions ensuite traiter.

Maintenant, nous pouvons déclarer un Repos paramètre à l’intérieur de la signature de la fonction pour accomplir la même chose. De plus, comme indiqué dans le Documents Web MDN:

“L’objet arguments n’est pas un véritable tableau, tandis que les paramètres de repos sont des instances de tableau, ce qui signifie que des méthodes telles que sort, map, forEach ou pop peuvent être appliquées directement dessus.”

Voici deux implémentations d’un somme() fonction – l’une utilisant ES5 JS et l’autre ES6 :

// Prior to ES6

function sum(/* var1, var2, var3, var4, var5, etc... */) {

  return Array.prototype.reduce.call(arguments, function(a, b) {

    return a + b;

  }, 0);

}



// Using a ES6 Rest Parameter

const sum = (...args) => args.reduce((a, b) => a + b, 0);

Combinaison du paramètre Rest avec des arguments nommés dans ES6

En regardant notre somme fonction, il devrait être immédiatement évident qu’elle nécessite au moins deux arguments pour s’additionner. Nous pouvons donner à la fonction quelques arguments nommés pour ceux-ci, puis gérer le reste à l’aide d’un Repos paramètre:

const sumWithNamedArguments = (num1, num2, ...additionalArgs) =>   

  additionalArgs.reduce((a, b) => a + b, num1 + num2);

Cela s’appelle un Repos paramètre car il est toujours utilisé pour le tout arguments après ceux nommés. Ainsi:

Une définition de fonction ne peut avoir qu’un seul Repos paramètre
il doit TOUJOURS être le dernier argument de la fonction.

Le placer ailleurs entraînera une erreur telle que :

Uncaught SyntaxError: Rest parameter must be last formal parameter

Qu’est-ce que l’opérateur Spread et en quoi diffère-t-il du paramètre Rest ?

L’ES6 Se propager partage exactement la même syntaxe que l’opérateur Repos paramètre, mais atteint presque le résultat opposé. Tandis que le Repos Le paramètre rassemble tous les arguments de fonction restants dans un tableau, le Se propager L’opérateur développe les itérables en éléments individuels. En fait, le Se propager La syntaxe fonctionne presque partout sauf à l’intérieur des définitions de fonction, comme dans les littéraux de tableau, les appels de fonction et les objets de propriété initialisés pour répartir les valeurs des objets itérables dans des éléments séparés.

Quelques exemples de Se propager opérateur dans chacune des applications ci-dessus aidera à tout mettre en évidence.

Exemple de propagation en JavaScript : dans un littéral de tableau

Appliquer le Se propager syntaxe à un tableau dans un littéral de tableau entraînera la copie superficielle du tableau cible dans le nouveau en tant que nouveaux éléments de tableau :

const toppings   = ["pepperoni", "mushrooms", "green peppers", "onions"];

const pizzaOrder = ["medium", "thin crust", "pizza with", ...toppings, "to go"];



// Displays [ "medium", "thin crust", "pizza with", 

// "pepperoni", "mushrooms" "green peppers", "onions", "to go"]

console.log(pizzaOrder);

Si nous n’avions pas employé le Se propager opérateur, le pizzaCommander array contiendrait cinq éléments, le quatrième élément étant un autre tableau.

Exemple de propagation en JavaScript : dans un appel de fonction

Se souvenir du somme fonction de plus tôt? Tandis que le Repos Le paramètre a collecté les arguments passés dans la définition de la fonction, le Se propager L’opérateur peut être utilisé pour développer les éléments d’un tableau en arguments lors de l’appel d’une fonction :

const sum = (...args) => args.reduce((a, b) => a + b, 0);



const numbers = [3, 4, 5, 7];

// Displays 20

console.log(sum(...numbers));

Exemple de diffusion en JavaScript : sur des objets de propriété initialisés

Dans l’exemple de code ci-dessous, nous utilisons Se propager à l’intérieur de pizzaCommande2 objet d’élargir le garnitures et Type de pizza éléments de tableau dans des propriétés individuelles de la même manière que tableau.concat() aurait:

const toppings    = ["pepperoni", "mushrooms", "green peppers"];

const pizzaType   = ["medium", "thin crust", "pizza"];

const pizzaOrder2 = {...toppings, location: "to go", ...pizzaType };

console.log(pizzaOrder2);



console.log(pizzaOrder);

{

  "0": "medium",

  "1": "thin crust",

  "2": "pizza",

  "location": "to go"

}

Lis: Meilleurs cours en ligne pour apprendre WordPress

Exemples supplémentaires de l’opérateur Spread en JavaScript

La Se propager peut être utilisé à diverses fins, certaines intuitives, d’autres auxquelles vous n’auriez peut-être pas pensé.

Conversion d’une chaîne JavaScript en éléments de tableau individuels

Appliquer le Se propager syntaxe à une chaîne sera convertie en un tableau avec chaque caractère occupant son propre élément :

const myName = "Rob Gravelle";



console.log([...myName]);



// Displays:

[ "R", "o", "b", "", "G", "a", "v", "e", "l", "l", "e" ]

Création d’une copie superficielle d’un tableau ou d’un objet dans ES6

Un moyen simple de faire une copie superficielle d’un tableau ou d’un objet est d’en créer un nouveau avec la propriété Se propager syntaxe appliquée à l’original :

let colors = ['Black', 'Red', 'Green'];

let newColors = [...colors];

// Displays false

console.log (newColors == colors);

Choisir entre deux invocations de méthode dans JS

Besoin d’appeler une méthode avec différents arguments en fonction d’une condition ? Combinant le Se propager opérateur avec le ternaire L’opérateur nous donne un moyen simple et élégant d’alimenter la méthode avec le nombre correct d’arguments dans la même instruction :

const person = {

    name: 'Rob',

    location: {

      city: 'Ottawa',

      country: 'Canada',

      phoneNumbers: ['555-1234', '555-2345'],

    },

  };



const printJson = (prettyPrint: boolean) => {

  document.getElementById('output').innerText = 

    JSON.stringify(...prettyPrint ? [person, null, '  '] : [person]);

}

printJson(true);

/* Displays:

{

  "name": "Rob",

  "location": {

    "city": "Ottawa",

    "country": "Canada",

    "phoneNumbers": [

      "555-1234",

      "555-2345"

    ]

  }

}

*/

Vous trouverez tous les exemples de code d’aujourd’hui dans le démo codepen.

Réflexions finales sur les opérateurs révolutionnaires de repos et de propagation ES6

Ce tutoriel a fourni un aperçu de l’énigmatique ES6 Repos et Se propager opérateurs et décrit quand utiliser l’un par rapport à l’autre. L’essentiel est de se rappeler que chacun atteint le résultat presque opposé de l’autre : le Repos Le paramètre rassemble tous les arguments de fonction restants dans un tableau, tandis que l’opérateur Spread développe les itérables en éléments individuels.

Lire la suite Tutoriels de programmation JavaScript et de développement Web.

— to www.htmlgoodies.com

Magazine Gadgets