Astuce : comment utiliser l’opérateur Spread en JavaScript

Dans ce didacticiel, vous apprendrez les différentes manières d’utiliser l’opérateur de propagation en JavaScript et la principale différence entre les opérateurs de propagation et de repos.

Symbolisé par trois points (...), l’opérateur de propagation JavaScript a été introduit dans ES6. Il peut être utilisé pour développer des éléments dans des collections et des tableaux en éléments uniques et individuels.

L’opérateur de propagation peut être utilisé pour créer et cloner des tableaux et des objets, passer des tableaux en tant que paramètres de fonction, supprimer les doublons des tableaux, etc.

Syntaxe

L’opérateur de propagation ne peut être utilisé que sur des objets itérables. Il doit être utilisé juste avant l’objet itérable, sans aucune séparation. Par exemple:

consolelog(...arr);

Paramètres de fonction

Prenons comme exemple le Math.min() méthode. Cette méthode accepte au moins un nombre comme paramètre et renvoie le plus petit nombre parmi les paramètres passés.

Si vous avez un tableau de nombres et que vous souhaitez trouver le minimum de ces nombres, sans l’opérateur de propagation, vous devrez soit passer les éléments un par un en utilisant leurs indices, soit utiliser le appliquer() méthode pour passer les éléments du tableau en paramètres. Par exemple:

const numbers = [15, 13, 100, 20];
const minNumber = Mathminapply(null, numbers);
consolelog(minNumber); 

Veuillez noter que le premier paramètre est nullpuisque le premier paramètre est utilisé pour changer la valeur de this de la fonction appelante.

L’opérateur de propagation est une solution plus pratique et lisible pour passer les éléments d’un tableau en tant que paramètres à la fonction. Par exemple:

const numbers = [15, 13, 100, 20];
const minNumber = Mathmin(...numbers);
consolelog(numbers); 

Vous pouvez le voir dans cet exemple en direct :

Voir le stylo
Utiliser l’opérateur Spread dans Functions JS par SitePoint (@SitePoint)
sur CodePen.

Créer des tableaux

L’opérateur de propagation peut être utilisé pour créer de nouveaux tableaux à partir de tableaux existants ou d’autres objets itérables qui incluent le Symbole. itérateur() méthode. Ce sont des objets qui peuvent être itérés à l’aide de la for...of boucle.

Par exemple, il peut être utilisé pour cloner des baies. Si vous affectez simplement à un nouveau tableau la valeur d’un tableau existant, apporter des modifications au nouveau mettra à jour l’existant :

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumberspush(24);
consolelog(clonedNumbers); 
consolelog(numbers); 

En utilisant l’opérateur spread, le tableau existant peut être cloné dans un nouveau tableau et toute modification apportée au nouveau tableau n’affectera pas le tableau existant :

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumberspush(24);
consolelog(clonedNumbers); 
consolelog(numbers); 

Il convient de noter que cela ne clonerait que des tableaux unidimensionnels. Cela ne fonctionnerait pas pour les tableaux multidimensionnels.

L’opérateur de propagation peut également être utilisé pour concaténer plusieurs tableaux en un seul. Par exemple:

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
consolelog(...allNumbers); 

Vous pouvez également utiliser l’opérateur de propagation sur une chaîne pour créer un tableau où chaque élément est un caractère de la chaîne :

const str = 'Hello, World!';
const strArr = [...str];
consolelog(strArr); 

Créer des objets

L’opérateur de propagation peut être utilisé de différentes manières pour créer des objets.

Il peut être utilisé pour cloner superficiellement un autre objet. Par exemple:

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
consolelog(clonedObj); 

Il peut également être utilisé pour fusionner plusieurs objets en un seul. Par exemple:

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
consolelog(clonedObj); 

Il convient de noter que, si les objets partagent les mêmes noms de propriété, la valeur du dernier objet propagé sera utilisée. Par exemple:

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
consolelog(clonedObj); 

L’opérateur de propagation peut être utilisé pour créer un objet à partir d’un tableau, où les indices du tableau deviennent des propriétés et la valeur à cet index devient la valeur de la propriété. Par exemple:

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
consolelog(obj); 

Il peut également être utilisé pour créer un objet à partir d’une chaîne, où, de la même manière, les indices de la chaîne deviennent des propriétés et le caractère à cet index devient la valeur de la propriété. Par exemple:

const str = 'Hello, World!';
const obj = { ...str };
consolelog(obj); 

Convertir une NodeList en un tableau

UN Liste de nœuds est une collection de nœuds, qui sont des éléments du document. Les éléments sont accessibles via des méthodes dans les collections, telles que item ou entriescontrairement aux tableaux.

Vous pouvez utiliser l’opérateur spread pour convertir une NodeList en Array. Par exemple:

const nodeList = documentquerySelectorAll('div');
consolelog(nodeListitem(0)); 
const nodeArray = [...nodeList];
consolelog(nodeList[0]); 

Supprimer les doublons des baies

UN Régler object est une collection qui stocke uniquement des valeurs uniques. Semblable à la NodeList, un Set peut être converti en un tableau à l’aide de l’opérateur de propagation.

Puisqu’un ensemble ne stocke que des valeurs uniques, il peut être associé à l’opérateur de propagation pour supprimer les doublons d’un tableau. Par exemple:

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
consolelog(duplicatesArr); 
consolelog(uniqueArr); 

Opérateur de propagation vs opérateur de repos

L’opérateur de repos est également un opérateur à trois points (...), mais il est utilisé dans un but différent. L’opérateur rest peut être utilisé dans la liste des paramètres d’une fonction pour dire que cette fonction accepte un nombre indéfini de paramètres. Ces paramètres peuvent être manipulés comme un tableau.

Par exemple:

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

Dans cet exemple, l’opérateur de repos est utilisé comme paramètre de la calculateSum fonction. Ensuite, vous bouclez sur les éléments du tableau et les additionnez pour calculer leur somme.

Vous pouvez alors soit passer les variables une par une au calculateSum fonction comme arguments, ou utilisez l’opérateur spread pour passer les éléments d’un tableau comme arguments :

consolelog(calculateSum(1, 2, 3)); 
const numbers = [1, 2, 3];
consolelog(calculateSum(...numbers)); 

Conclusion

L’opérateur de propagation vous permet de faire plus avec moins de lignes de code, tout en maintenant la lisibilité du code. Il peut être utilisé sur des objets itérables pour passer des paramètres à une fonction ou pour créer des tableaux et des objets à partir d’autres objets itérables.

Lecture connexe :

— to www.sitepoint.com