Quand je pense à la beauté d'EcmaScript6, l'une des premières choses super cool qui me viennent à l'esprit est Spread Syntax o Spread Operator. Cette fonctionnalité est l'une des astuces les plus utiles pour gérer la déstructuration de beaucoup de données et d'objets. Par conséquent, je vais vous montrer tous les cas d'utilisation que j'ai trouvés en travaillant.

1. Fusionner des tableaux

Lorsque vous avez besoin de fusionner deux tableaux en toute sécurité (plus d'informations sur la fusion de tableaux ici ):

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr1Plusarr2 = [...arr1, ...arr2];
const newArrayMerged = [0, ...arr1, ...arr2];
console.log(arr1Plusarr2); // [1, 2, 3, 4]
console.log(newArrayMerged); // [0, 1, 2, 3, 4]

Lorsque vous devez fusionner les propriétés de deux objets différents :

const object1 = { b: 2 };
const object2 = { c: 3 };
const object1PlusObject2 = { ...object1, ...object2 };
const newObjectMerged = { a: 1, ...object1, ...object2 };
console.log(object1PlusObject2); // { b: 2, c: 3 }
console.log(newObjectMerged); // { a: 1, b: 2, c: 3 }

Lorsque vous avez besoin de stocker toutes les valeurs d'index sans assignation dans des tableaux déstructurants, quel que soit leur nombre :

const bigArray = [0, 1, 2, 3, 4];
const [index0, index1, ...rest] = bigArray;
console.log(index0); // 0
console.log(index1); // 1
console.log(rest); // [2, 3, 4]

Lorsque vous devez créer un nouvel objet avec toutes les valeurs non extraites en cas de déstructuration d'objet, quel que soit leur nombre :

const mainObject = { a: 1, b: 2, c: 3, d: 4, e: 5 };
const { a, b, ...rest } = mainObject;
console.log(a); // 1
console.log(a); // 2
console.log(rest); // { c: 3, d: 4, e: 5 }

Lorsque vous devez transmettre de nombreux paramètres à une fonction, peu importe le montant. Les paramètres sont arrivés sous forme de tableau :

const addAll = (...params) => params.reduce(
  (acc, current) => acc + current,
  0
);
addAll(1, 2, 3); // 6
addAll(1, 2, 3, 1, 1, 1, 1); // 10
addAll(3, 5); // 8

const subwaySandwich = (bread, size, ...ingredients) => {
  console.log(bread); // Italian
  console.log(size); // 15cm
  console.log(ingredients); // ['mustard', 'mayo']
}
subwaySandwich(
  'Italian',
  '15cm',
  'mustard',
  'mayo'
);

const person = ({ age, gender, ...rest }) => {
  console.log(age); // 15
  console.log(gender); // female
  console.log(rest); // { hair: 'brun', eyes: 'blue' }
}
person({
  age: 15,
  gender: 'female',
  hair: 'brun',
  eyes: 'blue',
})

Oui! Vous pouvez également utiliser l'opérateur spread pour gérer un objet (ou un tableau) de manière conditionnelle : il vous suffit de le mettre entre parenthèses et de créer une condition.

const carBase = { wheels: 4, doors: 4 };
const isVehicle = true;
const renault = {
  ...(isVehicle && carBase),
  country: 'France',
}
console.log(renault) // { wheels: 4, doors: 4, country: 'France' }