convert content to md

1 files changed, 81 insertions, 100 deletions

diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.md b/files/fr/web/javascript/reference/global_objects/array/map/index.md
index 48a9be07f5..b5a56e9db7 100644
--- a/files/fr/web/javascript/reference/global_objects/array/map/index.md
+++ b/files/fr/web/javascript/reference/global_objects/array/map/index.md
@@ -12,84 +12,83 @@ tags:
 translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
 original_slug: Web/JavaScript/Reference/Objets_globaux/Array/map
 ---
-<div>{{JSRef}}</div>
+{{JSRef}}
 
-<p>La méthode <code><strong>map()</strong></code> crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.</p>
+La méthode **`map()`** crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
 
-<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>
+{{EmbedInteractiveExample("pages/js/array-map.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>var nouveauTableau = arr</var>.map(<var>callback</var> [, <var>thisArg</var>])</pre>
+    var nouveauTableau = arr.map(callback [, thisArg])
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments :
- <dl>
-  <dt><code>valeurCourante</code></dt>
-  <dd>La valeur de l'élément du tableau à traiter.</dd>
-  <dt><code>index</code>{{optional_inline}}</dt>
-  <dd>L'index de l'élément qui est traité par la fonction.</dd>
-  <dt><code>tableau</code>{{optional_inline}}</dt>
-  <dd>Le tableau sur lequel on a appelé la méthode <code>map</code>.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code> {{optional_inline}}</dt>
- <dd>La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>. La valeur par défaut est l'objet global de l'environnement (<code>Window</code> pour un navigateur).</dd>
-</dl>
+- `callback`
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+  - : La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments :
 
-<p>Un nouveau tableau composé des images de la fonction de rappel.</p>
+    - `valeurCourante`
+      - : La valeur de l'élément du tableau à traiter.
+    - `index`{{optional_inline}}
+      - : L'index de l'élément qui est traité par la fonction.
+    - `tableau`{{optional_inline}}
+      - : Le tableau sur lequel on a appelé la méthode `map`.
 
-<h2 id="Description">Description</h2>
+- `thisArg` {{optional_inline}}
+  - : La valeur à utiliser pour `this` lors de l'exécution de `callback`. La valeur par défaut est l'objet global de l'environnement (`Window` pour un navigateur).
 
-<p>Lorsqu'on utilise <code>map</code>, la fonction <code>callback</code> fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction <code>callback</code> est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.</p>
+### Valeur de retour
 
-<p><code>callback</code> est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.</p>
+Un nouveau tableau composé des images de la fonction de rappel.
 
-<div class="warning">
-<p><strong>Attention :</strong> <code>map()</code> construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach">forEach</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>.  Pour mieux décider si <code>map()</code>est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction <code>callback</code> : si ce n'est pas le cas, il ne faut pas utiliser <code>map()</code>.</p>
-</div>
+## Description
 
-<p>Si le paramètre <code>thisArg</code> est utilisé, il sera utilisé en tant que <code>this</code> par la fonction <code>callback</code> lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est définie <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">selon les règles usuelles qui déterminent la valeur <code>this</code> observée par une fonction</a>.</p>
+Lorsqu'on utilise `map`, la fonction `callback` fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction `callback` est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.
 
-<p><code>map</code> ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction <code>callback</code>, si elle est appelée, puisse modifier le tableau).</p>
+`callback` est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.
 
-<p>La liste des éléments à traiter lors de l'opération <code>map</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau après que l'appel à <code>map</code> ait été initié ne seront pas traités par la fonction <code>callback</code>. Si des éléments ont été modifiés, la valeur utilisée par la fonction <code>callback</code> sera celle au moment où <code>map</code> est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique <code>map</code> sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.</p>
+> **Attention :** `map()` construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser [`forEach`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of).  Pour mieux décider si `map()`est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction `callback` : si ce n'est pas le cas, il ne faut pas utiliser `map()`.
 
-<h2 id="Exemples">Exemples</h2>
+Si le paramètre `thisArg` est utilisé, il sera utilisé en tant que `this` par la fonction `callback` lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir `this`. La valeur `this` finalement prise en compte par la fonction `callback` est définie [selon les règles usuelles qui déterminent la valeur `this` observée par une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this).
 
-<h3 id="Créer_un_tableau_des_racines_carrées_d'un_tableau_de_nombre">Créer un tableau des racines carrées d'un tableau de nombre</h3>
+`map` ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction `callback`, si elle est appelée, puisse modifier le tableau).
 
-<p>Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :</p>
+La liste des éléments à traiter lors de l'opération `map` est définie avant le premier appel à `callback`. Les éléments qui sont ajoutés au tableau après que l'appel à `map` ait été initié ne seront pas traités par la fonction `callback`. Si des éléments ont été modifiés, la valeur utilisée par la fonction `callback` sera celle au moment où `map` est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique `map` sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.
 
-<pre class="brush: js">var nombres = [1, 4, 9];
+## Exemples
+
+### Créer un tableau des racines carrées d'un tableau de nombre
+
+Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :
+
+```js
+var nombres = [1, 4, 9];
 var racines = nombres.map(Math.sqrt);
 // racines vaut désormais [1, 2, 3]
 // nombres vaut toujours [1, 4, 9]
-</pre>
+```
 
-<h3 id="Créer_un_tableau_de_nombres_avec_une_fonction_à_un_argument">Créer un tableau de nombres avec une fonction à un argument</h3>
+### Créer un tableau de nombres avec une fonction à un argument
 
-<p>Ici, on illustre le fonctionnement de <code>map</code> avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que <code>map</code> parcourt le tableau :</p>
+Ici, on illustre le fonctionnement de `map` avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que `map` parcourt le tableau :
 
-<pre class="brush: js">var nombres = [1, 4, 9];
+```js
+var nombres = [1, 4, 9];
 var doubles = nombres.map(function(num) {
   return num * 2;
 });
 // doubles vaut désormais [2, 8, 18].
 // nombres vaut toujours [1, 4, 9]
-</pre>
+```
 
-<h3 id="Utiliser_map_pour_changer_le_format_d'objets_dans_un_tableau">Utiliser <code>map</code> pour changer le format d'objets dans un tableau</h3>
+### Utiliser `map` pour changer le format d'objets dans un tableau
 
-<p>Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :</p>
+Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :
 
-<pre class="brush: js">var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
-var tableauFormaté = tableauOrig.map(obj =&gt; {
+```js
+var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
+var tableauFormaté = tableauOrig.map(obj => {
   var rObj = {};
   rObj[obj.clé] = obj.valeur;
   return rObj;
@@ -100,36 +99,39 @@ var tableauFormaté = tableauOrig.map(obj =&gt; {
 //  {clé:2, valeur:20},
 //  {clé:3, valeur: 30}
 // ]
-</pre>
+```
 
-<h3 id="Utiliser_map_de_façon_générique">Utiliser <code>map</code> de façon générique</h3>
+### Utiliser `map` de façon générique
 
-<p>Dans cet exemple, on voit comment utiliser la fonction <code>map</code> sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :</p>
+Dans cet exemple, on voit comment utiliser la fonction `map` sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :
 
-<pre class="brush: js">var map = Array.prototype.map;
+```js
+var map = Array.prototype.map;
 var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
 // a vaut désormais [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
-</pre>
+```
 
-<h3 id="Utiliser_map_avec_querySelectorAll">Utiliser <code>map</code> avec <code>querySelectorAll</code></h3>
+### Utiliser `map` avec `querySelectorAll`
 
-<p>Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à <code>querySelectorAll</code> :</p>
+Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à `querySelectorAll` :
 
-<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
+```js
+var elems = document.querySelectorAll('select option:checked');
 var values = Array.prototype.map.call(elems, function(obj) {
   return obj.value;
 });
-</pre>
+```
 
-<p>On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.</p>
+On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.
 
-<h3 id="Un_résultat_inattendu">Un résultat inattendu</h3>
+### Un résultat inattendu
 
-<p><a href="https://www.wirfs-brock.com/allen/posts/166">Exemple inspiré par ce billet</a> (en anglais)</p>
+[Exemple inspiré par ce billet](https://www.wirfs-brock.com/allen/posts/166) (en anglais)
 
-<p>Il est fréquent d'utiliser la fonction <code>callback</code> avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :</p>
+Il est fréquent d'utiliser la fonction `callback` avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :
 
-<pre class="brush: js">// Si on utilise :
+```js
+// Si on utilise :
 ['1', '2', '3'].map(parseInt);
 // On s'attend à obtenir [1, 2, 3]
 // Le résultat qu'on obtient est en fait [1, NaN, NaN]
@@ -161,50 +163,29 @@ function returnInt(element) {
 
 // Formulation équivalente plus concise avec
 // une fonction fléchée
-['1', '2', '3'].map( str =&gt; parseInt(str));
+['1', '2', '3'].map( str => parseInt(str));
 
 // Une autre méthode, plus simple
 ['1', '2', '3'].map(Number); // [1, 2, 3]
 // à la différence de parseInt, cela fonctionnera pour les
 // nombres décimaux ou en notation exponentielle
 ['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.map")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>L'objet {{jsxref("Map")}}</li>
- <li>{{jsxref("Array.from()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}                 | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.map")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.forEach()")}}
+- L'objet {{jsxref("Map")}}
+- {{jsxref("Array.from()")}}