Maîtriser les opérateurs Spread et Rest en JavaScript

Opérateurs de propagation et de repos en JavaScript

Les opérateurs spread et rest, tous deux représentés par trois points (...), sont des fonctionnalités polyvalentes de JavaScript introduites dans ES6. Bien qu'ils partagent la même syntaxe, ils remplissent des objectifs distincts : l'opérateur de propagation est utilisé pour développer des éléments, tandis que l'opérateur de repos est utilisé pour collecter des éléments.

1. Opérateur de propagation

L'opérateur spread est utilisé pour développer les éléments d'un tableau, d'un objet ou d'un itérable en éléments individuels.

A. Répartition dans des tableaux

L'opérateur spread peut être utilisé pour copier, concaténer ou transmettre des éléments de tableau.

Exemple : Copie de tableaux

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

Exemple : concaténation de tableaux

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

Exemple : Passer des éléments aux fonctions

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

B. Se propager dans les objets

Vous pouvez utiliser l'opérateur spread pour copier ou fusionner des objets.

Exemple : Copie d'objets

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }

Exemple : Fusion d'objets

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

2. Opérateur de repos

L'opérateur rest collecte plusieurs éléments dans un seul tableau ou objet. Il est couramment utilisé dans les paramètres de fonction ou les affectations de déstructuration.

A. Utiliser Rest dans les paramètres de fonction

L'opérateur rest peut collecter un nombre indéfini d'arguments dans un tableau.

Exemple : Collecte d'arguments

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

B. Utiliser Rest dans les tableaux de déstructuration

L'opérateur rest collecte les éléments restants dans une opération de déstructuration de tableau.

Exemple : Déstructuration de tableaux

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

C. Utiliser Rest dans la déstructuration d'objets

L'opérateur rest collecte les propriétés restantes dans une opération de déstructuration d'objet.

Exemple : Déstructuration d'objets

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

3. Différences clés entre les opérateurs de propagation et de repos

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

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

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!