mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-11 00:54:06 +08:00
280 lines
16 KiB
HTML
280 lines
16 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<p><strong><code>switch</code> 语句</strong>评估一个<a href="Guide/Expressions_and_Operators">表达式</a>,将表达式的值与<code>case</code>子句匹配,并执行与该情况相关联的<a href="Reference/Statements">语句</a>。</p>
|
||
<h2 id="语法">语法</h2>
|
||
<pre><code class="language-javascript">switch (expression) {
|
||
case value1:
|
||
// 当 expression 的结果与 value1 匹配时,执行此处语句
|
||
[break;]
|
||
case value2:
|
||
// 当 expression 的结果与 value2 匹配时,执行此处语句
|
||
[break;]
|
||
...
|
||
case valueN:
|
||
// 当 expression 的结果与 valueN 匹配时,执行此处语句
|
||
[break;]
|
||
[default:
|
||
// 如果 expression 与上面的 value 值都不匹配时,执行此处语句
|
||
[break;]]
|
||
}</code></pre>
|
||
<dl>
|
||
<dt><code>expression</code></dt>
|
||
<dd>一个用来与 case 子语句匹配的表达式。</dd>
|
||
<dt><code>case valueN</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||
<dd>用于匹配 <code>expression</code> 的 <code>case</code> 子句。如果 <code>expression</code> 与给定的 <code>valueN</code> 相匹配,则执行该 case 子句中的语句直到该 <code>switch</code> 语句结束或遇到一个 <code>break</code> 。</dd>
|
||
<dt><code>default</code> <span class="inlineIndicator optional optionalInline">可选</span></dt>
|
||
<dd>一个 <code>default</code> 子句;如果给定,这条子句会在 <code>expression</code> 的值与任一 <code>case</code> 语句均不匹配时执行。</dd>
|
||
</dl>
|
||
<h2 id="描述">描述</h2>
|
||
<p>一个 switch 语句首先会计算其 expression 。然后,它将从第一个 case 子句开始直到寻找到一个其表达式值与所输入的 expression 的值所相等的子句(使用 <a href="Reference/Operators/Comparison_Operators">严格运算符</a>,<code>===</code>)并将控制权转给该子句,执行相关语句。(如果多个 case 与提供的值匹配,则选择匹配的第一个 case,即使这些 case 彼此间并不相等。)如果没有 <code>case</code> 子句相匹配,程序则会寻找那个可选的 default 子句,如果找到了,将控制权交给它,执行相关语句。若没有 <code>default</code> 子句,程序将继续执行直到 <code>switch</code> 结束。按照惯例,<code>default</code> 子句是最后一个子句,不过也不需要这样做。</p>
|
||
<p>可选的 <code><a href="Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> 语句确保程序立即从相关的 case 子句中跳出 switch 并接着执行 switch 之后的语句。若 <code>break</code> 被省略,程序会继续执行 <code>switch</code> 语句中的下一条语句。</p>
|
||
<h2 id="示例">示例</h2>
|
||
<h3 id="使用_switch">使用 <code>switch</code></h3>
|
||
<p>下面的例子中,如果 <code>expr</code> 计算为 "Bananas",程序就会匹配值为 "Bananas" 的 case 然后执行相关语句。当遇到 <code>break</code> 时,程序就跳出 <code>switch</code> 然后执行 <code>switch</code> 后的语句。若 <code>break</code> 被省略,值为 "Cherries" 的 case 中的语句就也将被执行。</p>
|
||
<pre><code class="language-javascript">switch (expr) {
|
||
case 'Oranges':
|
||
console.log('Oranges are $0.59 a pound.');
|
||
break;
|
||
case 'Apples':
|
||
console.log('Apples are $0.32 a pound.');
|
||
break;
|
||
case 'Bananas':
|
||
console.log('Bananas are $0.48 a pound.');
|
||
break;
|
||
case 'Cherries':
|
||
console.log('Cherries are $3.00 a pound.');
|
||
break;
|
||
case 'Mangoes':
|
||
case 'Papayas':
|
||
console.log('Mangoes and papayas are $2.79 a pound.');
|
||
break;
|
||
default:
|
||
console.log('Sorry, we are out of ' + expr + '.');
|
||
}
|
||
|
||
console.log("Is there anything else you'd like?");
|
||
</code></pre>
|
||
<h3 id="如果忘记_break_会怎么样?">如果忘记 break 会怎么样?</h3>
|
||
<p>如果你忘记添加break,那么代码将会从值所匹配的 case 语句开始运行,然后持续执行下一个 case 语句而不论值是否匹配。实例如下:</p>
|
||
<pre><code class="language-javascript">var foo = 0;
|
||
switch (foo) {
|
||
case -1:
|
||
console.log('negative 1');
|
||
break;
|
||
case 0: // foo 的值为 0 所以匹配这里所以这一块会运行
|
||
console.log(0);
|
||
// 注意:那个没写的 break 原本在这儿
|
||
case 1: // 'case 0:' 里没有 break 语句所以这个 case 也会运行
|
||
console.log(1);
|
||
break; // 遇到了这个 break 所以不会再继续进入 'case 2:' 了
|
||
case 2:
|
||
console.log(2);
|
||
break;
|
||
default:
|
||
console.log('default');
|
||
}</code></pre>
|
||
<h3 id="我能把_default_放到_case_之间吗?">我能把 default 放到 case 之间吗?</h3>
|
||
<p>可以啊!JavaScript 会在它找不到匹配项时跳回到那个 default :</p>
|
||
<pre><code class="language-javascript">var foo = 5;
|
||
switch (foo) {
|
||
case 2:
|
||
console.log(2);
|
||
break; // 遇到这个 break 所以不会继续进入 'default:'
|
||
default:
|
||
console.log('default')
|
||
// 掉到下面
|
||
case 1:
|
||
console.log('1');
|
||
}
|
||
</code></pre>
|
||
<p>即使你把 default 放到其它 case 之上它仍会工作。</p>
|
||
<h3 id="用_Switch_重写多个_If_语句">用 Switch 重写多个 If 语句</h3>
|
||
<p>如下所示。</p>
|
||
<pre><code class="language-javascript">var a = 100;
|
||
var b = NaN;
|
||
switch (true) {
|
||
case isNaN(a) || isNaN(b):
|
||
console.log('NaNNaN');
|
||
break;
|
||
case a === b:
|
||
console.log(0);
|
||
break;
|
||
case a < b:
|
||
console.log(-1);
|
||
break;
|
||
default:
|
||
console.log(1);
|
||
}
|
||
</code></pre>
|
||
<h3 id="使用多准则_case_的方法">使用多准则 case 的方法</h3>
|
||
<p>这个技术来源于此:</p>
|
||
<p><a class="external" href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript" rel="noopener">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>
|
||
<h4 id="多_case_-_单一操作">多 case - 单一操作</h4>
|
||
<p>这种方法利用这样一个事实:如果 case 语句之下没有 break ,它将继续执行下一个 case 语句,而不管 case 是否符合条件。 请看“如果忘记 break 会怎么样?”部分。</p>
|
||
<p>这是一个单操作顺序的 switch 语句,其中四个不同值的执行结果完全一样。</p>
|
||
<pre><code class="language-javascript">var Animal = 'Giraffe';
|
||
switch (Animal) {
|
||
case 'Cow':
|
||
case 'Giraffe':
|
||
case 'Dog':
|
||
case 'Pig':
|
||
console.log('This animal will go on Noah\'s Ark.');
|
||
break;
|
||
case 'Dinosaur':
|
||
default:
|
||
console.log('This animal will not.');
|
||
}</code></pre>
|
||
<h4 id="多_case_-_关联操作">多 case - 关联操作</h4>
|
||
<p>这是一个关联操作顺序的 switch 语句,其中,根据所输入的整数,你会得到不同的输出。这表示它将以你放置 case 语句的顺序遍历,并且不必是数字顺序的。在 JavaScript 中,你甚至可以将字符串定义到这些 case 语句里。</p>
|
||
<pre><code class="language-javascript">var foo = 1;
|
||
var output = 'Output: ';
|
||
switch (foo) {
|
||
case 10:
|
||
output += 'So ';
|
||
case 1:
|
||
output += 'What ';
|
||
output += 'Is ';
|
||
case 2:
|
||
output += 'Your ';
|
||
case 3:
|
||
output += 'Name';
|
||
case 4:
|
||
output += '?';
|
||
console.log(output);
|
||
break;
|
||
case 5:
|
||
output += '!';
|
||
console.log(output);
|
||
break;
|
||
default:
|
||
console.log('Please pick a number from 0 to 6!');
|
||
}</code></pre>
|
||
<p>这个例子的输出:</p>
|
||
<table class="standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="col">Value</th>
|
||
<th scope="col">Log text</th>
|
||
</tr>
|
||
<tr>
|
||
<td>foo is NaN or not 1, 2, 3, 4, 5 or 10</td>
|
||
<td>Please pick a number from 0 to 6!</td>
|
||
</tr>
|
||
<tr>
|
||
<td>10</td>
|
||
<td>Output: So What Is Your Name?</td>
|
||
</tr>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Output: What Is Your Name?</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Output: Your Name?</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Output: Name?</td>
|
||
</tr>
|
||
<tr>
|
||
<td>4</td>
|
||
<td>Output: ?</td>
|
||
</tr>
|
||
<tr>
|
||
<td>5</td>
|
||
<td>Output: !</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3 id="在case表达式中进行一些运算:">在<code class="language-js"><span class="keyword token">case表达式中进行一些运算:</span></code></h3>
|
||
<pre><code class="language-javascript">var i = 3;
|
||
switch (<strong>i</strong>) {
|
||
case ( (<u>i>=0 && i<=5</u>) ? <strong>i</strong> : -1 ):
|
||
console.log('0 ~5');
|
||
break;
|
||
case 6: console.log('6');
|
||
}</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://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf" hreflang="en" lang="en" rel="noopener" title="ECMAScript 3rd Edition (ECMA-262)">ECMAScript 3rd Edition (ECMA-262)</a></td>
|
||
<td><span class="spec-Standard">Standard</span></td>
|
||
<td>Initial definition. Implemented in JavaScript 1.2</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://www.ecma-international.org/ecma-262/5.1/#sec-12.11" hreflang="en" lang="en" rel="noopener">ECMAScript 5.1 (ECMA-262)<br/><small lang="zh-CN">switch 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/6.0/#sec-switch-statement" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">switch statement</small></a></td>
|
||
<td><span class="spec-Standard">Standard</span></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-switch-statement" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">switch statement</small></a></td>
|
||
<td><span class="spec-Draft">Draft</span></td>
|
||
<td> </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>switch</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/if...else"><code>if...else</code></a></li>
|
||
</ul>
|
||
</article> |