You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Now we've learned about the following complex data structures:
4
+
Nous avons découvert les structures de données complexes suivantes :
5
5
6
-
- Objects for storing keyed collections.
7
-
- Arrays for storing ordered collections.
6
+
- Objects (les objets) pour stocker des valeurs par clés.
7
+
- Arrays (les tableaux) pour stocker des valeurs en conservant l'ordre d'insertion.
8
+
9
+
Il existe aussi `Map` (les dictionnaires de données) et `Set` (les ensembles) qui sont très utiles dans notre quotidien de développeur.
8
10
9
-
But that's not enough for real life. That's why `Map` and `Set` also exist.
10
11
11
12
## Map
12
13
13
-
[Map](mdn:js/Map)is a collection of keyed data items, just like an`Object`. But the main difference is that `Map` allows keys of any type.
14
+
Une [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Map)(dictionnaire de donnée) permet, comme pour un`Object`, de stocker plusieurs éléments sous la forme de clés valeurs. Sauf que cette fois, les clés peuvent être de n'importe qu'elle type.
14
15
15
-
Methods and properties are:
16
+
Voici les méthodes et les propriétés d'une `Map`:
16
17
17
-
-`new Map()` -- creates the map.
18
-
-`map.set(key, value)` -- stores the value by the key.
19
-
-`map.get(key)` -- returns the value by the key, `undefined`if`key`doesn't exist in map.
20
-
-`map.has(key)` -- returns`true`if the `key`exists, `false` otherwise.
21
-
-`map.delete(key)` -- removes the value by the key.
22
-
-`map.clear()` -- removes everything from the map.
23
-
-`map.size` -- returns the current element count.
18
+
-`new Map()` -- instancie la map.
19
+
-`map.set(key, value)` -- définie la valeur pour une clé.
20
+
-`map.get(key)` -- retourne la valeur associée à la clé, `undefined`si`key`n'existe pas dans la map.
`visitsCountObj` est un objet, de ce fait, toutes les clés, comme `john`, sont transformées en chaîne de caractères.
82
+
C'est pourquoi nous obtenons comme valeur de clé `"[object Object]"`. Ce n'est clairement pas ce que l'on souhaite.
76
83
77
-
As `visitsCountObj` is an object, it converts all keys, such as `john` to strings, so we've got the string key `"[object Object]"`. Definitely not what we want.
84
+
```smart header="Comment `Map` compare les clés"
78
85
79
-
```smart header="How `Map` compares keys"
80
-
To test keys for equivalence, `Map` uses the algorithm [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero). It is roughly the same as strict equality `===`, but the difference is that `NaN` is considered equal to `NaN`. So `NaN` can be used as the key as well.
86
+
Pour tester l'égalité entre les clés, `Map` se base sur l'algorithme [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero).
87
+
C'est grosso modo la même chose que l'opérateur de stricte égalité `===`, à la différence que `NaN` est considéré comme étant égal à `NaN`.
88
+
`NaN` peut donc être utilisé comme clé.
81
89
82
-
This algorithm can't be changed or customized.
90
+
Cet algorithme ne peut pas peut être modifié.
83
91
```
84
92
85
93
````smart header="Chaining"
86
-
Every `map.set` call returns the map itself, so we can "chain" the calls:
94
+
95
+
Chaque appel à `map.set` retourne la map elle-même, ce qui nous permet d'enchaîner les appels:
87
96
88
97
```js
89
98
map.set('1', 'str1')
@@ -93,15 +102,15 @@ map.set('1', 'str1')
93
102
````
94
103
95
104
96
-
## Iteration over Map
105
+
## Parcourir les éléments d'une `Map`
97
106
98
-
For looping over a `map`, there are 3 methods:
107
+
Il existe 3 façons de parcourir les éléments d'une `map` :
99
108
100
-
- `map.keys()` -- returns an iterable for keys,
101
-
- `map.values()` -- returns an iterable for values,
102
-
- `map.entries()` -- returns an iterable for entries `[key, value]`, it's used by default in `for..of`.
109
+
- `map.keys()` -- retourne toutes les clés sous forme d'`iterable`,
110
+
- `map.values()` -- retourne les valeurs sous forme d'`iterable`,
111
+
- `map.entries()` -- retourne les `entries` (couple sous forme de `[clé, valeur]`), c'est la méthode utilisée par défaut par `for..of`.
103
112
104
-
For instance:
113
+
Par exemple :
105
114
106
115
```js run
107
116
let recipeMap = new Map([
@@ -110,30 +119,30 @@ let recipeMap = new Map([
110
119
['onion', 50]
111
120
]);
112
121
113
-
// iterate over keys (vegetables)
122
+
// on parcourt les clés (les légumes)
114
123
for (let vegetable of recipeMap.keys()) {
115
124
alert(vegetable); // cucumber, tomatoes, onion
116
125
}
117
126
118
-
// iterate over values (amounts)
127
+
// on parcourt les valeurs (les montants)
119
128
for (let amount of recipeMap.values()) {
120
129
alert(amount); // 500, 350, 50
121
130
}
122
131
123
-
// iterate over [key, value] entries
124
-
for (let entry of recipeMap) { // the same as of recipeMap.entries()
125
-
alert(entry); // cucumber,500 (and so on)
132
+
// on parcourt les entries (couple [clé, valeur])
133
+
for (let entry of recipeMap) { // équivalent à : recipeMap.entries()
134
+
alert(entry); // cucumber,500 (etc...)
126
135
}
127
136
```
128
137
129
-
```smart header="The insertion order is used"
130
-
The iteration goes in the same order as the values were inserted. `Map` preserves this order, unlike a regular `Object`.
138
+
```smart header="L'ordre d'insertion est conservé"
139
+
Contraitement aux `Object`, `Map` conserve l'ordre d'insertion des valeurs.
131
140
```
132
141
133
-
Besides that, `Map` has a built-in `forEach` method, similar to `Array`:
142
+
Il est aussi possible d'utiliser `forEach` avec `Map` comme on pourrait le faire avec un tableau :
134
143
135
144
```js
136
-
// runs the function for each (key, value) pair
145
+
// exécute la fonction pour chaque couple (key, value)
137
146
recipeMap.forEach( (value, key, map) => {
138
147
alert(`${key}: ${value}`); // cucumber: 500 etc
139
148
});
@@ -225,22 +234,23 @@ That's the same, because `Object.fromEntries` expects an iterable object as the
225
234
226
235
## Set
227
236
228
-
A `Set` is a special type collection - "set of values" (without keys), where each value may occur only once.
237
+
`Set` est une liste sans doublons.
229
238
230
-
Its main methods are:
239
+
Ses principales méthodes sont :
231
240
232
-
- `new Set(iterable)` -- creates the set, and if an `iterable` object is provided (usually an array), copies values from it into the set.
233
-
- `set.add(value)` -- adds a value, returns the set itself.
234
-
- `set.delete(value)` -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
235
-
- `set.has(value)` -- returns `true` if the value exists in the set, otherwise `false`.
236
-
- `set.clear()` -- removes everything from the set.
237
-
- `set.size` -- is the elements count.
241
+
- `new Set(iterable)` -- créé un `set`, si un `iterable` (la plupart du temps, un tableau) est passé en paramètre, ses valeurs sont copiées dans le `set`
242
+
- `set.add(value)` -- ajoute l'élément `value` et retourne le `set`.
243
+
- `set.delete(value)` -- supprime l'élément `value` et retourne `true` si la valeur existait au moment de l'appel sinon `false`.
244
+
- `set.has(value)` -- retourne `true` si la valeur existe dans le `set`, sinon faux.
245
+
- `set.clear()` -- supprime tout le contenu du `set`.
246
+
- `set.size` -- le nombre d'éléments dans le tableau.
238
247
239
-
The main feature is that repeated calls of `set.add(value)` with the same value don't do anything. That's the reason why each value appears in a `Set` only once.
248
+
Ce qu'il faut surtout savoir c'est que lorsque l'on appelle plusieurs fois `set.add(value)` avec la même valeur, la méthode ne fait rien.
249
+
C'est pourquoi chaque valeur est unique dans un `Set`.
240
250
241
-
For example, we have visitors coming, and we'd like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be "counted" only once.
251
+
Par exemple, nous souhaitons nous souvenir de tous nos visiteurs. Mais chaque visiteurs doit être unique.
242
252
243
-
`Set` is just the right thing for that:
253
+
`Set` est exactement ce qu'il nous faut :
244
254
245
255
```js run
246
256
let set = new Set();
@@ -249,76 +259,82 @@ let john = { name: "John" };
249
259
let pete = { name: "Pete" };
250
260
let mary = { name: "Mary" };
251
261
252
-
// visits, some users come multiple times
262
+
// visites, certains utilisateurs viennent plusieurs fois
253
263
set.add(john);
254
264
set.add(pete);
255
265
set.add(mary);
256
266
set.add(john);
257
267
set.add(mary);
258
268
259
-
// set keeps only unique values
269
+
// set conserve une fois chaque visiteurs
260
270
alert( set.size ); // 3
261
271
262
272
for (let user of set) {
263
-
alert(user.name); // John (then Pete and Mary)
273
+
alert(user.name); // John (puis Pete et Mary)
264
274
}
265
275
```
266
276
267
-
The alternative to `Set` could be an array of users, and the code to check for duplicates on every insertion using [arr.find](mdn:js/Array/find). But the performance would be much worse, because this method walks through the whole array checking every element. `Set` is much better optimized internally for uniqueness checks.
277
+
Nous aurions aussi pu utiliser un tableau (`Array`) en vérifiant avant chaque insertion que l'élément n'existe pas en utilisant
278
+
[arr.find](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/find). Cependant les performances auraient été
279
+
moins bonnes car cette méthode parcours chaque élément du tableau. `Set` est beaucoup plus efficace car il est optimisé en interne pour vérifier l'unicité des valeurs.
268
280
269
-
## Iteration over Set
281
+
## Parcourir un Set
270
282
271
-
We can loop over a set either with `for..of` or using `forEach`:
283
+
Nous pouvons parcourir les éléments d'un Set avec `for..of` ou en utilisant `forEach`
272
284
273
285
```js run
274
286
let set = new Set(["oranges", "apples", "bananas"]);
275
287
276
288
for (let value of set) alert(value);
277
289
278
-
// the same with forEach:
290
+
// même chose en utilisant forEach:
279
291
set.forEach((value, valueAgain, set) => {
280
292
alert(value);
281
293
});
282
294
```
283
295
284
-
Note the funny thing. The callback function passed in `forEach` has 3 arguments: a `value`, then *the same value* `valueAgain`, and then the target object. Indeed, the same value appears in the arguments twice.
296
+
A noter que la fonction de callback utilisée par `forEach` prend 3 arguments en paramètres: une `value`, puis *la même valeur* `valueAgain`,
297
+
et enfin le set lui-même.
298
+
285
299
286
-
That's for compatibility with `Map` where the callback passed `forEach` has three arguments. Looks a bit strange, for sure. But may help to replace `Map` with `Set` in certain cases with ease, and vice versa.
300
+
C'est pour des raisons de compatibilité avec `Map` que `forEach` prend en paramètre 3 arguments. C'est quelque peu surprenant, mais cela permet de
301
+
remplacer facilement une `Map` par un `Set`.
287
302
288
-
The same methods `Map` has for iterators are also supported:
303
+
Les méthodes pour parcourir les éléments d'une `Map` peuvent être utilisées :
289
304
290
-
- `set.keys()` -- returns an iterable object for values,
291
-
- `set.values()` -- same as `set.keys()`, for compatibility with `Map`,
292
-
- `set.entries()` -- returns an iterable object for entries `[value, value]`, exists for compatibility with `Map`.
305
+
- `set.keys()` -- retourne un objet iterable contenant les valeurs,
306
+
- `set.values()` -- même chose que pour `set.keys()`, méthode présente pour des raisons de compatibilité avec `Map`,
307
+
- `set.entries()` -- retourne un objet iterable sous la forme de `[value, value]`, , méthode présente pour des raisons de compatibilité avec `Map`
293
308
294
309
## Summary
295
310
296
-
`Map` -- is a collection of keyed values.
311
+
`Map` -- est une collection de clé valeurs.
297
312
298
-
Methods and properties:
313
+
Méthodes et propriétés:
299
314
300
-
- `new Map([iterable])` -- creates the map, with optional `iterable` (e.g. array) of `[key,value]` pairs for initialization.
301
-
- `map.set(key, value)` -- stores the value by the key.
302
-
- `map.get(key)` -- returns the value by the key, `undefined` if `key` doesn't exist in map.
303
-
- `map.has(key)` -- returns `true` if the `key` exists, `false` otherwise.
304
-
- `map.delete(key)` -- removes the value by the key.
305
-
- `map.clear()` -- removes everything from the map.
306
-
- `map.size` -- returns the current element count.
315
+
- `new Map([iterable])` -- créé une map, potentiellement initialisée avec un `iterable` (ex: un array) de couple clé valeur `[key,value]`.
316
+
- `map.set(key, value)` -- définie la valeur `value` pour la clé `key`.
317
+
- `map.get(key)` -- retourne la valeur associée à `key`, `undefined` si `key` n'existe pas.
318
+
- `map.has(key)` -- retourne `true` si `key` existe sinon `false`.
319
+
- `map.delete(key)` -- supprime la valeur associé à `key` dans la map.
320
+
- `map.clear()` -- supprime tous les éléments dans la map.
321
+
- `map.size` -- retourne le nombre d'éléments.
307
322
308
-
The differences from a regular `Object`:
323
+
La différence entre `Map` avec un objet traditionel :
309
324
310
-
- Any keys, objects can be keys.
311
-
- Additional convenient methods, the `size` property.
325
+
- N'importe quel type peut être utilisé comme clé
326
+
- Accès à des méthodes tels que `size`.
312
327
313
-
`Set` -- is a collection of unique values.
328
+
`Set` -- est une collection de valeurs uniques
314
329
315
-
Methods and properties:
330
+
Méthodes et propriétés :
316
331
317
-
- `new Set([iterable])` -- creates the set, with optional `iterable` (e.g. array) of values for initialization.
318
-
- `set.add(value)` -- adds a value (does nothing if `value` exists), returns the set itself.
319
-
- `set.delete(value)` -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
320
-
- `set.has(value)` -- returns `true` if the value exists in the set, otherwise `false`.
321
-
- `set.clear()` -- removes everything from the set.
322
-
- `set.size` -- is the elements count.
332
+
- `new Set([iterable])` -- créé un set, potentiellement initialisé avec un `iterable` (ex: un array) de valeurs.
333
+
- `set.add(value)` -- ajoute une valeur sauf si elle existe et retourne le set en cours.
334
+
- `set.delete(value)` -- supprime la valeur, retourne `true` si `value` existait au moment de l'appel sinon `false`.
335
+
- `set.has(value)` -- retourne `true` si la valeur existe dans le `set`, sinon `false`.
336
+
- `set.clear()` -- supprime tous les éléments du set.
337
+
- `set.size` -- retourne le nombre d'éléments.
323
338
324
-
Iteration over `Map` and `Set` is always in the insertion order, so we can't say that these collections are unordered, but we can't reorder elements or directly get an element by its number.
339
+
On ne peut pas dire que les éléments dans une `Map` ou un `Set` sont désordonnés car ils sont toujours parcourut par ordre d'insertion.
340
+
Il est cependant impossible de réorganiser les éléments ou bien de les retrouver par leur index.
0 commit comments