if...else if...else 语句会在指定的条件为 真 时执行一个语句。如果条件为 假 ,则会执行可选的 else 子句中的另一个语句。 尝试一下 </div></section><section aria-labelledby="语法"><h2 id="语法"><a href="#语法">语法</a></h2><div class="section-content"><div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="DIIRXAg3dLJvhfUotQKieU6GItByoDVv9vVoLBrJH+w="><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> statement1 <span class="token comment">// 带有 else 子句</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> statement1 statement2 <dt id="condition"><a href="#condition"><code>condition</code></a></dt> <p>值为<a href="/zh-CN/docs/Glossary/Truthy">真</a>或<a href="/zh-CN/docs/Glossary/Falsy">假</a>的<a href="/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_operators#%E8%A1%A8%E8%BE%BE%E5%BC%8F">表达式</a></p> <dt id="statement1"><a href="#statement1"><code>statement1</code></a></dt> <p>当<em>条件</em>为<a href="/zh-CN/docs/Glossary/Truthy">真</a>时执行的语句。可为任意语句,包括嵌套了 <code>if</code> 的语句。要执行多条语句,使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/block">块</a>语句(<code>{ /* ... */ }</code>)将这些语句分组;若不想执行语句,则使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty">空</a>语句。</p> <dt id="statement2"><a href="#statement2"><code>statement2</code></a></dt> <p>如果 <code>condition</code> 为<a href="/zh-CN/docs/Glossary/Falsy">假</a>且 <code>else</code> 从句存在时执行的语句。可为任意语句,包括块语句和嵌套的 <code>if</code> 语句。</p> </dl></div></section><section aria-labelledby="描述"><h2 id="描述"><a href="#描述">描述</a></h2><div class="section-content"><p>可以嵌套多个 <code>if...else</code> 语句以创建 <code>else if</code> 子句。请注意,JavaScript 中没有 <code>elseif</code>(单个词)关键字。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="pnVmTIR9+SZB4m4Bd8MCKkrVFux/CWrZUQSBiNFxydI="><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition1<span class="token punctuation">)</span> statement1 <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>condition2<span class="token punctuation">)</span> statement2 <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>condition3<span class="token punctuation">)</span> statement3 statementN <p>要看看它如何工作,可以调整下嵌套的缩进:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="dohtRENk9PktYten6T8c66DEDewLn7ysEDcEw3sYE6o="><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition1<span class="token punctuation">)</span> statement1 <span class="token keyword">if</span> <span class="token punctuation">(</span>condition2<span class="token punctuation">)</span> statement2 <span class="token keyword">if</span> <span class="token punctuation">(</span>condition3<span class="token punctuation">)</span> statement3 <p>要在一个子句中执行多条语句,可使用块语句(<code>{ /* ... */ }</code>)来组织这些语句。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="FGV36Zi2QIXdhpH4gCtboteWeIoTRqfH8meGGo7UUKg="><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span> statements1 <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> statements2 <p>不使用块可能会导致令人困惑的行为,尤其是在代码是手动格式化的情况下。例如:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate" data-signature="crf3xxgVjgVDDIj3lj9yeW9Zfk+DSu7gsNBP08zgock="><code><span class="token keyword">function</span> <span class="token function">checkValue</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>b <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a 是 1 并且 b 是 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a 不是 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <p>这段代码看上去没什么问题,但是,执行 <code>checkValue(1, 3)</code> 会输出“a 不是 1”。这是因为在<a href="https://en.wikipedia.org/wiki/Dangling_else" class="external" target="_blank">悬空 else</a> 的情况下,<code>else</code> 子句会连接到最近的 <code>if</code> 子句。因此,上述代码在缩进适当的情况下看起来会是这样的:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="Vhj1JedJjsBpjwv0VDhBqEGdZ4XqXB3OukLqEgr8B8g="><code><span class="token keyword">function</span> <span class="token function">checkValue</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>b <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a 是 1 并且 b 是 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a 不是 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <p>通常情况下,始终使用块语句是种很好的做法,特别是在涉及嵌套 <code>if</code> 语句的代码中。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-good notranslate" data-signature="U9MNsEzfXlnJin/h4K2k4BwovBrN0DCXF+UxVfdPvSw="><code><span class="token keyword">function</span> <span class="token function">checkValue</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>b <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a 是 1 并且 b 是 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a 不是 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <p>不要将原始的布尔值 <code>true</code> 和 <code>false</code> 与 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> 对象的真或假混淆。任何不是 <code>false</code>、<code>undefined</code>、<code>null</code>、<code>0</code>、<code>-0</code>、<code>NaN</code> 或空字符串(<code>""</code>)的值,以及任何对象(包括值为 <code>false</code> 的布尔对象),在用作条件时都被视为<a href="/zh-CN/docs/Glossary/Truthy">真</a>。例如:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="HbbGFKKSC1UlyIyEeL4vhM4of/H6+o4dPZwFC37VUoE="><code><span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Boolean</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"b 为真"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// “b 为真”</span> </code></pre></div></div></section><section aria-labelledby="示例"><h2 id="示例"><a href="#示例">示例</a></h2><div class="section-content"/></section><section aria-labelledby="使用_if...else"><h3 id="使用_if...else"><a href="#使用_if...else">使用 if...else</a></h3><div class="section-content"><div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="vdrCoZVuOmVIF/RbbY0yVCGabuYA4/RmwlPnV6hQ60A="><code><span class="token keyword">if</span> <span class="token punctuation">(</span>cipherChar <span class="token operator">===</span> fromChar<span class="token punctuation">)</span> <span class="token punctuation">{</span> result <span class="token operator">+=</span> toChar<span class="token punctuation">;</span> x<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> result <span class="token operator">+=</span> clearChar<span class="token punctuation">;</span> </code></pre></div></div></section><section aria-labelledby="使用_else_if"><h3 id="使用_else_if"><a href="#使用_else_if">使用 else if</a></h3><div class="section-content"><p>请注意,JavaScript 中没有 <code>elseif</code> 关键字。但是,你可以在 <code>else</code> 和 <code>if</code> 之间加上一个空格:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate" data-signature="HEAOHEu+0E1BlAi1fW8Lyv/d5f1dPNxHuQXUsjuix6c="><code><span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">></span> <span class="token number">50</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* 做一些事情 */</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* 做一些事情 */</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">/* 做一些事情 */</span> </code></pre></div></div></section><section aria-labelledby="使用赋值作为条件"><h3 id="使用赋值作为条件"><a href="#使用赋值作为条件">使用赋值作为条件</a></h3><div class="section-content"><p>你几乎不应该在 <code>if...else</code> 语句中使用像 <code>x = y</code> 这样的赋值作为条件:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate" data-signature="4nJxus9ptQtId3yYXlUxMfnXQ9CQxHroxwlZptQ7WmY="><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>x <span class="token operator">=</span> y<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <p>因为与 <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a> 循环不同,条件只会被求值一次,所以赋值操作只会被执行一次。上述代码等价于:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-good notranslate" data-signature="VFLqHkPmVWCCEtLtHrxHwsrmN3oojOMv+8QY+KnOEhY="><code>x <span class="token operator">=</span> y<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token punctuation">{</span>