2019-04-21 11:50:48 +08:00

175 lines
16 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article id="wikiArticle">
<div></div>
<p><strong><code>for 语句</code></strong>用于创建一个循环,它包含了三个可选的表达式,三个可选的表达式包围在圆括号中并由分号分隔, <span class="short_text" id="result_box" lang="zh-CN"><span>后跟一个在循环中执行的语句(通常是一个<a href="Reference/Statements/block">块语句</a>)。</span></span></p>
<h2 id="语法">语法</h2>
<pre><code class="language-javascript">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
<em>statement</em>
</code></pre>
<dl>
<dt><code>initialization</code></dt>
<dd>一个表达式 (包含赋值语句) 或者变量声明。典型地被用于初始化一个计数器。该表达式可以使用<code>var</code>关键字声明新的变量。初始化中的变量不是该循环的局部变量,而是与<code>for</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就会被执行的语句。 要在循环体内执行多条语句使用一个<span class="short_text" id="result_box" lang="zh-CN"><span><a href="Reference/Statements/block">块语句</a></span></span><code>{ ... }</code>)来包含要执行的语句。没有任何语句要执行,使用一个<a href="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><code class="language-javascript">for (var i = 0; i &lt; 9; i++) {
console.log(i);
// more statements
}
</code></pre>
<h3 id="可选的for表达式">可选的<code>for</code>表达式</h3>
<p><code>for</code>语句的所有的表达式都是可选的</p>
<p>例如,<span class="short_text" id="result_box" lang="zh-CN"><span>初始化块</span></span>中的表达式没有被指定:</p>
<pre><code class="language-javascript">var i = 0;
for (; i &lt; 9; i++) {
console.log(i);
// more statements
}
</code></pre>
<p><span class="short_text" id="result_box" lang="zh-CN"><span>像初始化块一样,条件块也是可选的。如果省略此表达式,则必须确保在循环</span></span><span class="short_text" lang="zh-CN"><span>体内跳出,以防创建死循环。</span></span></p>
<pre><code class="language-javascript">for (var i = 0;; i++) {
console.log(i);
if (i &gt; 3) break;
// more statements
}</code></pre>
<p>你当然可以忽略所有的表达式。同样的,确保使用了<code><a href="Reference/Statements/break">break</a></code>语句来跳出循环<span class="short_text" id="result_box" lang="zh-CN"><span>并且还要修改增加一个变量使得break 语句的条件在某个时候是真的。</span></span></p>
<pre><code class="language-javascript">var i = 0;
for (;;) {
if (i &gt; 3) break;
console.log(i);
i++;
}
</code></pre>
<h3 id="使用无语句的for">使用无语句的<code>for</code></h3>
<p>以下 <code>for</code> 循环<span id="result_box" lang="zh-CN"><span>计算 [final-expression] 部分中节点的偏移位置</span></span> ,它不需要执行一个 <code>statement</code> 或者一组 <code><a href="Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> statement</code> ,因此使用了空语句。</p>
<pre><code class="language-javascript"><code class="language-js"><span class="keyword token">function</span> <span class="function token">showOffsetPos</span><span class="punctuation token">(</span>sId<span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">var</span> nLeft <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> nTop <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
<span class="keyword token">for</span> <span class="punctuation token">(</span>
<span class="keyword token">var</span> oItNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span>sId<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">/* initialization */</span>
oItNode<span class="punctuation token">;</span> <span class="comment token">/* condition */</span>
nLeft <span class="operator token">+</span><span class="operator token">=</span> oItNode<span class="punctuation token">.</span>offsetLeft<span class="punctuation token">,</span> nTop <span class="operator token">+</span><span class="operator token">=</span> oItNode<span class="punctuation token">.</span>offsetTop<span class="punctuation token">,</span> oItNode <span class="operator token">=</span> oItNode<span class="punctuation token">.</span>offsetParent <span class="comment token">/* final-expression */</span>
<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">/* semicolon */</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Offset position of \''</span> <span class="operator token">+</span> sId <span class="operator token">+</span> <span class="string token">'\' element:\n left: '</span> <span class="operator token">+</span> nLeft <span class="operator token">+</span> <span class="string token">'px;\n top: '</span> <span class="operator token">+</span> nTop <span class="operator token">+</span> <span class="string token">'px;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="comment token">/* Example call: */</span>
<span class="function token">showOffsetPos</span><span class="punctuation token">(</span><span class="string token">'content'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">// Output:</span>
<span class="comment token">// "Offset position of "content" element:</span>
<span class="comment token">// left: 0px;</span>
<span class="comment token">// top: 153px;"</span></code></code></pre>
<div class="note">
<p><strong>提示:</strong>这是JavaScript中的少数几种情况其中<strong>分号是强制性的</strong>。实际上,没有分号,循环声明之后的行将被视为语句。</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><a class="external" href="https://tc39.github.io/ecma262/#sec-for-statement" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">for statement</small></a></td>
<td><span class="spec-Draft">Draft</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-for-statement" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">for statement</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/5.1/#sec-12.6.3" hreflang="en" lang="en" rel="noopener">ECMAScript 5.1 (ECMA-262)<br/><small lang="zh-CN">for statement</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf#sec-12.6.3" hreflang="en" lang="en" rel="noopener">ECMAScript 3rd Edition (ECMA-262)<br/><small lang="zh-CN">for statement</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf#sec-12.6.2" hreflang="en" lang="en" rel="noopener">ECMAScript 1st Edition (ECMA-262)<br/><small lang="zh-CN">for statement</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>for</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
1</td><td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
4</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
<span>Full support</span>
 
</abbr></span></dt><dd>Full support</dd></dl></section></div><p></p>
<h2 id="另请参阅">另请参阅</h2>
<ul>
<li><a href="Reference/Statements/break" title="break 语句中止当前循环switch语句或label 语句,并把程序控制流转到紧接着被中止语句后面的语句。"><code>break</code></a></li>
<li><a href="Reference/Statements/continue" title="continue 语句结束当前(或标签)的循环语句的本次迭代,并继续执行循环的下一次迭代。"><code>continue</code></a></li>
<li><a href="Reference/Statements/empty" title="空语句用来表明没有语句,尽管 JavaScript 语法希望有语句。"><code>empty</code></a></li>
<li><a href="Reference/Statements/while" title="while 语句可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环。"><code>while</code></a></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><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></li>
</ul>
</article>