Skip to content
On this page

A quoi sert scan dans RxJS ?

Le scan operator dans RxJS permet de réduire une séquence de valeurs en utilisant une fonction fournie, de manière similaire à la fonction reduce en JavaScript. Cela peut être utile pour accumuler des valeurs à partir d'une séquence d'événements, comme dans un compteur ou pour créer une valeur résultante en fonction des valeurs émises par un observable.

Par exemple, si vous aviez un observable qui émet des nombres et que vous souhaitiez obtenir la somme de tous ces nombres, vous pourriez utiliser le scan operator pour réduire la séquence en une seule valeur, comme ceci :

js
numbers$.pipe(
  scan((acc, value) => acc + value, 0)
)

Dans cet exemple, la fonction passée au scan operator prend deux arguments : l'accumulateur (acc) et la valeur actuelle émise par l'observable (value). À chaque émission, la fonction est appelée avec la valeur accumulée jusqu'à présent et la nouvelle valeur émise, et retourne une nouvelle valeur accumulée. Le résultat final est une valeur qui représente la somme de toutes les valeurs émises par l'observable.

Le scan operator peut être utilisé dans de nombreux cas pour transformer les données d'une séquence en une autre valeur, en utilisant une fonction de réduction fournie.

Quelle différence entre scan et reduce avec RxJS ?

RxJS est une bibliothèque JavaScript pour la programmation asynchrone basée sur les "observables". Les opérateurs scan() et reduce() sont deux opérateurs couramment utilisés avec les observables pour effectuer des opérations de transformation et d'agrégation sur les données en flux continu.

Bien que ces deux opérateurs puissent être utilisés pour effectuer des opérations similaires, il y a quelques différences importantes entre eux :

  • L'opérateur scan() est utilisé pour produire une valeur agrégée à partir d'une séquence de valeurs en utilisant une fonction d'accumulation. À chaque itération, l'opérateur scan() applique la fonction d'accumulation à la valeur courante et à la valeur accumulée précédente, puis produit la nouvelle valeur accumulée. Cela signifie que l'opérateur scan() produit une séquence de valeurs agrégées au fur et à mesure que les valeurs originales arrivent.

  • L'opérateur reduce() est également utilisé pour produire une valeur agrégée à partir d'une séquence de valeurs en utilisant une fonction d'accumulation. Cependant, contrairement à l'opérateur scan(), l'opérateur reduce() ne produit qu'une seule valeur en sortie. Il applique la fonction d'accumulation à toutes les valeurs d'entrée en une seule itération, et produit la valeur agrégée finale. Cela signifie que l'opérateur reduce() ne produit qu'une seule valeur en sortie, qui représente l'agrégat de toutes les valeurs d'entrée.

Voici un exemple simple qui montre comment utiliser ces deux opérateurs pour calculer la somme des nombres dans un tableau :

js
const numbers = [1, 2, 3, 4, 5];

const sum1 = numbers.reduce((acc, x) => acc + x, 0);  // 15

const sum2 = numbers.scan((acc, x) => acc + x, 0);  // [1, 3, 6, 10, 15]

Dans cet exemple, l'opérateur reduce() est utilisé pour calculer la somme des nombres dans le tableau numbers en une seule itération. Le résultat final est la valeur agrégée, qui est 15.

L'opérateur scan() est utilisé pour calculer la somme des nombres dans le tableau numbers en utilisant une fonction d'accumulation. À chaque itération, l'opérateur scan() est utilisé pour calculer la somme des nombres dans un tableau en utilisant une fonction d'accumulation. À chaque itération, l'opérateur scan() applique la fonction d'accumulation à la valeur courante et à la valeur accumulée précédente, puis produit la nouvelle valeur accumulée. Cela signifie que l'opérateur scan() produit une séquence de valeurs agrégées au fur et à mesure que les valeurs originales arrivent.