1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: for
slug: Web/JavaScript/Reference/Instructions/for
tags:
- Instruction
- JavaScript
- Reference
translation_of: Web/JavaScript/Reference/Statements/for
---
<div>{{jsSidebar("Statements")}}</div>
<p>L'instruction <code><strong>for</strong></code> crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">une instruction de bloc</a>) à exécuter dans la boucle.</p>
<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">for ([<em>initialisation</em>]; [<em>condition</em>]; [<em>expression_finale</em>])
<em>instruction</em>
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>initialisation</code></dt>
<dd>Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé <code>var</code> ou <code>let</code>. Les variables déclarées avec <code>var</code> se situent dans la même portée que la boucle <code>for</code> (elles ne sont pas locales au sein de la boucle), les variables déclarées avec <code>let</code> sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.</dd>
<dt><code>condition</code></dt>
<dd>Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'<code>instruction </code>est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut <code>false</code>), l'exécution se poursuivra à la première expression qui suit la boucle <code>for</code>.</dd>
<dt><code>expression_finale</code></dt>
<dd>Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression <code>condition</code>. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.</dd>
<dt><code>instruction</code></dt>
<dd>Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de <a href="/fr/docs/JavaScript/Rérence_JavaScript/Instructions/block">bloc</a> (<code>{ ... }</code>) qui regroupera ces différentes instructions.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Utiliser_for">Utiliser <code>for</code></h3>
<p>L'instruction <code>for</code> qui suit débute en déclarant la variable <code>i</code> et en l'initialisant à 0. Elle vérifie que <code>i</code> est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente <code>i</code> de 1, ce qui sera fait à chaque passage dans la boucle.</p>
<pre class="brush: js">for (var i = 0; i < 9; i++) {
n += i;
myfunc(n);
}
</pre>
<h3 id="Expressions_optionnelles_pour_for">Expressions optionnelles pour <code>for</code></h3>
<p>Les trois expressions qui composent l'instruction <code>for</code> sont optionnelles :</p>
<p>Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :</p>
<pre class="brush: js">var i = 0;
for (; i < 9; i++) {
console.log(i);
// d'autres instructions
}
</pre>
<p>De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.</p>
<pre class="brush: js">for (var i = 0;; i++) {
console.log(i);
if (i > 3) break;
// d'autres instructions
}</pre>
<p>Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.</p>
<pre class="brush: js">var i = 0;
for (;;) {
if (i > 3) break;
console.log(i);
i++;
}
</pre>
<h3 id="Utiliser_for_avec_une_instruction_vide">Utiliser <code>for</code> avec une instruction vide</h3>
<p>L'instruction <code>for</code> qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.</p>
<pre class="brush: js">function showOffsetPos (sId) {
var nLeft = 0, nTop = 0;
for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
}</pre>
<div class="note"><strong>Note :</strong> Dans cas, où on n'utilise pas la section d'instruction,<strong> il faut mettre un point-virgule immédiatement après la déclaration de la boucle.</strong></div>
<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('ESDraft', '#sec-for-statement', 'for statement')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}</td>
<td>{{Spec2('ES3')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("javascript.statements.for")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{jsxref("Instructions/break", "break")}}</li>
<li>{{jsxref("Instructions/continue", "continue")}}</li>
<li>{{jsxref("Instructions/vide", "Instruction vide","",1)}}</li>
<li>{{jsxref("Instructions/while", "while")}}</li>
<li>{{jsxref("Instructions/do...while", "do...while")}}</li>
<li>{{jsxref("Instructions/for...in", "for...in")}}</li>
<li>{{jsxref("Instructions/for...of", "for...of")}}</li>
</ul>
|
