Opérateur de propagation JavaScript

Opérateur de propagation JavaScript (…)

• L'opérateur Spread en JavaScript développe (décompresse) un tableau en ses éléments individuels.

*Il est utilisé à la fois avec des tableaux et des objets, dans les tableaux, il est utilisé lorsque :

1. Construire un tableau
2. passer des arguments dans une fonction

1- Construire un tableau :

• ici nous pouvons l'utiliser pour développer un élément d'un tableau et l'utiliser dans un autre (tableau par exemple).

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• comme vous pouvez le constater, l'opérateur de spread rend les choses beaucoup plus faciles.

• Si vous souhaitez à nouveau les éléments individuels du tableau étendu, utilisez l'opérateur spread :
  

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• autre exemple pour mieux comprendre :

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

• Gardez à l'esprit qu'ici, nous créons un tout nouveau tableau, nous ne modifions pas (mutons) le tableau des aliments, regardez :

console.log(foods); // ['chicken', 'meat', 'rice']

• L'opérateur Spread est similaire à la déstructuration, mais la différence est que l'opérateur spread ne crée pas de nouvelles variables, nous pouvons donc l'utiliser uniquement aux endroits où nous écrivons des valeurs séparées par des virgules.

Deux cas d'utilisation utiles de l'opérateur spread avec des tableaux :

1.créer une copie d'un tableau :

const arrOriginal = [1, 2, 3, 4, 5];

const arrCopy = [...arrOriginal];
console.log(arrCopy); // [1, 2, 3, 4, 5]

2.fusionner deux tableaux ou plus :

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

• L'opérateur spread ne fonctionne pas seulement sur les tableaux, il fonctionne également sur tous les itérables, qui sont des choses comme : les tableaux, les chaînes, les cartes et les ensembles (la plupart des structures de données intégrées), mais PAS (les objets).
• sur les chaînes : chaque lettre de la chaîne d'origine = un élément individuel, exemple :

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

• mais rappelez-vous, nous ne voulons toujours pas utiliser l'opérateur spread autrement que dans les deux situations que nous avons spécifiées en haut, où « construire un tableau » et « passer des arguments », car par exemple, si nous voulions utilisez des valeurs séparées par des virgules pour créer une chaîne par littéraux de modèle, cela ne fonctionnera pas et nous donnera une erreur, car ce n'est pas un endroit qui attend plusieurs valeurs séparées par une virgule :

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

2- passer des arguments dans une fonction

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• Utilisation de l'opérateur Spread :
• À partir d'ES2018, l'opérateur Spread fonctionne également pour les objets, même si les objets ne sont pas itérables, exemple :

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• dans le premier, nous avons créé un nouvel objet avec les mêmes propriétés que l'objet restaurant, mais nous avons ajouté une autre propriété qui est la propriété netWorth.
• dans le second, nous avons fait une copie de l'objet restaurant, notez que les modifications apportées à l'objet copié n'affectent pas l'objet d'origine, et vice versa.

J'espère que vous avez tout compris ici, si vous avez des questions n'hésitez pas à les poser dans la section commentaires, MERCI d'avoir lu ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!