Maison > interface Web > js tutoriel > Opérateur de propagation JavaScript

Opérateur de propagation JavaScript

Susan Sarandon
Libérer: 2024-12-14 12:20:15
original
619 Les gens l'ont consulté

JavaScript Spread Operator

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]

Copier après la connexion
Copier après la connexion
  • 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
Copier après la connexion
Copier après la connexion
  • autre exemple pour mieux comprendre :
const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']
Copier après la connexion
  • 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']
Copier après la connexion
  • 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]
Copier après la connexion

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']
Copier après la connexion
  • 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']
Copier après la connexion
  • 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

Copier après la connexion

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]

Copier après la connexion
Copier après la connexion
  • 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
Copier après la connexion
Copier après la connexion
  • 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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal