Dans ce didacticiel, vous en apprendrez davantage sur l'opérateur de diffusion JavaScript à l'aide d'exemples.
L'opérateur de diffusion est un nouvel ajout aux fonctionnalités disponibles dans la version JavaScript ES6 .
Opérateur de propagation
L'opérateur de diffusion … est utilisé pour développer ou diffuser un itérable ou un tableau. Par exemple,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
Dans ce cas, le code:
console.log(… arrValue)
est équivalent à:
console.log('My', 'name', 'is', 'Jack');
Copier une matrice à l’aide de l’opérateur Spread
Vous pouvez également utiliser la syntaxe de propagation … pour copier les éléments dans un seul tableau. Par exemple,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Cloner un tableau à l’aide de l’opérateur Spread
En JavaScript, les objets sont attribués par référence et non par des valeurs. Par exemple,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Ici, les deux variables arr1 et arr2 font référence au même tableau. Par conséquent, le changement d'une variable entraîne le changement des deux variables.
Cependant, si vous souhaitez copier des tableaux afin qu'ils ne se réfèrent pas au même tableau, vous pouvez utiliser l'opérateur de propagation. De cette façon, le changement dans un tableau n'est pas reflété dans l'autre. Par exemple,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Opérateur de propagation avec objet
Vous pouvez également utiliser l'opérateur de diffusion avec des littéraux d'objet. Par exemple,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Ici, les propriétés obj1et obj2sont ajoutées à l' obj3utilisation de l'opérateur de propagation.
Paramètre de repos
Lorsque l'opérateur de propagation est utilisé comme paramètre, il est appelé paramètre rest.
Vous pouvez également accepter plusieurs arguments dans un appel de fonction à l'aide du paramètre rest. Par exemple,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Ici,
- Lorsqu'un seul argument est passé à la
func()fonction, le paramètre rest ne prend qu'un seul paramètre. - Lorsque trois arguments sont passés, le paramètre rest prend les trois paramètres.
Remarque : l'utilisation du paramètre rest transmettra les arguments en tant qu'éléments de tableau.
Vous pouvez également transmettre plusieurs arguments à une fonction à l'aide de l'opérateur de propagation. Par exemple,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Si vous passez plusieurs arguments à l'aide de l'opérateur de propagation, la fonction prend les arguments requis et ignore le reste.
Remarque : l'opérateur Spread a été introduit dans ES6 . Certains navigateurs peuvent ne pas prendre en charge l'utilisation de la syntaxe de diffusion. Consultez le support de JavaScript Spread Operator pour en savoir plus.
