Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
* Update per en-US to fix mdn#23755

* Typofix / missing translation
  • Loading branch information
SphinxKnight authored and ikenk committed Oct 29, 2024
1 parent 0986649 commit b1b6036
Showing 1 changed file with 45 additions and 111 deletions.
156 changes: 45 additions & 111 deletions files/fr/web/javascript/reference/global_objects/object/groupby/index.md
Original file line number Diff line number Diff line change
@@ -1,123 +1,77 @@
---
title: Array.prototype.group()
title: Object.groupBy()
slug: Web/JavaScript/Reference/Global_Objects/Object/groupBy
l10n:
sourceCommit: eb061bd719102c148cf87d12fd7056ed0c5071c8
---

{{JSRef}} {{SeeCompatTable}}
{{JSRef}}

La méthode **`group()`** permet de grouper les éléments du tableau appelant selon les chaînes de caractères renvoyées par la fonction de test passée en argument. L'objet renvoyé par cette méthode aura des propriétés pour chaque groupe ainsi obtenu, qui contiendront un tableau des éléments du groupe.
> [!NOTE]
> Dans certaines versions de navigateurs, cette méthode fut implémentée avec `Array.prototype.group()`. Suite à des problèmes de compatibilité web, elle est désormais implémentée comme une méthode statique. Voir [le tableau de compatibilité des navigateurs](#compatibilité_des_navigateurs) pour plus de détails.
<!-- {{EmbedInteractiveExample("pages/js/array-groupby.html")}} -->
La méthode statique **`Object.groupBy()`** groupe les éléments d'un itérable donné selon la chaîne de caractères obtenue par la fonction de rappel fournie. L'objet renvoyé possède différentes propriétés pour chaque groupe, contenant des tableaux avec les éléments du groupe.

Cette méthode devrait être utilisée lorsque les noms des groupes peuvent être représentés par des chaînes de caractères. Si vous avez besoin de grouper les éléments avec une clé qui est une valeur arbitraire (et pas nécessairement une chaîne), vous pouvez utiliser [`Array.prototype.groupToMap()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/groupToMap) à la place.
Cette méthode devrait être utilisée lorsque les noms des groupes peuvent être représentés par des chaînes de caractères. S'il vous faut grouper des éléments selon une clé qui peut être une valeur arbitraire, privilégiez la méthode [`Map.groupBy()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy).

<!-- {{EmbedInteractiveExample("pages/js/object-groupby.html")}} -->

## Syntaxe

```js-nolint
// Fonction fléchée
group((element) => { /* … */ } )
group((element, index) => { /* … */ } )
group((element, index, array) => { /* … */ } )
// Fonction de rappel
group(fnRappel)
group(fnRappel, thisArg)
// Fonction de rappel en incise
group(function(element) { /* … */ })
group(function(element, index) { /* … */ })
group(function(element, index, array) { /* … */ })
group(function(element, index, array) { /* … */ }, thisArg)
Object.groupBy(items, fnRappel)
```

### Paramètres

- `items`
- : Un [itérable](/fr/docs/Web/JavaScript/Reference/Iteration_protocols#le_protocole_«_itérable_») (comme un [tableau (`Array`)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) dont les éléments seront groupés.
- `fnRappel`

- : La fonction à exécuter pour chaque élément du tableau.

Elle est appelée avec les arguments suivants&nbsp;:

- : Une fonction à exécuter pour chaque élément de l'itérable. Cette fonction devrait renvoyer une valeur qui peut être convertie en une clé de propriété (c'est-à-dire une chaîne de caractères ou un [symbole](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol)) indiquant le groupe de l'élément courant. Cette fonction est appelée avec les arguments suivants&nbsp;:
- `element`
- : La valeur de l'élément du tableau en cours de traitement.
- : L'élément courant qui est traité.
- `index`
- : L'indice de l'élément courant dans le tableau.
- `array`
- : Le tableau sur lequel `group()` a été appelée.

L'objet renvoyé par la fonction de rappel indique le groupe de l'élément courant. La valeur renvoyée doit pouvoir être convertie en une chaîne de caractères (qui sera alors utilisée comme nom de propriété pour l'objet final).

- `thisArg` {{optional_inline}}

- : L'objet à utiliser comme valeur pour [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this) pour `fnRappel`.

Cet argument est ignoré pour les fonctions fléchées qui disposent de leur propre portée lexicale, utilisée à la place. Sinon, si `thisArg` n'est pas fourni, c'est la valeur `this` de la portée d'exécution qui est appelée, ou `undefined` si la fonction est appelée en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
- : L'indice de l'élément courant qui est traité.

### Valeur de retour

Un [objet](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object) avec une propriété pour chaque groupe. Chaque propriété a comme valeur un tableau qui contient les éléments du groupe correspondant. Cette valeur de retour est un objet qui **n'hérite pas** de `Object.prototype`.

### Exceptions

- `TypeError`
- : La fonction de rappel fournie en argument n'est pas appelable.
Un [objet avec un prototype `null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object#objets_avec_prototype_null) avec une propriété pour chaque groupe, qui contient un tableau des éléments du groupe correspondant.

## Description

La méthode `group()` exécute la fonction `fnRappel` une fois pour chaque indice du tableau, qui renvoie une chaîne de caractères (ou une valeur qui peut être convertie en une chaîne) indiquant le groupe de l'élément. Une nouvelle propriété ayant comme valeur un tableau est créé dans l'objet résultat pour chaque nom de groupe unique renvoyé par la fonction de rappel. Chaque élément est ajouté au tableau de la propriété qui correspond à son groupe.

`fnRappel` est appelée pour _chaque_ indice du tableau et pas uniquement pour ceux pour lesquels une valeur a été affectée. Les emplacements vides des [tableaux creux](/fr/docs/Web/JavaScript/Guide/Indexed_collections#tableaux_creux) se comportent comme avec `undefined`.

`fnRappel` est appelée avec la valeur de l'élément courant, l'indice de cet élément, ainsi que le tableau complet. Bien que les groupes dépendent souvent de la valeur de l'élément courant, il est possible d'implémenter des stratégies de groupement basées sur les valeurs des autres éléments du tableau.

Si un paramètre `thisArg` est fourni à la méthode `group()`, il sera utilisé comme valeur pour [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this) à chaque appel de `fnRappel`. Si ce paramètre n'est pas fourni, c'est [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) qui sera utilisé.

La méthode `group()` est [une méthode de copie](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array#méthodes_de_copie_et_de_modification). Elle ne modifie pas le tableau courant (`this`) mais renvoie un objet dont les propriétés sont des tableaux qui contiennent les mêmes éléments que ceux du tableau d'origine. On notera donc que l'objet renvoyé référence les _mêmes_ éléments que ceux du tableau original et pas des [copies profondes](/fr/docs/Glossary/Deep_copy). Modifier la structure interne de ces éléments se reflètera sur le tableau original et sur l'objet renvoyé.

La méthode `group()` est [générique](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array#méthodes_génériques). Elle s'attend uniquement à ce que la valeur `this` ait une propriété `length` et des propriétés dont les clés sont des entiers.
`Object.groupBy()` appelle une fonction de rappel `fnRappel()` sur chaque élément de l'itérable. Cette fonction renvoie alors une chaîne de caractères ou un symbole (sinon la valeur est [convertie en chaîne de caractères](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#conversion_en_chaîne_de_caractères)) qui indique le groupe de l'élément. Les valeurs renvoyées par `fnRappel()` sont utilisées comme clés pour l'objet renvoyé par `Object.groupBy()`. La valeur de chaque propriété est un tableau dont les éléments sont ceux pour lesquels la fonction de rappel a renvoyé la même valeur.

### Modifier le tableau avec la fonction de rappel

La méthode `group()` ne modifie pas le tableau sur lequel elle est appelée, mais la fonction fournie pour `fnRappel` peut le modifier. Les éléments traités par `group()` sont fixés _avant_ le premier appel à `fnRappel`. Ainsi&nbsp;:

- `fnRappel` ne parcourra pas les éléments ajoutés après le début de l'appel à `group()`.
- Les éléments qui sont affectés à des indices ayant déjà été visités ne seront pas revus par `fnRappel`.
- Les éléments qui sont affectés à des indices en dehors de l'intervalle du tableau ne seront pas parcourus par `fnRappel`.
- Si un élément existant du tableau et qui n'a pas encore été traité mais est modifié par `fnRappel`, la valeur qui sera passée à `fnRappel` sera la valeur au moment où `group()` visite l'indice de l'élément.
- Les éléments qui sont [supprimés avec `delete`](/fr/docs/Web/JavaScript/Reference/Operators/delete) sont tout de même parcourus.

> [!WARNING]
> Les modifications concurrentes comme celles qui sont décrites dans le paragraphe précédent mènent souvent à du code difficilement compréhensible et devraient généralement être évitées.
Les éléments de l'objet renvoyé et de l'itérable original sont les mêmes (il ne s'agit pas de [copies profondes](/fr/docs/Glossary/Deep_copy)). Modifier la structure interne des éléments sera reflété à la fois sur l'itérable original et sur l'objet renvoyé.

## Exemples

### Utiliser `group()`
### Utiliser `Object.groupBy()`

On définit un tableau contenant des objets qui représentent un inventaire alimentaire. Chaque type d'aliment a une propriété `type` et une propriété `quantite`.
Pour commencer, on définit un tableau contenant un inventaire d'aliments. Chaque aliment possède un nom, un type et une quantité.

```js
const inventaire = [
{ nom: "asperge", type: "legume", quantite: 5 },
{ nom: "banane", type: "fruit", quantite: 0 },
{ nom: "asperges", type: "légumes", quantite: 5 },
{ nom: "bananes", type: "fruit", quantite: 0 },
{ nom: "agneau", type: "viande", quantite: 23 },
{ nom: "cerise", type: "fruit", quantite: 5 },
{ nom: "cerises", type: "fruit", quantite: 5 },
{ nom: "poisson", type: "viande", quantite: 22 },
];
```

Le code qui suit groupe les éléments du tableau selon la valeur de leur propriété `type`.
L'instruction suivante groupera les éléments selon leur propriété `type`.

```js
const resultat = inventaire.group(({ type }) => type);
const resultat = Object.groupBy(inventaire, ({ type }) => type);

/* resultat vaut :
/* Le résultat sera :
{
legume: [
{ nom: 'asperge', type: 'legume', quantite: 5 },
légumes: [
{ nom: 'asperges', type: 'légumes', quantite: 5 },
],
fruit: [
{ nom: "banane", type: "fruit", quantite: 0 },
{ nom: "cerise", type: "fruit", quantite: 5 }
{ nom: "bananes", type: "fruit", quantite: 0 },
{ nom: "cerises", type: "fruit", quantite: 5 }
],
viande: [
{ nom: "agneau", type: "viande", quantite: 23 },
Expand All @@ -127,55 +81,32 @@ const resultat = inventaire.group(({ type }) => type);
*/
```

La fonction fléchée renvoie la valeur de `type` pour chaque élément du tableau. Ici, l'argument `{ type }` passé à la fonction est un exemple de [décomposition objet pour les arguments d'une fonction](/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#décomposer_les_propriétés_dobjets_passés_en_arguments). Cela récupère la propriété `type` de l'objet passé en paramètre et affecte cette valeur à une variable nommée `type` dans le corps de la fonction. Il s'agit d'une écriture concise pour accéder aux valeurs des propriétés pertinentes d'un objet dans une fonction.
La fonction fléchée renvoie la valeur de `type` pour chaque élément du tableau. On notera que l'argument `{ type }` est un exemple [de la syntaxe de décomposition d'objet pour les arguments de fonction](/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#décomposer_les_propriétés_dobjets_passés_en_arguments). Cela extrait la propriété `type` d'un objet passé en paramètre et affecte la valeur à une variable nommée `type` dans le corps de la fonction. On peut ainsi écrire succinctement l'accès aux propriétés d'un élément dans une fonction.

On peut aussi créer des groupes selon un critère utilisant plusieurs propriétés des éléments. Dans ce qui suit, on a un exemple semblable qui place les éléments dans un groupe `ok` ou un groupe `restock` selon la valeur de la propriété `quantite`.
On pourrait également créer des groupes selon les valeurs d'une ou plusieurs propriétés de l'élément. Dans l'exemple qui suit, on place les aliments dans deux groupes `ok` ou `restock` selon la valeur de leur propriété `quantite`.

```js
function maFonctionDeRappel({ quantite }) {
return quantite > 5 ? "ok" : "restock";
}

const resultat2 = inventaire.group(maFonctionDeRappel);
const resultat2 = Object.groupBy(inventaire, maFonctionDeRappel);

/* resultat2 vaut :
/* Le résultat sera :
{
restock: [
{ name: "asperge", type: "legume", quantite: 5 },
{ name: "banane", type: "fruit", quantite: 0 },
{ name: "cerise", type: "fruit", quantite: 5 }
{ nom: "asperges", type: "légumes", quantite: 5 },
{ nom: "bananes", type: "fruit", quantite: 0 },
{ nom: "cerises", type: "fruit", quantite: 5 }
],
ok: [
{ name: "agneau", type: "viande", quantite: 23 },
{ name: "poisson", type: "viande", quantite: 22 }
{ nom: "agneau", type: "viande", quantite: 23 },
{ nom: "poisson", type: "viande", quantite: 22 }
]
}
*/
```

### Utiliser `group()` sur des tableaux creux

Lorsqu'on utilise `group()` sur [un tableau creux](/fr/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays), les emplacements vides du tableau sont considérés comme ayant la valeur `undefined`.

```js
console.log([1, , 3].group((x) => x)); // { 1: [1], undefined: [undefined], 3: [3] }
```

### Appeler `group()` sur des objets qui ne sont pas des tableaux

La méthode `group()` lit la propriété `length` de `this` puis parcourt les propriétés dont les clés sont des nombres entiers.

```js
const semblableTableau = {
length: 3,
0: 2,
1: 3,
2: 4,
};
console.log(Array.prototype.group.call(semblableTableau, (x) => x % 2));
// { 0: [2, 4], 1: [3] }
```

## Spécifications

{{Specifications}}
Expand All @@ -186,5 +117,8 @@ console.log(Array.prototype.group.call(semblableTableau, (x) => x % 2));

## Voir aussi

- [`Array.prototype.groupToMap()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/groupToMap) qui permet de regrouper les éléments d'un tableau en une `Map`, avec n'importe quel type de valeur comme clé.
- [Une prothèse d'émulation de `Array.prototype.group()` dans la bibliothèque tierce `core-js`](https://github.com/zloirock/core-js#array-grouping)
- [Une prothèse d'émulation (<i lang="en">polyfill</i>) de `Object.groupBy()` dans la bibliothèque tierce `core-js`](https://github.com/zloirock/core-js#array-grouping)
- [Le guide sur les collections indexées](/fr/docs/Web/JavaScript/Guide/Indexed_collections)
- [`Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
- [`Object.fromEntries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)
- [`Map.groupBy()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy)

0 comments on commit b1b6036

Please sign in to comment.