aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/javascript/guide/keyed_collections
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-08-03 08:03:23 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-09-03 08:08:25 +0200
commitbf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch)
treec101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/guide/keyed_collections
parent844f5103992238c0c23203286dad16a466e89c97 (diff)
downloadtranslated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip
convert content to md
Diffstat (limited to 'files/fr/web/javascript/guide/keyed_collections')
-rw-r--r--files/fr/web/javascript/guide/keyed_collections/index.md120
1 files changed, 57 insertions, 63 deletions
diff --git a/files/fr/web/javascript/guide/keyed_collections/index.md b/files/fr/web/javascript/guide/keyed_collections/index.md
index 9b93b1cc67..bef70f4b38 100644
--- a/files/fr/web/javascript/guide/keyed_collections/index.md
+++ b/files/fr/web/javascript/guide/keyed_collections/index.md
@@ -10,19 +10,20 @@ tags:
translation_of: Web/JavaScript/Guide/Keyed_collections
original_slug: Web/JavaScript/Guide/Collections_avec_clés
---
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</div>
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}
-<p>Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets <code>Map</code> et <code>Set</code> contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.</p>
+Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets `Map` et `Set` contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.
-<h2 id="Maps">Maps</h2>
+## Maps
-<h3 id="Le_type_Map">Le type <code>Map</code></h3>
+### Le type `Map`
-<p>ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.</p>
+ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.
-<p>Le code suivant illustre certaines opérations basiques avec <code>Map</code>. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau <code>[clé, valeur]</code> à chaque itération.</p>
+Le code suivant illustre certaines opérations basiques avec `Map`. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau `[clé, valeur]` à chaque itération.
-<pre class="brush: js">var sayings = new Map();
+```js
+var sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
@@ -36,38 +37,35 @@ for (var [key, value] of sayings) {
}
// "cat goes meow"
// "elephant goes toot"
-</pre>
+```
-<h3 id="Comparaison_entre_les_types_Object_et_Map">Comparaison entre les types <code>Object</code> et <code>Map</code></h3>
+### Comparaison entre les types `Object` et `Map`
-<p>Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type <code>Map</code> possède cependant certains avantages pour être utilisés comme <em>maps</em>.</p>
+Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type `Map` possède cependant certains avantages pour être utilisés comme _maps_.
-<ul>
- <li>Les clés d'un objet de type <code>Object</code> sont des chaînes de caractères. Pour <code>Map</code>, une clé peut être une valeur de n'importe quel type.</li>
- <li>On peut simplement obtenir la taille d'un objet <code>Map</code> alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet <code>Object</code>.</li>
- <li>Les itérations sur les <em>maps</em> se font dans l'ordre d'insertion des éléments.</li>
- <li>Un objet de type <code>Object</code> possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant <code>map = Object.create(null)</code>).</li>
-</ul>
+- Les clés d'un objet de type `Object` sont des chaînes de caractères. Pour `Map`, une clé peut être une valeur de n'importe quel type.
+- On peut simplement obtenir la taille d'un objet `Map` alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet `Object`.
+- Les itérations sur les _maps_ se font dans l'ordre d'insertion des éléments.
+- Un objet de type `Object` possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant `map = Object.create(null)`).
-<p>Pour savoir si on doit utiliser le type <code>Map</code> ou le type <code>Object</code>, on peut considérer les aspects suivants :</p>
+Pour savoir si on doit utiliser le type `Map` ou le type `Object`, on peut considérer les aspects suivants :
-<ul>
- <li>On utilisera des <em>maps</em> plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.</li>
- <li>On utilisera des <em>maps</em> lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).</li>
- <li>On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.</li>
-</ul>
+- On utilisera des _maps_ plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.
+- On utilisera des _maps_ lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).
+- On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.
-<h3 id="Le_type_WeakMap">Le type <code>WeakMap</code></h3>
+### Le type `WeakMap`
-<p>L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles <strong>les clés sont uniquement des objets</strong> (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API <code>WeakMap</code> offre les mêmes fonctionnalités que l'API <code>Map</code>.</p>
+L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles **les clés sont uniquement des objets** (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API `WeakMap` offre les mêmes fonctionnalités que l'API `Map`.
-<p>La différence entre le type <code>Map</code> et le type <code>WeakMap</code> est que les clés d'un objet <code>WeakMap</code> ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.</p>
+La différence entre le type `Map` et le type `WeakMap` est que les clés d'un objet `WeakMap` ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.
-<p>Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.</p>
+Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.
-<p>Un cas d'utilisation des objets <code>WeakMap</code> est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald <a href="http://fitzgeraldnick.com/weblog/53/">« Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 »</a>. Les données et méthodes privées sont stockées dans l'objet WeakMap <code>privates</code>. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car <code>privates</code> n'est pas exporté depuis le module :</p>
+Un cas d'utilisation des objets `WeakMap` est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald [« Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 »](http://fitzgeraldnick.com/weblog/53/). Les données et méthodes privées sont stockées dans l'objet WeakMap `privates`. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car `privates` n'est pas exporté depuis le module :
-<pre class="brush: js">const privates = new WeakMap();
+```js
+const privates = new WeakMap();
function Public() {
const me = {
@@ -82,17 +80,18 @@ Public.prototype.method = function () {
};
module.exports = Public;
-</pre>
+```
-<h2 id="Les_ensembles">Les ensembles</h2>
+## Les ensembles
-<h3 id="Le_type_Set">Le type <code>Set</code></h3>
+### Le type `Set`
-<p>Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément <code>Set</code> ne peut y apparaître qu'une seule fois, il est unique pour cette instance de <code>Set</code>.</p>
+Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément `Set` ne peut y apparaître qu'une seule fois, il est unique pour cette instance de `Set`.
-<p>Le code suivant illustre certaines opérations basiques avec <code>Set</code>. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.</p>
+Le code suivant illustre certaines opérations basiques avec `Set`. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.
-<pre class="brush: js">var monEnsemble = new Set();
+```js
+var monEnsemble = new Set();
monEnsemble.add(1);
monEnsemble.add("du texte");
monEnsemble.add("toto");
@@ -104,50 +103,45 @@ monEnsemble.size; // 2
for (let item of monEnsemble) console.log(item);
// 1
// "du texte"
-</pre>
+```
-<h3 id="Convertir_des_tableaux_(Array)_en_ensembles_(Set)">Convertir des tableaux (<code>Array</code>) en ensembles (<code>Set</code>)</h3>
+### Convertir des tableaux (`Array`) en ensembles (`Set`)
-<p>Il est possible de créer un {{jsxref("Array")}} à partir d'un <code>Set</code> grâce à {{jsxref("Array.from")}} ou l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">opérateur de décomposition</a>. Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur <code>Set</code> avec un argument de type <code>Array</code>. Encore une fois, les objets <code>Set</code> stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.</p>
+Il est possible de créer un {{jsxref("Array")}} à partir d'un `Set` grâce à {{jsxref("Array.from")}} ou l'[opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition). Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur `Set` avec un argument de type `Array`. Encore une fois, les objets `Set` stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.
-<pre class="brush: js">Array.from(monSet);
+```js
+Array.from(monSet);
[...monSet2];
monSet2 = new Set([1,2,3,4]);
-</pre>
+```
-<h3 id="Comparaison_entre_Array_et_Set">Comparaison entre <code>Array</code> et <code>Set</code></h3>
+### Comparaison entre `Array` et `Set`
-<p>Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, <code>Set</code>, possède certains avantages :</p>
+Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, `Set`, possède certains avantages :
-<ul>
- <li>Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.</li>
- <li>Les objets <code>Set</code> permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.</li>
- <li>Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode <code>indexOf</code>.</li>
- <li>Les objets <code>Set</code> permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.</li>
-</ul>
+- Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.
+- Les objets `Set` permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.
+- Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode `indexOf`.
+- Les objets `Set` permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.
-<h3 id="Le_type_WeakSet">Le type <code>WeakSet</code></h3>
+### Le type `WeakSet`
-<p>Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un <code>WeakSet</code> ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets <code>WeakSet</code> (ils ne sont pas énumérables).</p>
+Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un `WeakSet` ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets `WeakSet` (ils ne sont pas énumérables).
-<p>Les principales différences avec l'objet {{jsxref("Set")}} sont :</p>
+Les principales différences avec l'objet {{jsxref("Set")}} sont :
-<ul>
- <li>Contrairement aux objets <code>Set</code>, les objets <code>WeakSet</code> sont des ensembles qui ne comprennent <strong>que des objets</strong>, les valeurs ne peuvent pas être d'un type arbitraire.</li>
- <li>Les objets <code>WeakSet</code> utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le <code>WeakSet</code>, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets <code>WeakSet</code> ne sont pas énumérables.</li>
-</ul>
+- Contrairement aux objets `Set`, les objets `WeakSet` sont des ensembles qui ne comprennent **que des objets**, les valeurs ne peuvent pas être d'un type arbitraire.
+- Les objets `WeakSet` utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le `WeakSet`, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets `WeakSet` ne sont pas énumérables.
-<p>Les cas d'utilisations pour les objets <code>WeakSet</code> objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).</p>
+Les cas d'utilisations pour les objets `WeakSet` objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).
-<h2 id="Égalité_des_clés_et_des_valeurs_avec_Map_et_Set">Égalité des clés et des valeurs avec <code>Map</code> et <code>Set</code></h2>
+## Égalité des clés et des valeurs avec `Map` et `Set`
-<p>L'égalité utilisée pour les clés des objets <code>Map</code> et celle utilisée pour les valeurs des objets <code>Set</code> sont les mêmes : elles sont basées sur <a href="https://tc39.github.io/ecma262/#sec-samevaluezero">l'algorithme suivant</a> :</p>
+L'égalité utilisée pour les clés des objets `Map` et celle utilisée pour les valeurs des objets `Set` sont les mêmes : elles sont basées sur [l'algorithme suivant](https://tc39.github.io/ecma262/#sec-samevaluezero) :
-<ul>
- <li>L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte <code>===</code>.</li>
- <li><code>-0</code> et <code>+0</code> sont considérés égaux.</li>
- <li>{{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec <code>===</code>).</li>
-</ul>
+- L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte `===`.
+- `-0` et `+0` sont considérés égaux.
+- {{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec `===`).
-<p>{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</p>
+{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}