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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
---
title: for
slug: Web/JavaScript/Reference/Statements/for
translation_of: Web/JavaScript/Reference/Statements/for
---
<div>{{jsSidebar("Statements")}}</div>
<p>A instrução <code>for</code><strong> </strong>cria um loop que consiste em três expressões opcionais, dentro de parênteses e separadas por ponto e vírgula, seguidas por uma declaração ou uma sequência de declarações executadas em sequência.</p>
<p>A fonte desse exemplo interativo está armazenada em um repositório do GitHub. Se você gostaria de contribuir com os projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request (requisição para puxar).</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox notranslate">for ([<em>inicialização</em>]; [<em>condição</em>]; [<em>expressão final</em>])
<em> declaração</em>
</pre>
<dl>
<dt><code>inicialização</code></dt>
<dd>Uma expressão (incluindo expressões de atribuição) ou declarações variáveis. Geralmente usada para iniciar o contador de variáveis. Esta expressão pode, opcionalmente, declarar novas variáveis com a palavra chave <code>var</code>. Essas variáveis não são locais no loop, isto é, elas estão no mesmo escopo que o loop <code>for</code><strong> </strong>está. Variáveis declaradas com let são locais para a declaração.</dd>
<dd>O resultado desta expressão é descartado.</dd>
<dt><code>condição</code></dt>
<dd>Uma expressão para ser avaliada antes de cada iteração do loop. Se esta expressão for avaliada para true, <code>declaração</code> será executado. Este teste da condição é opcional. Se omitido, a condição sempre será avaliada como verdadeira. Se a expressão for avaliada como falsa, a execução irá para a primeira expressão após a construção loop <code>for</code>.</dd>
<dt><code>expressão final</code></dt>
<dd>Uma expressão que será validada no final de cada iteração de loop. Isso ocorre antes da próxima avaliação da condição. Geralmente usado para atualizar ou incrementar a variável do contador.</dd>
<dt><code>declaração</code></dt>
<dd>Uma declaração que é executada enquanto a condição for verdadeira. Para executar múltiplas condições dentro do loop, use uma instrução de bloco <code>({...})</code> para agrupar essas condições. Para não executar declarações dentro do loop, use uma instrução vazia <code>(;)</code>.</dd>
</dl>
<h2 id="Exemplos_de_uso">Exemplos de uso</h2>
<h3 id="Usando_for">Usando <code>for</code></h3>
<p>A declaração <code>for</code> começa declarando a variável <code>i</code> e inicializando-a como <code>0</code>. Ela verifica se <code>i</code> é menor que nove, executa as duas instruções subsequentes e incrementa 1 a variável <code>i</code> após cada passagem pelo loop.</p>
<pre class="brush: js notranslate">for (var i = 0; i < 9; i++) {
console.log(i);
// more statements
}
</pre>
<h3 id="Expressões_for_opcionais">Expressões <code>for</code> opcionais</h3>
<p>Todas as três expressões na condição do loop <code>for</code> são opcionais.</p>
<p>Por exemplo, no bloco de <em>inicialização</em>, não é necessário inicializar variáveis:</p>
<pre class="brush: js notranslate">var i = 0;
for (; i < 9; i++) {
console.log(i);
// more statements
}
</pre>
<p>Assim como ocorre no bloco de <em>inicialização</em>, a <em>condição</em> também é opcional. Se você está omitindo essa expressão, você deve certificar-se de quebrar o loop no corpo para não criar um loop infinito.</p>
<pre class="brush: js notranslate">for (var i = 0;; i++) {
console.log(i);
if (i > 3) break;
// more statements
}</pre>
<p>Você também pode omitir todos os três blocos. Novamente, certifique-se de usar uma instrução <code>break</code> no final do loop e também modificar (incrementar) uma variável, para que a condição do <code>break</code> seja verdadeira em algum momento.</p>
<pre class="brush: js notranslate">var i = 0;
for (;;) {
if (i > 3) break;
console.log(i);
i++;
}
</pre>
<h3 id="Usando_for_sem_uma_declaração">Usando <code>for</code> sem uma declaração </h3>
<p>O ciclo <code>for</code> a seguir calcula a posição de deslocamento de um nó na seção [expressão final] e, portanto, não requer o uso de uma declaração ou de um bloco de declaração, e no seu lugar é usado um ponto-vírgula - <code>;</code>.</p>
<pre class="brush: js notranslate">function showOffsetPos (sId) {
var nLeft = 0, nTop = 0;
for (var oItNode = document.getElementById(sId); // inicialização
oItNode; // condition
nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // expressão final
/* empty statement */ ;
console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
}
// Exemplo de call:
showOffsetPos("content");
// Resultado:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"</pre>
<div class="note"><strong>Nota:</strong> Nesse caso, quando você não usa a seção de declaração, <strong>o</strong><strong> ponto-e-vírgula é colocada imediatamente após a declaração do ciclo</strong>.</div>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>ECMAScript 1st Edition.</td>
<td>Padrão</td>
<td>
<p>Definição inicial.</p>
</td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_em_Browsers">Compatibilidade em Browsers</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome para Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{jsxref("Statements/break", "break")}}</li>
<li>{{jsxref("Statements/continue", "continue")}}</li>
<li>{{jsxref("Statements/empty", "empty")}}</li>
<li>{{jsxref("Statements/while", "while")}}</li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li>
<li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li>
</ul>
|
