open

Javascript : Les méthodes sort, filter, reduce

#1 Précaution avant d'envisager d'utiliser sort, filter, reduce ? open

Les méthodes sort, filter et reduce sont des méthodes de l'objet de constructeur Array(). Prenez la précaution de vous assurer que vous êtes en train de travailler sur un tel objet. En effet il y a beaucoup de tableaux qui sont de simple collection et qui ne sont pas dotés ces méthodes. C'est le cas par exemple lorsque vous travailler sur le DOM.

Si vous avez affaire à une collection et que vous ne savez pas la transformer en Array() alors voyez ce tutoriel "Comment transformer une collection en Array".

#2 Que fait la méthode sort ? open

La méthode sort sert à trier les valeurs d'un tableau. Il y a deux façons de l'utiliser :

  1. Soit vous utilisez une fonction de tri par défaut et dans ce cas le tri est alphabétique au sens large c'est à dire que le tri se fait selon le jeu de caractères Unicode UTF-16.
  2. Soit vous lui donnez une fonction de tri et dans ce cas vous pouvez adapter le tri à votre besoin.

#3 Exemple de sort avec tri par défaut open

Ci-dessous vous avez un exemple de tri par défaut. Le tri se fait sur des chaînes de caractères Unicode UTF-16 ou sur des valeurs converties en chaînes. C'est le premier caractère de la chaîne qui sert de référence. Le deuxième s'ils sont identiques et ainsi de suite.

Tester le code
Javascript: Tri avec Array().sort en UTF-16

#4 Exemple de sort avec fonction de tri open

Ci-dessous vous avez un exemple où une fonction de tri est passée en callback. J'ai placé des commentaires dans la fonction de tri de manière à pouvoir mettre en évidence son fonctionnement.

  1. On fait la différence entre les deux arguments a et b. Vous pouvez voir dans les traces d'exécution comment sort (* qui appelle le callback) choisit a et b.
  2. Si la différence est négative c'est un -1 qu'il faut retourner. Dans ce cas sort va permuter les deux éléments.
  3. Si la différence est positive c'est un +1 qu'il faut retourner. Dans ce cas sort ne va pas permuter les deux éléments.
  4. Je fais l'essai sur le tableau [10,100] puis sur le tableau [100,10].
  5. Notez que le tableau d'entrée est lui aussi modifié.
Tester le code
Mise en évidence du fonctionnement de la fonction de tri

Je poursuis ici par un autre essai avec un tableau qui contient plus d'éléments. La fonction de tri est la même que dans l'exemple précédent. Sur l'illustration des résultats vous pouvez visualiser le fonctionnement de sort. Vous pouvez constater que sort fait plusieurs passages pour arriver à ranger le tableau. On imagine facilement le travail que ça pourrait représenter sur un tableau de grande taille. Vous pourriez être amené à choisir entre différents algorithmes de tri. N'hésitez pas à visiter ce lien qui vous en dira un peu plus sur la complexité des algorithmes de tri.

Tester le code
Mise en évidence du fait que sort fait plusieurs passage sur le tableau

#5 Que fait la méthode filter ? open

La méthode filter fait du filtrage. Ce filtrage peut être vu comme un tri sélectif c'est à dire que vous allez garder qu'une partie des éléments du tableau d'entrée. La méthode filter va prendre en argument une fonction dans laquelle vous allez écrire une condition. Pour que l'élément soit conservé dans le tableau de sortie il faudra que cette condition soit vraie.

La méthode filter ne modifie pas le tableau d'entrée.

Ci-dessous nous allons faire un filtrage sur la valeur d'une propriété d'un tableau d'objet. Nous allons conserver les objets qui ont une clé sexe qui est égale à 'F'.

Tester le code
Resutats d'un filter

#6 Que fait la méthode reduce ? open

Ci-dessous vous avez un exemple d'utilisation de la méthode reduce. Nous allons nous en servir pour parcourir le tableau panier. Le tableau panier est un tableau d'objet.

  1. La méthode reduce prend une fonction callback en premier argument et une valeur initiale en second argument. Cette valeur initiale correspond à la valeur initiale d'un accumulateur. Nous allons voir ça dans la suite.
  2. Le callback prend à son tour deux arguments :
    1. Le premier total. C'est lui l'accumulateur. Il va accumuler les valeurs qui lui sont affectées dans la fonction callback. C'est lui qui est initialisé avec la valeur du second argument de reduce.
    2. Le second article est un objet du tableau d'objet panier.
  3. Nous allons nous servir de l'argument total pour accumuler le coût de notre panier.
  4. N'oubliez pas de faire un return de total.
Codage de reduce
Tester le code
Resutats d'un filter

#7 Mise en cascade filter.reduce open

On peut mettre en cascade certaines des méthodes que nous avons vues. Il faut pour cela s'assurer que la méthode renvoie bien un tableau. C'est le cas des méthodes de ce tutoriel mais pas de toutes les méthodes d'un Array().

Ci-dessous on procède à un filtrage pour ne garder que les produits qui coûtent moins de 20 euros et ensuite on chaîne avec un reduce pour faire le total du panier.

Tester le code
Resutats d'un filter chaîné avec un reduce