>我們是[袋鼠雲數棧 UED 團隊](http://ued.dtstack.cn/)，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 >本文作者：琉易 [liuxianyu.cn](https://link.juejin.cn/?target=ht ...
分支語句是流程式控制制語句當中的一種
可以簡單理解為是一種控制條件， 當達到某個條件時，執行相應的代碼
IF
IF多條件分支
例如：當 變數 a > b 時， 則執行 語句塊1 ， 如果 a 等於 b 時，則執行語句塊2 ；最後，如果 a > b 時，則執行語句塊3
if else 語句當中的語句塊一般具有排斥作用。如果執行了語句塊1中的內容， 則後續的語句塊2至 語句塊n 中的內容則不會被執行
用流程圖表示如下
用代碼表示
<script>
var a = 10;
var b = 20;
if (a > b) {
// 語句塊1
console.log("a > b = true");
} else if (a == b) {
console.log(" a = b = true");
} else {
console.log("a < b = true");
}
</script>
如果一個 if 語句 只有一行，可以省略大括弧，但最好不要這樣做， 因為這增加了閱讀代碼的成本
if (a > b) console.log("a > b = true");
switch
除了if外的另一種流程式控制制語句， switch適用於當一個變數被分類討論的情形
例如輸入一種水果，返回他們的價格. 這個例子也可以用if實現，只是看起來沒那麼簡潔
| 水果 | 價格(元/斤) |
|---|---|
| 西紅柿 | 1.2 |
| 香蕉 | 1.2 |
| 蘋果 | 1 |
| 西瓜 | 1 |
| 菠蘿 | 1.5 |
| 火龍果 | 1.5 |
switch的基礎語句就如下所示， 註意其中的 break 關鍵詞，如果不寫break， 程式即使命中了某個水果，也不會跳出switch語句， 而是繼續向下執行，直到碰到 break語句
其中的 default 是用來處理上面都沒有命中的情況， 我們給的水果的價格再多， 也不能窮盡所有的水果價格，所以給一個預設值，就顯得比較合理
<script>
var fruit = prompt("請輸入水果");
switch (fruit) {
case "西紅柿":
alert("西紅柿的價格是 1.2");
break;
case "香蕉":
alert("香蕉的價格是1.2");
case "蘋果":
alert("蘋果的價格是1");
break;
case "西瓜":
alert("西瓜的價格是1");
break;
case "菠蘿":
alert("菠蘿的價格是1.5");
break;
case "火龍果":
alert("火龍果的價格是1.5");
break;
}
</script>
以上的代碼還可以做簡化，我們發現， 西紅柿、香蕉價格相同；蘋果、西瓜價格相同；菠蘿、火龍果價格相同。我們可以做一個分組， 使得代碼更加簡潔。代碼如下
<script>
var fruit = prompt("請輸入水果");
switch (fruit) {
case "西紅柿":
case "香蕉":
alert(`${fruit}的價格是1.2`);
break;
case "蘋果":
case "西瓜":
alert(`${fruit}的價格是1`);
break;
case "菠蘿":
case "火龍果":
alert(`${fruit}的價格是1.5`);
break;
default:
alert("不知道");
break;
}
</script>
三目運算符
JavaScript 等高級語言提供了 三目運算符的語法。其本質也是分支條件語句， 相當於單個的 if…else
語法
// condition : 條件表達式，輸出 true 或者 false
// 如果 condition 結果為 true 則 返回 expr1 表達式
// 如果 condition 結果為 false 則 返回 expr2 表達式
condition ? expr1 : expr1
例如
理髮店會員剪一次30塊錢， 非會員剪一次需要288元
<script>
var member = "非會員";
var price = member === "會員" ? 30 : 288;
console.log(price);
</script
微信公眾號
