Méthodes de tableau JavaScript : `forEach`, `map`, `filter` et `reduce`

Méthodes de tableau JavaScript : forEach, mapper, filtrer et réduire

JavaScript fournit plusieurs méthodes puissantes pour travailler avec des tableaux. Ces méthodes (forEach, map, filter et reduction) peuvent rendre votre code plus efficace et plus facile à lire. Explorons ces méthodes à l'aide d'analogies et d'exemples simples.

pourChaque

Analogie : Jouer avec chaque jouet dans la boîte

Imaginez que vous avez une boîte de jouets et que vous voulez jouer avec chaque jouet un par un. Vous sortez chaque jouet de la boîte, jouez avec, puis vous le remettez.

Exemple :

let toys = ['car', 'doll', 'ball'];

toys.forEach(toy => {
  console.log('Playing with', toy);
});

Explication :
Vous regardez chaque jouet dans la boîte et jouez avec.

carte

Analogie : Transformer chaque jouet en quelque chose de nouveau

Supposons que vous ayez une boîte de jouets et que vous souhaitiez transformer chaque jouet en quelque chose d'autre. Par exemple, vous transformez chaque voiture en voiture de course, chaque poupée en super-héros et chaque ballon en ballon de basket.

Exemple :

let toys = ['car', 'doll', 'ball'];

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

console.log(newToys);

Explication :
Vous transformez chaque jouet en une nouvelle version et mettez les nouveaux jouets dans une nouvelle boîte.

filtre

Analogie : Choisir uniquement certains jouets avec lesquels jouer

Vous avez une boîte de jouets, mais aujourd'hui vous voulez jouer uniquement avec les jouets qui sont rouges. Alors, vous regardez à travers la boîte et n'en sortez que les jouets rouges.

Exemple :

let toys = ['red car', 'blue doll', 'red ball'];

let redToys = toys.filter(toy => toy.includes('red'));

console.log(redToys);

Explication :
Vous sélectionnez uniquement les jouets qui correspondent à une certaine condition (dans ce cas, être rouge).

réduire

Analogie : combiner tous les jouets en un seul méga-jouet

Imaginez que vous vouliez créer un gros jouet en combinant tous les jouets ensemble. Vous prenez chaque jouet et l'ajoutez au méga jouet un par un.

Exemple :

let toys = ['car', 'doll', 'ball'];

let megaToy = toys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Explication :
Vous commencez avec un méga jouet vide et continuez à y ajouter chaque jouet jusqu'à ce que vous ayez un gros jouet.

Mettre tout cela ensemble

Disons que vous avez une boîte de jouets différents et que vous souhaitez :

1. Regardez chaque jouet et voyez de quoi il s'agit (forEach).
2. Transformez chaque jouet en une nouvelle version (carte).
3. Sélectionnez uniquement les jouets bleus (filtre).
4. Combinez tous les jouets sélectionnés en un seul méga jouet (réduisez).

let toys = ['blue car', 'red doll', 'blue ball'];

toys.forEach(toy => {
  console.log('Toy:', toy);
});

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

let blueToys = newToys.filter(toy => toy.includes('blue'));

let megaToy = blueToys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Explication :

1. Regardez chaque jouet.
2. Changez chaque jouet pour une nouvelle version.
3. Choisissez uniquement les jouets bleus.
4. Combinez-les en un seul gros jouet.

---

Options et techniques avancées

pourChaque

• Sortie de forEach : Vous ne pouvez pas sortir d'une boucle forEach. Si vous avez besoin de cette fonctionnalité, pensez à utiliser une boucle for ou for...of.
• Utilisation de thisArg : Vous pouvez fournir un thisArg à utiliser comme this dans le rappel.

  toys.forEach(function(toy) {
    console.log(this.prefix + toy);
  }, { prefix: 'Toy: ' });

carte

• Utilisation de thisArg : Semblable à forEach, vous pouvez fournir un thisArg à utiliser comme this dans le rappel.

  let newToys = toys.map(function(toy) {
    return this.prefix + toy;
  }, { prefix: 'New: ' });

• Renvoi de différents types : map peut renvoyer un tableau d'un type différent.

  let toyLengths = toys.map(toy => toy.length);

filtre

• Conditions complexes : Utilisez des conditions complexes pour le filtrage.

  let complexFilter = toys.filter(toy => toy.includes('blue') && toy.length > 4);

réduire

• Valeur initiale : Fournissez toujours une valeur initiale pour éviter des résultats inattendus.

  let sum = [1, 2, 3].reduce((total, num) => total + num, 0);

• Réduire en objet : Vous pouvez utiliser réduire pour créer des objets.

  let toyCounts = toys.reduce((counts, toy) => {
    counts[toy] = (counts[toy] || 0) + 1;
    return counts;
  }, {});

---

En comprenant ces méthodes et leurs options avancées, vous pouvez écrire du code JavaScript plus efficace et plus lisible. Bon codage !

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!