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
Copy file name to clipboardExpand all lines: 1-js/05-data-types/10-destructuring-assignment/article.md
+23-98Lines changed: 23 additions & 98 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,38 +2,22 @@
2
2
3
3
Les deux structures de données les plus utilisées en JavaScript sont `Object` et `Array`.
4
4
5
-
<<<<<<< HEAD
6
-
Les objets nous permettent de créer une seule entité qui stocke les éléments de données par clé, et les tableaux nous permettent de rassembler des éléments de données dans une collection ordonnée.
5
+
- Les objets nous permettent de créer une seule entité qui stocke les éléments de données par clé.
6
+
-Les tableaux nous permettent de rassembler des éléments de données dans une liste ordonnée.
7
7
8
8
Mais lorsque nous transmettons ceux-ci à une fonction, il se peut que celle-ci n'ait pas besoin d'un objet / tableau dans son ensemble, mais plutôt de morceaux individuels.
9
9
10
-
*L'affectation par décomposition* est une syntaxe spéciale qui nous permet de "décompresser" des tableaux ou des objets dans un ensemble de variables, ce qui est parfois plus pratique. La décomposition fonctionne également très bien avec des fonctions complexes comportant de nombreux paramètres, valeurs par défaut, etc.
11
-
=======
12
-
- Objects allow us to create a single entity that stores data items by key.
13
-
- Arrays allow us to gather data items into an ordered list.
10
+
*L'affectation par décomposition* est une syntaxe spéciale qui nous permet de "décompresser" des tableaux ou des objets dans un ensemble de variables, ce qui est parfois plus pratique.
14
11
15
-
Although, when we pass those to a function, it may need not an object/array as a whole. It may need individual pieces.
16
-
17
-
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient.
18
-
19
-
Destructuring also works great with complex functions that have a lot of parameters, default values, and so on. Soon we'll see that.
20
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
12
+
La décomposition fonctionne également très bien avec des fonctions complexes comportant de nombreux paramètres, valeurs par défaut, etc.
21
13
22
14
## Décomposition d'un tableau
23
15
24
-
<<<<<<< HEAD
25
-
Un exemple de la façon dont un tableau est décomposé en variables :
16
+
Voici un exemple de la façon dont un tableau est décomposé en variables :
26
17
27
18
```js
28
-
// nous avons un tableau avec le nom et le prénom
29
-
let arr = ["Ilya", "Kantor"]
30
-
=======
31
-
Here's an example of how an array is destructured into variables:
32
-
33
-
```js
34
-
// we have an array with the name and surname
19
+
// nous avons un tableau avec le prénom et le nom
35
20
let arr = ["John", "Smith"]
36
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
37
21
38
22
*!*
39
23
// l'affectation par décomposition
@@ -56,15 +40,10 @@ alert(firstName); // John
56
40
alert(surname); // Smith
57
41
```
58
42
59
-
<<<<<<< HEAD
60
-
````smart header="\"Décomposition\" ne veut pas dire \"destruction\"."
61
-
Cette manipulation est appelée "affectation par décomposition"", car elle "se décompose"" en copiant ses éléments dans des variables. Mais le tableau lui-même n'est pas modifié.
62
-
=======
63
-
As you can see, the syntax is simple. There are several peculiar details though. Let's see more examples, to better understand it.
43
+
Comme vous pouvez le voir, la syntaxe est simple. Il y a cependant plusieurs détails particuliers. Voyons plus d'exemples, pour mieux le comprendre.
64
44
65
-
````smart header="\"Destructuring\" does not mean \"destructive\"."
66
-
It's called "destructuring assignment," because it "destructurizes" by copying items into variables. But the array itself is not modified.
67
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
45
+
````smart header="\"Décomposition\" ne veut pas dire \"destruction\"."
46
+
Cette manipulation est appelée "affectation par décomposition", car elle "se décompose" en copiant ses éléments dans des variables. Mais le tableau lui-même n'est pas modifié.
68
47
69
48
C’est juste une façon plus courte d’écrire :
70
49
```js
@@ -101,14 +80,9 @@ That works, because internally a destructuring assignment works by iterating ove
101
80
````
102
81
103
82
104
-
<<<<<<< HEAD
105
-
````smart header="Attribuer à n'importe quoi à gauche"
83
+
````smart header="Attribuer à n'importe quoi à la partie gauche"
106
84
107
85
Nous pouvons utiliser n'importe quel "assignable" à gauche.
108
-
=======
109
-
````smart header="Assign to anything at the left-side"
110
-
We can use any "assignables" at the left side.
111
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
112
86
113
87
Par exemple, une propriété d'objet :
114
88
```js run
@@ -121,14 +95,9 @@ alert(user.surname); // Smith
121
95
122
96
````
123
97
124
-
<<<<<<< HEAD
125
98
````smart header="Boucler avec .entries()"
126
99
127
-
Dans le chapitre précédent, nous avons vu les méthodes [Object.entries(obj)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/entries).
128
-
=======
129
-
````smart header="Looping with .entries()"
130
-
In the previous chapter we saw the [Object.entries(obj)](mdn:js/Object/entries) method.
131
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
100
+
Dans le chapitre précédent, nous avons vu la méthode [Object.entries(obj)](mdn:js/Object/entries).
132
101
133
102
Nous pouvons l'utiliser avec la décomposition pour boucler sur les clés et valeurs d'un objet :
134
103
@@ -146,11 +115,7 @@ for (let [key, value] of Object.entries(user)) {
146
115
}
147
116
```
148
117
149
-
<<<<<<< HEAD
150
-
...Et la même chose pour un map :
151
-
=======
152
-
The similar code for a `Map` is simpler, as it's iterable:
153
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
118
+
Le code similaire pour un `Map` est plus simple, car il est itérable :
154
119
155
120
```js run
156
121
let user = new Map();
@@ -166,22 +131,14 @@ for (let [key, value] of user) {
166
131
```
167
132
````
168
133
169
-
<<<<<<< HEAD
170
134
```smart header="Astuce d'échange de variables"
171
-
Une astuce bien connue pour permuter les valeurs de deux variables :
172
-
=======
173
-
````smart header="Swap variables trick"
174
-
There's a well-known trick for swapping values of two variables using a destructuring assignment:
175
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
135
+
Il existe une astuce bien connue pour permuter les valeurs de deux variables à l'aide d'une affectation de déstructuration :
176
136
177
137
```js run
178
138
let guest = "Jane";
179
139
let admin = "Pete";
180
140
181
-
<<<<<<< HEAD
182
-
// Permuter les valeurs : faire guest=Pete, admin=Jane
183
-
=======
184
-
// Let's swap the values: make guest=Pete, admin=Jane
141
+
// Permutons les valeurs : make guest=Pete, admin=Jane
185
142
*!*
186
143
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
187
144
[guest, admin] = [admin, guest];
@@ -192,23 +149,15 @@ alert(`${guest} ${admin}`); // Pete Jane (échangé avec succès !)
192
149
193
150
Ici, nous créons un tableau temporaire de deux variables et le déstructurons immédiatement dans l'ordre permuté.
194
151
195
-
<<<<<<< HEAD
196
152
Nous pouvons échanger plus de deux variables de cette façon.
197
153
198
-
=======
199
-
We can swap more than two variables this way.
200
154
````
201
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
202
155
203
156
### Le rest '...'
204
157
205
-
<<<<<<< HEAD
206
-
Si nous voulons non seulement obtenir les premières valeurs, mais aussi rassembler tout ce qui suit, nous pouvons ajouter un paramètre supplémentaire qui obtient "le reste" à l'aide de trois points `"..."`:
207
-
=======
208
-
Usually, if the array is longer when the list at the left, the "extra" items are omitted.
158
+
Habituellement, si le tableau est plus long lorsque la liste est à gauche, les éléments "supplémentaires" sont omis.
209
159
210
-
For example, here only two items are taken, and the rest is just ignored:
211
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
160
+
Par exemple, ici, seuls deux éléments sont pris et le reste est simplement ignoré :
212
161
213
162
```js run
214
163
let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
@@ -231,26 +180,18 @@ alert(rest.length); // 2
231
180
*/!*
232
181
```
233
182
234
-
<<<<<<< HEAD
235
-
La valeur de `rest` est le tableau des éléments du tableau restants. Nous pouvons utiliser n’importe quel autre nom de variable à la place de `rest`, assurez-vous simplement qu’il a trois points devant lui et soit placé en dernier dans l’affectation par décomposition.
236
-
=======
237
-
The value of `rest` is the array of the remaining array elements.
183
+
La valeur de `rest` est le tableau des éléments du tableau restants.
238
184
239
-
We can use any other variable name in place of `rest`, just make sure it has three dots before it and goes last in the destructuring assignment.
185
+
Nous pouvons utiliser n’importe quel autre nom de variable à la place de `rest`, assurez-vous simplement qu’il a trois points devant lui et soit placé en dernier dans l’affectation par décomposition.
240
186
241
187
```js run
242
188
let [name1, name2, *!*...titles*/!*] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
243
189
// now titles = ["Consul", "of the Roman Republic"]
244
190
```
245
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
246
191
247
192
### Les valeurs par défaut
248
193
249
-
<<<<<<< HEAD
250
-
S'il y a moins de valeurs dans le tableau que de variables dans l'affectation, il n'y aura pas d'erreur. Les valeurs absentes sont considérées comme non définies :
251
-
=======
252
-
If the array is shorter than the list of variables at the left, there'll be no errors. Absent values are considered undefined:
253
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
194
+
Si le tableau est plus court que la liste des variables à gauche, il n'y aura aucune erreur. Les valeurs absentes sont considérées comme non définies :
Les valeurs par défaut peuvent être des expressions plus complexes ou même des appels de fonction. Ils ne sont évalués que si la valeur n'est pas fournie.
277
218
278
-
<<<<<<< HEAD
279
-
Par exemple, nous utilisons ici la fonction `prompt` pour deux valeurs par défaut. Mais cela ne fonctionnera que pour celle qui manque :
280
-
=======
281
-
For instance, here we use the `prompt` function for two defaults:
282
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
219
+
Par exemple, nous utilisons ici la fonction `prompt` pour deux valeurs par défaut :
283
220
284
221
```js run
285
222
// runs only prompt for surname
@@ -301,11 +238,7 @@ La syntaxe de base est la suivante :
301
238
let {var1, var2} = {var1:…, var2:…}
302
239
```
303
240
304
-
<<<<<<< HEAD
305
-
Nous avons un objet existant à droite que nous souhaitons scinder en variables. Le côté gauche contient un "pattern" pour les propriétés correspondantes. Dans ce cas simple, c’est une liste de noms de variables dans `{...}`.
306
-
=======
307
-
We should have an existing object at the right side, that we want to split into variables. The left side contains an object-like "pattern" for corresponding properties. In the simplest case, that's a list of variable names in `{...}`.
308
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
241
+
Nous devrions avoir un objet existant sur le côté droit, que nous voulons diviser en variables. La partie gauche contient un "modèle" de type objet pour les propriétés correspondantes. Dans le cas le plus simple, c'est une liste de noms de variables dans `{...}`.
309
242
310
243
Par exemple :
311
244
@@ -325,13 +258,9 @@ alert(width); // 100
325
258
alert(height); // 200
326
259
```
327
260
328
-
<<<<<<< HEAD
329
-
Les propriétés `options.title`, `options.width` et `options.height` sont affectés aux variables correspondantes. L'ordre n'a pas d'importance. Cela fonctionne aussi :
330
-
=======
331
-
Properties `options.title`, `options.width` and `options.height` are assigned to the corresponding variables.
261
+
Les propriétés `options.title`, `options.width` et `options.height` sont affectées aux variables correspondantes.
332
262
333
-
The order does not matter. This works too:
334
-
>>>>>>> 468e3552884851fcef331fbdfd58096652964b5f
263
+
L'ordre n'a pas d'importance. Cela fonctionne aussi :
Le pattern à gauche peut être plus complexe et spécifier le mapping entre propriétés et variables.
342
271
343
-
<<<<<<< HEAD
344
272
Si nous voulons affecter une propriété à une variable portant un autre nom, par exemple, `options.width` pour aller dans la variable nommée `w`, alors nous pouvons la définir en utilisant deux points :
345
-
=======
346
-
If we want to assign a property to a variable with another name, for instance, make `options.width` go into the variable named `w`, then we can set the variable name using a colon:
0 commit comments