Écrire des boucles JavaScript à l'aide de la carte, filtrer, réduire et rechercher

Comment effectuer des opérations courantes dans JavaScript où vous pouvez utiliser des boucles, en utilisant map (), filter (), reduction () et find ()

Bouclessont généralement utilisés, dans n'importe quel langage de programmation, pour effectuer des opérations sur des tableaux: étant donné un tableau, vous pouvez parcourir ses éléments et effectuer un calcul.

Voyons comment sélectionner les besoins communs et les réaliser à l'aide d'unProgrammation fonctionnelleapprocher, par opposition à l'utilisation de boucles.

REMARQUE: je ne recommande pas une approche plutôt qu'une autre. Je veux juste vous présenter différentes façons d'effectuer la même chose et peut-être vous présenter de nouvelles fonctions que vous n'avez peut-être jamais utilisées jusqu'à présent.

map,filter,reduce,find

Ce sont 3 fonctions de tableau vraiment puissantes:

  • maprenvoie un tableau de même longueur,
  • filtercomme son nom l'indique, il renvoie un tableau avec moins d'éléments que le tableau d'origine
  • reducerenvoie une seule valeur (ou objet)
  • findrenvoie les premiers éléments d'un tableau qui satisfait une condition

map,filteretreduceont été introduits dans ES5, vous pouvez donc les utiliser en toute sécurité tels qu'ils sont mis en œuvre dans tous les navigateurs depuis des années.

finda été introduit dans ES6 / ES2015.

Ils offrent un plusapproche déclarative, plutôt qu'une approche impérative (décrireQueldevrait se produire, n'écrivez pas chaque petit morceau de traitement qui devrait se produire)

Exécutez quelque chose sur chaque élément avecmap

Une boucle ressemblerait à ceci:

const performSomething = (item) => {
  //...
  return item
}
const items = ['a', 'b', 'c']
items.forEach((item) => {
  performSomething(item)
})

Avec une approche déclarative, vous indiquez à JavaScript d'effectuer quelque chose sur chaque élément en utilisant:

const items = ['a', 'b', 'c']
const newArray = items.map((item) => performSomething(item))

Cela génère un nouveau tableau, sans modifier l'original (ce que nous appelons l'immuabilité)

Puisque nous utilisons une seule fonction dans la fonction de rappel de carte, nous pouvons réécrire l'exemple comme suit:

const items = ['a', 'b', 'c']
const newArray = items.map(performSomething)

Recherche d'un seul élément dans le tableau

Parfois, vous devez rechercher un élément spécifique dans le tableau et le renvoyer.

Voici comment vous le feriez avec une boucle:

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]
for (const item of items) {
  if (item.name === 'b') {
    return item
  }
}

Voici la version sans boucle, en utilisantfind()(ES6 +):

const b = items.find((item) => item.name === 'b')

Voici la même fonctionnalité en utilisantfilter()(ES5 +):

const b = items.filter((item) => item.name === 'b').shift()

shift () renvoie le premier élément du tableau sans déclencher d'erreur si le tableau est vide (retourneundefineddans ce cas).

Noter:shift()mute le tableau, mais le tableau qu'il mute est celui renvoyé parfilter(), pas la matrice d'origine. Si cela semble inacceptable, vous pouvez vérifier si le tableau n'est pas vide et obtenir le premier élément en utilisantb[0].

À des fins d'apprentissage (cela n'a pas beaucoup de sens en pratique), voici la même fonctionnalité utilisantreduce():

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]

const b = items.reduce((result, item) => { if (item.name === ‘b’) { result = item } return result }, null)

filter()etreduce()itérera sur tous les éléments du tableau, tandis quefind()sera plus rapide.

Itérer sur un tableau pour compter une propriété de chaque élément

Utilisationreduce()pour obtenir une valeur unique d'un tableau. Par exemple, additionnez les élémentscontent.valuebiens:

const items = [
  { name: 'a', content: { value: 1 }},
  { name: 'b', content: { value: 2 }},
  { name: 'c', content: { value: 3 }}
]

en utilisant une boucle:

let count = 0
for (const item of items) {
  count += item.content.value
}

peut être écrit comme

const count = items.reduce((result, { content: { value } }) => result + value, 0)

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: