≡

JavaScript : Les méthodes sort, filter, reduce

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

Les méthodes sort, filter et reduce sont des méthodes de l'objet de constructeur Array(). Si vous voulez les utiliser, 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 travaillez 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 ?

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

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.
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

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

Ci-dessous, vous avez un exemple dans lequel 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.

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.

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.
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.

Je fais l'essai sur le tableau [10,100] puis sur le tableau [100,10].
Notez que le tableau d'entrée est, lui aussi, modifié.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<script>
		// Fonction de tri pour ranger les nombre dans un ordre croissant
		const functionTri = (a,b) => {
			let diff = a - b ;
			if ( diff < 0 ) { 
				console.log(`a = ${a} b = ${b} diff = ${diff} => on permute`); 
				return -1; // On permute
			} else { 
				console.log(`a = ${a} b = ${b} diff = ${diff} => on ne permute pas`); 
				return 1; // On ne permute pas
			}
		}
		
		const tab1  = [10,100];
		console.log('Tableau en entrée => ',tab1);
		const tab2 = tab1.sort(functionTri);
		console.log('Tableau en sortie => ',tab2);

console.log('----------------------');

const tab3  = [100,10];
		console.log('Tableau en entrée => ',tab3);
		const tab4 = tab3.sort(functionTri);
		// Ici les éléments sont permutés
		console.log('Tableau en sortie => ',tab4);

console.log('----------------------');

// Le tableau en entrée est lui aussi modifié
		console.log('Le tableau en entrée est aussi modifié => ',tab3);
	</script>
</body>
</html>

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 ?

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

#6 Que fait la méthode reduce ?

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.

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.
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.
Nous allons nous servir de l'argument total pour accumuler le coût de notre panier.
N'oubliez pas de faire un return de total.

Tester le code

#7 Mise en cascade filter.reduce

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

Politique de confidentialité

Mentions Légales