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

181 lines
13 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> </div>
</div>
<p><span style="line-height: 19.0909080505371px;">当指定条件为真,</span><strong>if 语句</strong>会执行一段语句。如果条件为假,则执行另一段语句。</p>
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/statement-ifelse.html" width="100%"></iframe></p>
<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre><code class="language-javascript">if (<em>condition</em>)
<em>statement1</em>
[else
<em>statement2</em>]
</code></pre>
<dl>
<dt><code>condition</code></dt>
<dd>值为真或假的<a href="Guide/Expressions_and_Operators#Expressions">表达式</a></dd>
</dl>
<dl>
<dt><code>statement1</code></dt>
<dd><code>condition</code>为真时执行的语句。可为任意语句,包括更深层的内部<code>if</code>语句。要执行多条语句,使用<a href="Reference/Statements/block" title="en/JavaScript/Reference/Statements/block"></a>语句({ ... })将这些语句分组;若不想执行语句,则使用<a href="Reference/Statements/Empty"></a>语句。 </dd>
</dl>
<dl>
<dt><code>statement2</code></dt>
<dd>如果<code>condition</code>为假且 <code>else</code>从句存在时执行的语句。<span style="line-height: 19.0909080505371px;">可为任意语句,包括块语句和</span>嵌套的<code>if</code>语句<span style="line-height: 19.0909080505371px;"></span></dd>
</dl>
<h2 id="Description" name="Description">说明</h2>
<p>多层 <code>if...else</code> 语句可使用 <code>else if</code> 从句。注意:在 Javascript 中没有 <code>elseif</code> (一个单词)关键字。</p>
<pre class="eval">if (<em>condition1</em>)
<em>statement1</em>
else if (<em>condition2</em>)
<em>statement2</em>
else if (<em>condition3</em>)
<em>statement3</em>
...
else
<em>statementN</em>
</code></pre>
<p>要看看它如何工作,可以调整下嵌套的缩进:</p>
<pre class="eval">if (<em>condition1</em>)
<em>statement1</em>
else
if (<em>condition2</em>)
<em>statement2</em>
else
if (<em>condition3</em>)
...
</code></pre>
<p>要在一个从句中执行多条语句,可使用语句块(<code>{ ... }</code>)。通常情况下,一直使用语句块是个好习惯,特别是在涉及嵌套<code>if</code>语句的代码中:</p>
<pre class="eval">if (<em>condition</em>) {
<em>statements1</em>
} else {
<em>statements2</em>
}
</code></pre>
<p>不要将原始布尔值的<code>true</code><code>false</code><a href="Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>对象的真或假混淆。任何一个值,只要它不是 <code>undefined</code><font face="Open Sans, Arial, sans-serif"></font><code>null</code>、 <code>0</code><font face="Open Sans, Arial, sans-serif"></font><code>NaN</code>或空字符串(<code>""</code>那么无论是任何对象即使是值为假的Boolean对象在条件语句中都为真。例如</p>
<pre><code class="language-javascript">var b = new Boolean(false);
if (b) //表达式的值为true
</code></pre>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">使用 <code>if...else</code></h3>
<pre><code class="language-javascript">if (cipher_char === from_char) {
result = result + to_char;
x++;
} else {
result = result + clear_char;
}
</code></pre>
<h3 id="使用_else_if">使用 <code>else if</code></h3>
<p>注意Javascript中没有<code>elseif</code>语句。但可以使用<code>else</code><code>if</code>中间有空格的语句:</p>
<pre><code class="language-javascript">if (x &gt; 5) {
/* do the right thing */
} else if (x &gt; 50) {
/* do the right thing */
} else {
/* do the right thing */
}</code></pre>
<h3 id="Example:_Assignment_within_the_conditional_expression" name="Example:_Assignment_within_the_conditional_expression">条件表达式中的赋值运算</h3>
<p>建议不要在条件表达式中单纯的使用赋值运算,因为粗看下赋值运算的代码很容易让人误认为是等性比较。比如,不要使用下面示例的代码:</p>
<pre><code class="language-js example-bad">if (x = y) {
/* do the right thing */
}
</code></pre>
<p>如果你需要在条件表达式中使用赋值运算,用圆括号包裹赋值运算。例如:</p>
<pre><code class="language-js example-good">if ((x = y)) {
/* do the right thing */
}
</code></pre>
<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-if-statement" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">if 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-if-statement" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">if 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.5" hreflang="en" lang="en" rel="noopener">ECMAScript 5.1 (ECMA-262)<br/><small lang="zh-CN">if 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.5" hreflang="en" lang="en" rel="noopener">ECMAScript 3rd Edition (ECMA-262)<br/><small lang="zh-CN">if 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.5" hreflang="en" lang="en" rel="noopener">ECMAScript 1st Edition (ECMA-262)<br/><small lang="zh-CN">if 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>if...else</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="See_also" name="See_also">相关链接</h2>
<ul>
<li><a href="Reference/Statements/block" title="块语句或其他语言的复合语句用于组合零个或多个语句。该块由一对大括号界定可以是labelled"><code>block</code></a></li>
<li><a href="Reference/Statements/switch" title="switch 语句评估一个表达式将表达式的值与case子句匹配并执行与该情况相关联的语句。"><code>switch</code></a></li>
<li><a href="Reference/Operators/conditional_operator" title="条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。本运算符经常作为if语句的简短形式来使用。"><code>条件运算符</code></a></li>
</ul>
</article>