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
|
---
title: for
slug: Web/JavaScript/Reference/Extratos_e_declarações/for
tags:
- Declaração
- Funcionalidade de Linguagem
- JavaScript
- Loop
- Referencia
- Repetição
- for
translation_of: Web/JavaScript/Reference/Statements/for
---
<div>{{jsSidebar("Statements")}}</div>
<p>A <strong>declaração "for"</strong> cria uma repetição (<em>loop</em>) que consiste de três expressões opcionais, entre parênteses e separados por ponto e vírgula, seguido de uma declaração (normalmente <a href="/pt-PT/docs/Web/JavaScript/Reference/Extratos_e_declarações/bloco">bdeclaraçãod e bloco (<em>block</em>)</a>) para ser executada na repetição.</p>
<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
<em>statement</em></pre>
<dl>
<dt><code>initialization</code></dt>
<dd>An expression (including assignment expressions) or variable declaration evaluated once before the loop begins. Typically used to initialize a counter variable. This expression may optionally declare new variables with <code>var</code> or <code>let</code> keywords. Variables declared with <code>var</code> are not local to the loop, i.e. they are in the same scope the <code>for</code> loop is in. Variables declared with let are local to the statement.</dd>
<dd>The result of this expression is discarded.</dd>
<dt><code>condition</code></dt>
<dd>An expression to be evaluated before each loop iteration. If this expression evaluates to true, <code>statement</code> is executed. This conditional test is optional. If omitted, the condition always evaluates to true. If the expression evaluates to false, execution skips to the first expression following the <code>for</code> construct.</dd>
<dt><code>final-expression</code></dt>
<dd>An expression to be evaluated at the end of each loop iteration. This occurs before the next evaluation of <code>condition</code>. Generally used to update or increment the counter variable.</dd>
<dt><code>statement</code></dt>
<dd>A statement that is executed as long as the condition evaluates to true. To execute multiple statements within the loop, use a {{jsxref("Statements/block", "block", "", 0)}} statement (<code>{ ... }</code>) to group those statements. To execute no statement within the loop, use an {{jsxref("Statements/empty", "empty", "", 0)}} statement (<code>;</code>).</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Using_for">Using <code>for</code></h3>
<p>The following <code>for</code> statement starts by declaring the variable <code>i</code> and initializing it to <code>0</code>. It checks that <code>i</code> is less than nine, performs the two succeeding statements, and increments <code>i</code> by 1 after each pass through the loop.</p>
<pre class="brush: js">for (let i = 0; i < 9; i++) {
console.log(i);
// more statements
}
</pre>
<h3 id="Optional_for_expressions">Optional <code>for</code> expressions</h3>
<p>All three expressions in the head of the <code>for</code> loop are optional.</p>
<p>For example, in the <em>initialization</em> block it is not required to initialize variables:</p>
<pre class="brush: js">var i = 0;
for (; i < 9; i++) {
console.log(i);
// more statements
}
</pre>
<p>Like the <em>initialization</em> block, the <em>condition</em> block is also optional. If you are omitting this expression, you must make sure to break the loop in the body in order to not create an infinite loop.</p>
<pre class="brush: js">for (let i = 0;; i++) {
console.log(i);
if (i > 3) break;
// more statements
}</pre>
<p>You can also omit all three blocks. Again, make sure to use a {{jsxref("Statements/break", "break")}} statement to end the loop and also modify (increase) a variable, so that the condition for the break statement is true at some point.</p>
<pre class="brush: js">var i = 0;
for (;;) {
if (i > 3) break;
console.log(i);
i++;
}
</pre>
<h3 id="Using_for_without_a_statement">Using <code>for</code> without a statement</h3>
<p>The following <code>for</code> cycle calculates the offset position of a node in the <em>final-expression</em> section, and therefore it does not require the use of a <code>statement</code> section, a semicolon is used instead.</p>
<pre class="brush: js">function showOffsetPos(sId) {
var nLeft = 0, nTop = 0;
for (
var oItNode = document.getElementById(sId); /* initialization */
oItNode; /* condition */
nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */
); /* semicolon */
console.log('Offset position of \'' + sId + '\' element:\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');
}
/* Example call: */
showOffsetPos('content');
// Output:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"</pre>
<div class="note"><strong>Note:</strong> This is one of the few cases in JavaScript where <strong>the semicolon is mandatory</strong>. Indeed, without the semicolon the line that follows the cycle declaration will be considered a statement.</div>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
<p>{{Compat("javascript.statements.for")}}</p>
<h2 id="Consulte_também">Consulte também</h2>
<ul>
<li>{{jsxref("Statements/empty", "empty statement", "", 0)}}</li>
<li>{{jsxref("Statements/break", "break")}}</li>
<li>{{jsxref("Statements/continue", "continue")}}</li>
<li>{{jsxref("Statements/while", "while")}}</li>
<li>{{jsxref("Statements/do...while", "do...while")}}</li>
<li>{{jsxref("Statements/for...in", "for...in")}}</li>
<li>{{jsxref("Statements/for...of", "for...of")}}</li>
</ul>
|
