Opérateur Spread et Rest en Javascript avec EXEMPLE

Les opérateurs rest et spread sont des fonctionnalités puissantes de JavaScript, vous permettant de travailler plus efficacement avec des tableaux, des objets et des arguments de fonction. Ils utilisent tous deux la même syntaxe (...) mais servent des objectifs différents.

Opérateur de repos (...)

L'opérateur rest est utilisé pour collecter tous les éléments restants dans un tableau. Il est généralement utilisé dans les paramètres de fonction pour gérer un nombre variable d'arguments.

Exemple d'opérateur de repos :

function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3, 4)); // Output: 10

Ici, les ...nombres rassemblent tous les arguments passés à la fonction somme dans un tableau appelé nombres, qui peut ensuite être traité.

Opérateur de diffusion (...)

L'opérateur de propagation est utilisé pour développer les éléments d'un tableau ou d'un objet en éléments ou propriétés individuels.

Exemple d'opérateur de propagation :

const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combinedArray = [...arr1, ...arr2]; console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]

Dans cet exemple, les ...arr1 et ...arr2 développent les éléments de arr1 et arr2 dans le nouveau CombinedArray.

Résumé

• Rest Operator: collecte tous les éléments restants dans un tableau.
• Spread Operator: développe les éléments d'un tableau ou d'un objet en éléments ou propriétés individuels.

Ces opérateurs sont très utiles pour gérer les tableaux, les objets et les arguments de fonction de manière claire et concise.

.
.
.
.
.

Plus d'informations sur l'opérateur de propagation et de repos
.
.
.
.
.

Certainement ! Approfondissons les opérateurs de repos et de diffusion, en explorant leurs concepts et divers cas d'utilisation avec des explications et des exemples plus détaillés.

Opérateur de repos (...)

L'opérateur de reposvous permet de collecter plusieurs éléments et de les regrouper dans un tableau. Il est généralement utilisé dans les fonctions pour gérer un nombre variable d'arguments ou pour rassembler le "reste" des éléments lors de la déstructuration de tableaux ou d'objets.

Cas d'utilisation

1. Gestion des arguments à fonctions multiples: L'opérateur rest est couramment utilisé lorsque vous ne savez pas à l'avance combien d'arguments une fonction recevra.

function multiply(factor, ...numbers) { return numbers.map(number => number * factor); } console.log(multiply(2, 1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Explication:

• le facteur est le premier argument.
• ...numbers rassemble les arguments restants dans un tableau [1, 2, 3, 4].
• La fonction map multiplie ensuite chaque nombre par le facteur (2).

1. Tableaux de déstructuration: Vous pouvez utiliser l'opérateur rest pour rassembler les éléments restants lors de la déstructuration d'un tableau.

const [first, second, ...rest] = [10, 20, 30, 40, 50]; console.log(first); // Output: 10 console.log(second); // Output: 20 console.log(rest); // Output: [30, 40, 50]

Explication:

• obtient d'abord la valeur 10.
• la seconde obtient la valeur 20.
• ...rest rassemble les éléments restants [30, 40, 50] dans un tableau.

1. Objets déstructurants: De même, l'opérateur rest peut être utilisé pour capturer les propriétés restantes d'un objet.

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

Explication:

• a et b sont directement extraits.
• ...rest capture les propriétés restantes (c : 3 et d : 4) dans un nouvel objet.

Opérateur de diffusion (...)

L'opérateur de propagationest utilisé pour développer les éléments d'un tableau, d'un objet ou d'un itérable en éléments ou propriétés individuels. C'est l'opposé de l'opérateur rest et est très utile pour fusionner, copier et transmettre des éléments.

Cas d'utilisation

1. Combinaison de tableaux: L'opérateur spread peut être utilisé pour combiner ou concaténer des tableaux.

const arr1 = [1, 2]; const arr2 = [3, 4]; const arr3 = [5, 6]; const combined = [...arr1, ...arr2, ...arr3]; console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

Explication:

• ...arr1, ...arr2 et ...arr3 répartissent leurs éléments dans le tableau combiné.

1. Copie de tableaux: Vous pouvez créer une copie superficielle d'un tableau à l'aide de l'opérateur spread.

const original = [1, 2, 3]; const copy = [...original]; console.log(copy); // Output: [1, 2, 3] console.log(copy === original); // Output: false (different references)

Explication:

• ...original répartit les éléments de l'original dans la nouvelle copie du tableau, créant ainsi une copie superficielle.

1. Fusionner des objets: L'opérateur spread est utile pour fusionner des objets ou ajouter des propriétés à un objet existant.

const obj1 = {x: 1, y: 2}; const obj2 = {y: 3, z: 4}; const merged = {...obj1, ...obj2}; console.log(merged); // Output: {x: 1, y: 3, z: 4}

Explication:

• ...obj1 répartit les propriétés de obj1 dans le nouvel objet.
• ...obj2 étend ensuite ses propriétés dans le nouvel objet, remplaçant la propriété y d'obj1.

1. Arguments de fonction: L'opérateur spread peut également être utilisé pour transmettre des éléments d'un tableau comme arguments individuels à une fonction.

function add(a, b, c) { return a + b + c; } const numbers = [1, 2, 3]; console.log(add(...numbers)); // Output: 6

Explication:

• ...numbers répartit les éléments du tableau number en arguments individuels (a, b, c).

Résumé

• Opérateur de repos (...):

  • Collects multiple elements into an array or object.
  • Often used in function parameters, array destructuring, or object destructuring.

• Spread Operator (...):

  • Expands or spreads elements from an array, object, or iterable.
  • Useful for merging, copying, and passing elements in a concise manner.

Both operators enhance code readability and maintainability by reducing boilerplate code and providing more flexible ways to handle data structures.
.
.
.
.
.
.
Real world Example
.
.
.
.

Let's consider a real-world scenario where the rest and spread operators are particularly useful. Imagine you are building an e-commerce platform, and you need to manage a shopping cart and process user orders. Here's how you might use the rest and spread operators in this context:

Rest Operator: Managing a Shopping Cart

Suppose you have a function to add items to a user's shopping cart. The function should accept a required item and then any number of optional additional items. You can use the rest operator to handle this:

function addToCart(mainItem, ...additionalItems) { const cart = [mainItem, ...additionalItems]; console.log(`Items in your cart: ${cart.join(', ')}`); return cart; } // User adds a laptop to the cart, followed by a mouse and keyboard const userCart = addToCart('Laptop', 'Mouse', 'Keyboard'); // Output: Items in your cart: Laptop, Mouse, Keyboard

Explanation:

• mainItem is a required parameter, which in this case is the 'Laptop'.
• ...additionalItems collects the rest of the items passed to the function ('Mouse' and 'Keyboard') into an array.
• The cart array then combines all these items, and they are logged and returned as the user's cart.

Spread Operator: Processing an Order

Now, let's say you want to process an order and send the user's cart items along with their shipping details to a function that finalizes the order. The spread operator can be used to merge the cart items with the shipping details into a single order object.

const shippingDetails = { name: 'John Doe', address: '1234 Elm Street', city: 'Metropolis', postalCode: '12345' }; function finalizeOrder(cart, shipping) { const order = { items: [...cart], ...shipping, orderDate: new Date().toISOString() }; console.log('Order details:', order); return order; } // Finalizing the order with the user's cart and shipping details const userOrder = finalizeOrder(userCart, shippingDetails); // Output: // Order details: { // items: ['Laptop', 'Mouse', 'Keyboard'], // name: 'John Doe', // address: '1234 Elm Street', // city: 'Metropolis', // postalCode: '12345', // orderDate: '2024-09-01T12:00:00.000Z' // }

Explanation:

• ...cart spreads the items in the cart array into the items array inside the order object.
• ...shipping spreads the properties of the shippingDetails object into the order object.
• The orderDate property is added to capture when the order was finalized.

Combining Both Operators

Let's say you want to add a feature where the user can add multiple items to the cart, and the first item is considered a "featured" item with a discount. The rest operator can handle the additional items, and the spread operator can be used to create a new cart with the updated featured item:

function addItemsWithDiscount(featuredItem, ...otherItems) { const discountedItem = { ...featuredItem, price: featuredItem.price * 0.9 }; // 10% discount return [discountedItem, ...otherItems]; } const laptop = { name: 'Laptop', price: 1000 }; const mouse = { name: 'Mouse', price: 50 }; const keyboard = { name: 'Keyboard', price: 70 }; const updatedCart = addItemsWithDiscount(laptop, mouse, keyboard); console.log(updatedCart); // Output: // [ // { name: 'Laptop', price: 900 }, // { name: 'Mouse', price: 50 }, // { name: 'Keyboard', price: 70 } // ]

Explanation:

• The featuredItem (the laptop) receives a 10% discount by creating a new object using the spread operator, which copies all properties and then modifies the price.
• ...otherItems collects the additional items (mouse and keyboard) into an array.
• The final updatedCart array combines the discounted featured item with the other items using the spread operator.

Real-World Summary

• Rest Operator: Used to manage dynamic input like adding multiple items to a shopping cart. It gathers remaining arguments or properties into an array or object.
• Spread Operator: Useful for processing and transforming data, such as merging arrays, copying objects, and finalizing orders by combining item details with user information.

These examples demonstrate how the rest and spread operators can simplify code and improve readability in real-world scenarios like managing shopping carts and processing e-commerce orders.

Here's a breakdown of what's happening in your code:

const [first, second, third, ...rest] = [10, 20, 30, 40, 50]; console.log(first); // Output: 10 console.log(second); // Output: 20 console.log(third); // Output: 30 console.log(rest); // Output: [40, 50]

Explanation:

• Destructuring:

  • first is assigned the first element of the array (10).
  • second is assigned the second element of the array (20).
  • third is assigned the third element of the array (30).

• Rest Operator:

  • ...rest collects all the remaining elements of the array after the third element into a new array [40, 50].

Output:

• first: 10
• second: 20
• third: 30
• rest: [40, 50]

This code correctly logs the individual elements first, second, and third, and also captures the remaining elements into the rest array, which contains [40, 50].

Let me know if you have any further questions or if there's anything else you'd like to explore!

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!