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
|
---
title: for
slug: Web/JavaScript/Reference/Statements/for
tags:
- JavaScript
- Loop
- Reference
- Statement
- for
translation_of: Web/JavaScript/Reference/Statements/for
---
<div>{{jsSidebar("Statements")}}</div>
<p><strong><code>for</code> 语句</strong>用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/block">块语句</a>）。</p>
<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
<h2 id="语法">语法</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>一个表达式 (包含赋值语句) 或者变量声明。典型地被用于初始化一个计数器。该表达式可以使用 <code>var</code> 或 <code>let</code> 关键字声明新的变量，使用 <code>var</code> 声明的变量不是该循环的局部变量，而是与 <code>for</code> 循环处在同样的作用域中。用 <code>let</code> 声明的变量是语句的局部变量。该表达式的结果无意义。</dd>
<dt><code>condition</code></dt>
<dd>一个条件表达式被用于确定每一次循环是否能被执行。如果该表达式的结果为 true，<code>statement</code> 将被执行。这个表达式是可选的。如果被忽略，那么就被认为永远为真。如果计算结果为假，那么执行流程将被跳到 <code>for</code> 语句结构后面的第一条语句。</dd>
<dt><code>final-expression</code></dt>
<dd>每次循环的最后都要执行的表达式。执行时机是在下一次 <code>condition</code> 的计算之前。通常被用于更新或者递增计数器变量。</dd>
<dt><code>statement</code></dt>
<dd>只要<code>condition</code>的结果为true就会被执行的语句。要在循环体内执行多条语句，使用一个<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/block">块语句</a>（<code>{ ... }</code>）来包含要执行的语句。没有任何语句要执行，使用一个<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty">空语句</a>（<code>;</code>）。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="使用_for">使用 <code>for</code></h3>
<p>以下例子声明了变量 <code>i</code> 并被初始赋值为 <code>0</code>，<code>for</code> 语句检查 <code>i</code> 的值是否小于 9，如果小于 9，则执行语句块内的语句，并且最后将 <code>i</code> 的值增加 1。</p>
<pre class="brush: js">for (var i = 0; i < 9; i++) {
console.log(i);
// more statements
}
</pre>
<h3 id="可选的_for_表达式">可选的 <code>for</code> 表达式</h3>
<p><code>for</code> 语句头部圆括号中的所有三个表达式都是可选的。</p>
<p>例如，初始化块中的表达式没有被指定：</p>
<pre class="brush: js">var i = 0;
for (; i < 9; i++) {
console.log(i);
// more statements
}
</pre>
<p>像初始化块一样，条件块也是可选的。如果省略此表达式，则必须确保在循环体内跳出，以防创建死循环。</p>
<pre class="brush: js">for (var i = 0;; i++) {
console.log(i);
if (i > 3) break;
// more statements
}</pre>
<p>你当然可以忽略所有的表达式。同样的，确保使用了 {{jsxref("Statements/break", "break")}} >语句来跳出循环并且还要修改（增加）一个变量，使得 break 语句的条件在某个时候是真的。</p>
<pre class="brush: js">var i = 0;
for (;;) {
if (i > 3) break;
console.log(i);
i++;
}
</pre>
<h3 id="使用无语句的_for">使用无语句的 <code>for</code></h3>
<p>以下 <code>for</code> 循环计算 <em>final-expression</em> 部分中节点的偏移位置，它不需要执行一个 <code>statement</code> 或者一组 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/block">block</a> statement</code> ，因此使用了空语句。</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">
<p><strong>提示：</strong><strong>这里的分号是强制性的</strong>，是 JavaScript 中的少数几种强制分号的情况。如果没有分号，循环声明之后的行将被视为循环语句。</p>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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', 'for statement')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></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('ES3', '#sec-12.6.3', 'for statement')}}</td>
<td>{{Spec2('ES3')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("javascript.statements.for")}}</p>
<h2 id="另请参阅">另请参阅</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>
|
