diff options
author | julieng <julien.gattelier@gmail.com> | 2021-08-03 08:03:23 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-03 08:08:25 +0200 |
commit | bf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch) | |
tree | c101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/reference/global_objects/array/foreach | |
parent | 844f5103992238c0c23203286dad16a466e89c97 (diff) | |
download | translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2 translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip |
convert content to md
Diffstat (limited to 'files/fr/web/javascript/reference/global_objects/array/foreach')
-rw-r--r-- | files/fr/web/javascript/reference/global_objects/array/foreach/index.md | 242 |
1 files changed, 109 insertions, 133 deletions
diff --git a/files/fr/web/javascript/reference/global_objects/array/foreach/index.md b/files/fr/web/javascript/reference/global_objects/array/foreach/index.md index 1b10baec33..13b7cf4a13 100644 --- a/files/fr/web/javascript/reference/global_objects/array/foreach/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/foreach/index.md @@ -12,107 +12,102 @@ tags: translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach original_slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach --- -<div>{{JSRef}}</div> +{{JSRef}} -<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée sur chaque élément du tableau.</p> +La méthode **`forEach()`** permet d'exécuter une fonction donnée sur chaque élément du tableau. -<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> +{{EmbedInteractiveExample("pages/js/array-foreach.html")}} -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback</var>); -arr.forEach(callback, <var>thisArg</var>);</pre> + arr.forEach(callback); + arr.forEach(callback, thisArg); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>callback</code></dt> - <dd>La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments : - <dl> - <dt><code>valeurCourante</code></dt> - <dd>La valeur de l'élément du tableau en cours de traitement.</dd> - <dt><code>index</code> {{optional_inline}}</dt> - <dd>L'indice de l'élément du tableau en cours de traitement.</dd> - <dt><code>array</code> {{optional_inline}}</dt> - <dd>Le tableau sur lequel la méthode <code>forEach</code> est appliquée.</dd> - </dl> - </dd> - <dt><code>thisArg</code> {{optional_inline}}</dt> - <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>.</dd> -</dl> +- `callback` -<h3 id="Valeur_de_retour">Valeur de retour</h3> + - : La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments : -<p>{{jsxref("undefined")}}.</p> + - `valeurCourante` + - : La valeur de l'élément du tableau en cours de traitement. + - `index` {{optional_inline}} + - : L'indice de l'élément du tableau en cours de traitement. + - `array` {{optional_inline}} + - : Le tableau sur lequel la méthode `forEach` est appliquée. -<h2 id="Description">Description</h2> +- `thisArg` {{optional_inline}} + - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'exécution de `callback`. -<p><code>forEach()</code> exécute la fonction <code><em>callback</em></code> une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}.</p> +### Valeur de retour -<p><code>callback</code> est appelé avec trois arguments :</p> +{{jsxref("undefined")}}. -<ul> - <li>la valeur de l'élément</li> - <li>l'index de l'élément</li> - <li>le tableau utilisé</li> -</ul> +## Description -<p>Si un paramètre <code>thisArg</code> est fourni à la méthode <code>forEach</code>, il sera utilisé en tant que valeur <code>this</code> pour chaque appel de <code>callback</code>. Sinon, ce sera la valeur <code>undefined</code> qui sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles pour déterminer la valeur de <code>this</code> utilisée dans une fonction</a>.</p> +`forEach()` exécute la fonction `callback` une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}. -<p>L'ensemble des éléments traités par <code>forEach</code> est défini avant le premier appel à <code>callback</code>. Les éléments ajoutés au tableau après que l'appel à <code>forEach</code> ait commencé ne seront pas visités par <code>callback</code>. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au <code>callback</code> sera la valeur au moment du passage du <code>forEach</code> ; les éléments supprimés ne sont pas parcourus. Voir <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach#Attention_aux_modifications_en_cours">l'exemple ci-après</a>.</p> +`callback` est appelé avec trois arguments : -<p><code>forEach()</code> exécute la fonction <code>callback</code> une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne.</p> +- la valeur de l'élément +- l'index de l'élément +- le tableau utilisé -<p><code>forEach()</code> ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (<em>callback</em>) utilisée peut modifier le tableau.</p> +Si un paramètre `thisArg` est fourni à la méthode `forEach`, il sera utilisé en tant que valeur `this` pour chaque appel de `callback`. Sinon, ce sera la valeur `undefined` qui sera utilisée comme valeur `this`. La valeur `this` finalement prise en compte par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur de `this` utilisée dans une fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). -<div class="note"><p><strong>Note :</strong> Il n'existe aucun moyen d'arrêter une boucle <code>forEach</code> en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :</p> +L'ensemble des éléments traités par `forEach` est défini avant le premier appel à `callback`. Les éléments ajoutés au tableau après que l'appel à `forEach` ait commencé ne seront pas visités par `callback`. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au `callback` sera la valeur au moment du passage du `forEach` ; les éléments supprimés ne sont pas parcourus. Voir [l'exemple ci-après](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach#Attention_aux_modifications_en_cours). -<ul> - <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> classique</li> - <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li> - <li>{{jsxref("Array.prototype.every()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.findIndex()")}}</li> -</ul> +`forEach()` exécute la fonction `callback` une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne. -<p>Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à <code>true</code> si besoin de poursuivre la boucle.</p> -</div> +`forEach()` ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (_callback_) utilisée peut modifier le tableau. -<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément ; contrairement à <code>every</code> et <code><code>some</code></code>, cette méthode renvoie toujours <code>undefined</code> et ne peut pas être enchaînée.</p> +> **Note :** Il n'existe aucun moyen d'arrêter une boucle `forEach` en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt : +> +> - Une boucle [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) classique +> - Une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) +> - {{jsxref("Array.prototype.every()")}} +> - {{jsxref("Array.prototype.some()")}} +> - {{jsxref("Array.prototype.find()")}} +> - {{jsxref("Array.prototype.findIndex()")}} +> +> Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à `true` si besoin de poursuivre la boucle. -<h2 id="Exemples">Exemples</h2> +`forEach` exécute la fonction `callback` une fois pour chaque élément ; contrairement à `every` et `some`, cette méthode renvoie toujours `undefined` et ne peut pas être enchaînée. -<h3 id="Équivalence_entre_une_boucle_for_et_une_boucle_forEach">Équivalence entre une boucle <code>for</code> et une boucle <code>forEach</code></h3> +## Exemples -<p>Voici un fragment de code simple qui utilise une boucle <code>for</code></p> +### Équivalence entre une boucle `for` et une boucle `forEach` -<pre class="brush: js">var items = ["item1", "item2", "item3"]; +Voici un fragment de code simple qui utilise une boucle `for` + +```js +var items = ["item1", "item2", "item3"]; var copie = []; -for (var i = 0; i < items.length; i++) { +for (var i = 0; i < items.length; i++) { copie.push(items[i]); } -</pre> +``` -<p>Et voici un fragment de code équivalent qui utilise <code>forEach</code> :</p> +Et voici un fragment de code équivalent qui utilise `forEach` : -<pre class="brush: js">var items = ["item1", "item2", "item3"] +```js +var items = ["item1", "item2", "item3"] var copie = []; items.forEach(function(item){ copie.push(item); -});</pre> +}); +``` -<h3 id="Afficher_le_contenu_d'un_tableau">Afficher le contenu d'un tableau</h3> +### Afficher le contenu d'un tableau -<div class="note"> -<p><strong>Note :</strong> Pour afficher le contenu d'un tableau, on pourra utiliser <code><a href="/fr/docs/Web/API/Console/table">console.table()</a></code> qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour <code>forEach()</code>.</p> -</div> +> **Note :** Pour afficher le contenu d'un tableau, on pourra utiliser [`console.table()`](/fr/docs/Web/API/Console/table) qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour `forEach()`. -<p>Le code suivant affiche une ligne pour chaque élément du tableau :</p> +Le code suivant affiche une ligne pour chaque élément du tableau : -<pre class="brush:js">function logArrayElements(element, index, array) { +```js +function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, , 9].forEach(logArrayElements); @@ -120,14 +115,14 @@ items.forEach(function(item){ // a[0] = 2 // a[1] = 5 // a[3] = 9 +``` -</pre> - -<h3 id="Utiliser_l'argument_pour_this">Utiliser l'argument pour <code>this</code></h3> +### Utiliser l'argument pour `this` -<p>Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :</p> +Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau : -<pre class="brush: js">function Compteur() { +```js +function Compteur() { this.somme = 0; this.compte = 0; } @@ -144,27 +139,24 @@ var obj = new Compteur(); obj.ajouter([2, 5, 9]); console.log(obj.compte); // 3 console.log(obj.somme); // 16 -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Le paramètre pour <code>this</code> est passé à la méthode <code>forEach()</code>, à chaque appel du callback, celui-ci sera utilisé comme valeur pour <code>this</code>.</p> -</div> +> **Note :** Le paramètre pour `this` est passé à la méthode `forEach()`, à chaque appel du callback, celui-ci sera utilisé comme valeur pour `this`. -<div class="note"> -<p><strong>Note :</strong> Si la fonction passée en argument est <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a>, il n'est pas nécessaire d'ajouter le paramètre <code>this</code> car les fonctions fléchées utilisent le <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> fourni par le contexte lexical.</p> -</div> +> **Note :** Si la fonction passée en argument est [une fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), il n'est pas nécessaire d'ajouter le paramètre `this` car les fonctions fléchées utilisent le [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) fourni par le contexte lexical. -<h3 id="Stopper_une_boucle">Stopper une boucle</h3> +### Stopper une boucle -<p>Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à <code>SEUIL_MAX</code>.</p> +Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à `SEUIL_MAX`. -<pre class="brush: js">var SEUIL_MAX = 12; +```js +var SEUIL_MAX = 12; var v = [5, 2, 16, 4, 3, 18, 20]; var res; res = v.every(function(element, index, array) { console.log('élément :', element); - if (element >= SEUIL_MAX) { + if (element >= SEUIL_MAX) { return false; } @@ -179,7 +171,7 @@ console.log('res:', res); res = v.some(function(element, index, array) { console.log('élément:', element); - if (element >= SEUIL_MAX) { + if (element >= SEUIL_MAX) { return true; } @@ -190,13 +182,15 @@ console.log('res:', res); // élément : 5 // élément : 2 // élément : 16 -// res: true</pre> +// res: true +``` -<h3 id="Une_fonction_de_copie_d'objet">Une fonction de copie d'objet</h3> +### Une fonction de copie d'objet -<p>Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'<code>Array.prototype.forEach</code> et d'utiliser les fonctions ECMAScript 5 <code>Object.*</code>.</p> +Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'`Array.prototype.forEach` et d'utiliser les fonctions ECMAScript 5 `Object.*`. -<pre class="brush: js">function copie(obj) { +```js +function copie(obj) { var copie = Object.create(Object.getPrototypeOf(obj)); var propNames = Object.getOwnPropertyNames(obj); @@ -209,13 +203,15 @@ console.log('res:', res); } var obj1 = { a: 1, b: 2 }; -var obj2 = copie(obj1); // obj2 ressemble désormais à obj1</pre> +var obj2 = copie(obj1); // obj2 ressemble désormais à obj1 +``` -<h3 id="Attention_aux_modifications_en_cours">Attention aux modifications en cours</h3> +### Attention aux modifications en cours -<p>Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : <code>"un"</code>, <code>"deux"</code>, <code>"trois"</code>, <code>"quatre"</code>. Lorsque le parcours du tableau arrive à l'élément <code>"deux"</code>, on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément <code>"quatre"</code> est décalé à la place de <code>"trois"</code> et <code>"trois"</code> est déplacé à la place de <code>"deux"</code>. Pour cette raison, lorsque <code>forEach</code> poursuit son parcours, elle saute la valeur "trois". Autrement dit, <code>forEach</code> n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel.</p> +Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : `"un"`, `"deux"`, `"trois"`, `"quatre"`. Lorsque le parcours du tableau arrive à l'élément `"deux"`, on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément `"quatre"` est décalé à la place de `"trois"` et `"trois"` est déplacé à la place de `"deux"`. Pour cette raison, lorsque `forEach` poursuit son parcours, elle saute la valeur "trois". Autrement dit, `forEach` n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel. -<pre class="brush: js">var mots = ["un", "deux", "trois",, "quatre"]; +```js +var mots = ["un", "deux", "trois",, "quatre"]; mots.forEach(function(mot) { console.log(mot); if (mot === "deux") { @@ -224,48 +220,28 @@ mots.forEach(function(mot) { }); // un // deux -// quatre</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.18', 'Array.prototype.forEach')}}</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.foreach', 'Array.prototype.forEach')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.builtins.Array.forEach")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Array.prototype.filter()")}}</li> - <li>{{jsxref("Array.prototype.find()")}}</li> - <li>{{jsxref("Array.prototype.findIndex()")}}</li> - <li>{{jsxref("Array.prototype.map()")}}</li> - <li>{{jsxref("Array.prototype.every()")}}</li> - <li>{{jsxref("Array.prototype.some()")}}</li> - <li>{{jsxref("Map.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> +// quatre +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | +| {{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | +| {{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.builtins.Array.forEach")}} + +## Voir aussi + +- {{jsxref("Array.prototype.filter()")}} +- {{jsxref("Array.prototype.find()")}} +- {{jsxref("Array.prototype.findIndex()")}} +- {{jsxref("Array.prototype.map()")}} +- {{jsxref("Array.prototype.every()")}} +- {{jsxref("Array.prototype.some()")}} +- {{jsxref("Map.prototype.forEach()")}} +- {{jsxref("Set.prototype.forEach()")}} |