Opérateur de diffusion React ES6


Opérateur de propagation

L'opérateur de propagation JavaScript ( ...) nous permet de copier rapidement tout ou partie d'un tableau ou d'un objet existant dans un autre tableau ou objet.

Exemple

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

L'opérateur de propagation est souvent utilisé en combinaison avec la déstructuration.

Exemple

Affectez les premier et deuxième éléments de numbersaux variables et placez le reste dans un tableau :

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

Nous pouvons également utiliser l'opérateur de propagation avec des objets :

Exemple

Combinez ces deux objets :

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Notez que les propriétés qui ne correspondaient pas ont été combinées, mais que la propriété qui correspondait, color, a été remplacée par le dernier objet transmis, updateMyVehicle. La couleur résultante est maintenant jaune.


Testez-vous avec des exercices

Exercer:

Utilisez l'opérateur de propagation pour combiner les tableaux suivants.

const arrayOne = ['a', 'b', 'c'];
const arrayTwo = [1, 2, 3];
const arraysCombined = [];