前言

您將在本文當(dāng)中學(xué)習(xí)到

• 順序語句

• 分支語句

• If判斷,switch,while循壞,do..while循環(huán),for循環(huán),表達式中的真(true)與假(false)

在代碼程序中,我們經(jīng)常都會使用流程控制語句,它是用來控制程序中各語句執(zhí)行順序的語句,利用語句的組合便能完成一定功能的小邏輯模塊
?? 流程控制方式采用結(jié)構(gòu)化程序設(shè)計中規(guī)定的三種基本流程結(jié)構(gòu)，即：順序結(jié)構(gòu)、分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)，如下圖所示：

順序語句

按照正常的語句順序從上往下執(zhí)行

分支語句

根據(jù)某些條件選擇執(zhí)行

• if語句(針對條件單一的情況使用)
• if-else語句（針對兩種情況的時候使用）
• if-else-if語句(多重if嵌套）
• while語句(往往一進入,就需要判斷,需要條件為真時執(zhí)行一組語句)
• switch語句

if判斷語句

條件語句是一種代碼結(jié)構(gòu),用來測試表達式的真假,并根據(jù)布爾表達式的結(jié)果執(zhí)行不同的代碼,也就是判斷結(jié)構(gòu)讓程序可以選擇執(zhí)行哪些程序語句
寫法:

if(條件表達式) {
?? 語句體;
}

注意要點:

• 條件表達式的結(jié)果必須是boolean類型
• 語句體中可以有一條語句,也可以有多條語句,如果語句體中只有一條語句,那么{}可以省略不寫
• 可以使用三目運算符替代

應(yīng)用場景

• 針對條件單一的情況使用單if語句
• 建議判斷區(qū)間或范圍的時候用

編程題
求最大值:編寫一個方法，找出兩個數(shù)字a和b中最大的那一個

示例：
輸入： a = 1, b = 2
輸出： 2

方式1：if...else..

var maximum = function(a, b) {
  if(a-b>0) {
      return a;
  }else {
      return b;
  }
 // 或者如下所示:三目運算符
return a-b>0?a:b;

}
maximum(1,2)

方式2:使用Math提供的數(shù)據(jù)函數(shù)max

var maximum = function(a, b) {
    return Math.max(a,b)
}
maximum(1,2)

在實際的程序代碼中:if的使用可以說無處不在

01if判斷.gif

例如:上面例子中的:當(dāng)表單輸入框內(nèi)不為空時,右側(cè)的按鈕激活,否則就禁用

// reducer代碼中的代碼
if(newState.inputVal !="") {
    newState.btnDisable = false;
  }
// UI組件中
 <button onClick =  { hanldeAddContent } disabled = {  btnDisable }>提交</button>

相比于if..else語句,switch語句可能會沒那么熟練,switch語句只支持常量值相等的分支判斷，而if語句支持更為靈活，任意布爾表達式均可
但通常比一系列嵌套if語句效率更高；邏輯也更加清晰

switch語句

將表達式的值與case子句匹配，并執(zhí)行與該情況相關(guān)聯(lián)的語句

應(yīng)用場景:常用于等值判斷

寫法：

switch (express表達式) {
  case value1:
    // 當(dāng) express 的結(jié)果與 value1 匹配時，執(zhí)行此處語句
   語句體1;
    break;
  case value2:
    // 當(dāng) express 的結(jié)果與 value2 匹配時，執(zhí)行此處語句
    語句體2;
    break;
  ...
  case valueN:
    // 當(dāng) express 的結(jié)果與 valueN 匹配時，執(zhí)行此處語句
    語句體3;
   break;
   default:
    // 如果 express 與上面的 value 值都不匹配，執(zhí)行此處語句
    語句體4;
    break;
}

注意事項:

• 在JS中switch語句與其他變成語言的一個主要區(qū)別是:switch語句中的判斷表達式可以是任意類型,而其他語言,類如java等一些語言就要求該表達式必須為整型
• 表達式可以是變量也可以是常量，也可以是一個復(fù)雜表達式,用全等===符號,express是一個用來與 case 子語句匹配的表達式
• case子句必須是常量表達式,case子句可以有多個,但是每一個case子句的取值不能夠重復(fù)
• default子句類似于if語句中的else語句,可以省略,但是不建議,一般用來處理一種其他的情況,可以出現(xiàn)在switch語句中的任意位置，但是一般建議寫在最后面
• break子句表示退出switch語句體,break語句也可以省略,一旦省略會出現(xiàn)break穿透現(xiàn)象,一般不會省略break子句

實例：
打10086時,電話呼叫案例，業(yè)務(wù)查詢請按1，手機充值請按2，業(yè)務(wù)辦理請按3，密碼服務(wù)與停復(fù)機請按4，集團業(yè)務(wù)請按8，人工服務(wù)請按0

var selectNum = input.val();
switch(selectNum) {
    case 1;
         console.log(業(yè)務(wù)查詢請按1);
         break;
    case 2;
         console.log(“手機充值請按2”);
         break;
     case 3;
         console.log(”業(yè)務(wù)辦理請按3”);
         break;
      case 4;
         console.log(“密碼服務(wù)與停復(fù)機請按4”);
         break;
      case 5;
         console.log(“集團業(yè)務(wù)請按8”);
         break;
      case 6;
         console.log(“人工服務(wù)請按0”);
         break;
      default;
         console.log("重聽請按#");
         break;
}

例如如下所示:Redux中Redux中if改寫成switch語句
if語句是這樣的

import * as constants  from "./actionTypes"; 
function reducer(state = defaultStatus, action) {
    if(action.type === constants.HANDLE_INPUT_CHANGE) {
        const newState =  JSON.parse(JSON.stringify(state));
        if(newState.inputVal !="") {
            newState.btnDisable = false;
        }
        newState.inputVal = action.value;
        return newState;

    }

    if(action.type === constants.HANDLE_ADD_CONTENT) {
        const newState =  JSON.parse(JSON.stringify(state));
        newState.list.push(state.inputVal);
        newState.inputVal = "";
        newState.btnDisable = true;
        return newState;

    }

    if(action.type === constants.HANDLE_DELETE_ITEM) {
        const newState =  JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1);
        return newState;

    }
    return state;
    
}

經(jīng)過switch的改寫后,如下所示

import * as constants  from "./actionTypes"; 

function reducer(state = defaultStatus, action) {
    const newState =  JSON.parse(JSON.stringify(state));
    switch(action.type) {
        case constants.HANDLE_INPUT_CHANGE:
                if(newState.inputVal !="") {
                    newState.btnDisable = false;
                }
                newState.inputVal = action.value;
                return newState;
        case constants.HANDLE_ADD_CONTENT:
                newState.list.push(state.inputVal);
                newState.inputVal = "";
                newState.btnDisable = true;
                return newState;
        case  constants.HANDLE_DELETE_ITEM:
                newState.list.splice(action.index, 1);
                return newState;
        default:
             return state;     
    }
    
}

通過與if語句的比較：可以看的出,switch語句有幾下特點

• switch語句常用于判斷固定值的時候用
• 凡是能用switch能做的,用if都能做,單反過來則不行
• 在實際開發(fā)中,如果需要進行代碼的優(yōu)化,當(dāng)遇到多個條件是等值條件的判斷選擇時,不妨用switch語句替代

小結(jié)：選擇控制語句的使用

• if語句: 針對一種情況的時候
• if-else語句: 針對兩種情況的時候,非黑即白
• 多重if語句: 針對多種情況的時候,常用于區(qū)間判斷
• 嵌套if語句: 針對多種條件的時候（若是等值判斷可用switch替代）
• swtich語句: 針對條件是等值,某個固定值的情況

上面說完了選擇結(jié)構(gòu),下面來說說循環(huán)結(jié)構(gòu)

while循環(huán)

可以在某個條件表達式為真的前提下，循環(huán)執(zhí)行指定的一段代碼，直到表達式不為真時結(jié)束循環(huán)
應(yīng)用場景:如果你希望在一開始條件為真時執(zhí)行一組語句,當(dāng)你不知道循環(huán)執(zhí)行的次數(shù)，只知道達到某個條件的時候循環(huán)繼續(xù),那么就選擇while循環(huán)
寫法

while (條件表達式)
  statement

條件表達式:
在每次循環(huán)前被求值。如果求值為真，statement就會被執(zhí)行。如果求值為假，則跳出while循環(huán)執(zhí)行后面的語句
statement:
只要條件表達式求值為真,該語句就會一直被執(zhí)行。要在循環(huán)中執(zhí)行多條語句，可以使用塊語句（{ ... }）包住多條語句

注意：使用break語句在條件表達式計算結(jié)果為真之前停止循環(huán)
如下代碼所示:求1-100之和

var number = 1;      // 循環(huán)的初始條件,定義在外面
var sum = 0;     
function getSum(n){
    while(number<n) {   // 循環(huán)滿足什么條件時執(zhí)行
          sum += number;
          ++number;      // 循環(huán)變量的更新
     } 
    return sum;
}
getSum(100);

使用while循環(huán)的時候,需要注意幾點:

• 循環(huán)的初始條件是定義在外面的
• 只有while中條件表達式為真時,才執(zhí)行里面的語句體
• while循環(huán)中應(yīng)該有循環(huán)變量的更新,否則它會造成死循環(huán)

do..while循環(huán)

創(chuàng)建一個執(zhí)行指定語句的循環(huán)，直到條件表達式值為false。在執(zhí)行statement 后檢測條件表達式，所以指定的statement至少執(zhí)行一次
寫法：

do {
   語句體;
}while(條件表達式循環(huán)條件)

使用場景: 往往需要一開始就要執(zhí)行一次,就像很多游戲一樣,一上來,就讓你先玩一盤,闖過了多少關(guān),才進行下一環(huán)節(jié)。
與while的區(qū)別是:

• whle循環(huán)是先判斷后執(zhí)行,而do..while是先執(zhí)行,后判斷
• 當(dāng)?shù)谝淮螚l件不成立時，while不會執(zhí)行,而do-while無論是否成立都至少會執(zhí)行一次
• 循環(huán)中每次都會計算的表達式。如果條件表達式循環(huán)條件值為真， 語句體會再次執(zhí)行。當(dāng)條件表達式循環(huán)條件值為假，則跳到do...while之后的語句
  例如將while語句改成do..while寫法

var number = 1;
var sum = 0;
function getSum(n) {
    do {
          sum += number;
          ++number;
    } while (number < n);

    return sum;
}

console.log(getSum(3));

for循環(huán)

用于創(chuàng)建一個循環(huán)，它包含了三個可選的表達式，這三個表達式被包圍在圓括號之中，使用分號分隔，后跟一個用于在循環(huán)中執(zhí)行的語句
應(yīng)用場景:用于固定循環(huán)次數(shù)的場景
寫法:

for(初始化變量;循環(huán)條件;循環(huán)自增變量){
  循環(huán)體;
}

注意事項:

• for 語句頭部圓括號中的所有三個表達式都是可選的
• 初始化值可以定義在圓括號里頭,也可以定義在外頭,但是個人強烈建議定義在里頭,不要寫讓人猜的代碼,更不要寫奇奇怪怪的代碼,讓人看不懂,不是在炫技,而是在挖坑,本質(zhì)上就是垃圾代碼

var sum = 0;
function getSum(n) {
    for (var number = 0; number < n; number++) {
        sum += number;
     }
     return sum;
}
console.log(getSum(100))

for循環(huán)往往是在我們已知循環(huán)次數(shù)的情況下使用它,常用于遍歷數(shù)組

小結(jié)：

• for循環(huán)擁有三個表達式的語法結(jié)構(gòu),得給定初始條件,條件判斷、自增變量,它是在已經(jīng)知道循環(huán)次數(shù)的情況下使用它
• while循環(huán)是先判斷后執(zhí)行,表達式中只有一個boolean類型的值用于作為循環(huán)結(jié)束的判斷,若表達式為真,則執(zhí)行語句體,若為假,則跳出while循環(huán),它常用于:不知道循環(huán)執(zhí)行的次數(shù)，只知道達到某個條件的時候循環(huán)繼續(xù)時使用
• do- while循環(huán)是while循環(huán)的變形，在語法上與while有相似度，它是先執(zhí)行后判斷,判斷循環(huán)是否繼續(xù)執(zhí)行的boolean表達式放在了循環(huán)體的后面，它也是在不知道循環(huán)執(zhí)行的具體次數(shù)，只知道達到某個條件時循環(huán)繼續(xù)或結(jié)束,但，至少執(zhí)行一次

當(dāng)然針對for循環(huán)常常用于遍歷,可以用forEach,map等一些迭代器方法替代的

表達式中的真(true)與假(false)

在上面的if語句,while語句,do..while,以及for循環(huán),都離不開條件表達式,而條件表達式的結(jié)果,毫無疑問,影響著語句體的執(zhí)行,下面這些實際開發(fā)中的技巧有必要提一嘴
下?的布爾表達式都返回 false:

• null
• undefined
• 0 // 數(shù)字0
• “” // 空字符串
• NaN

怎么檢測:可以利用系統(tǒng)內(nèi)置對象Boolean()，它會返回一個布爾值,注意這個Boolean的作用是用來初始化 Boolean 對象的值的
但是要注意:下面的都返回true

• "0"; // 字符串0
• []; // 空數(shù)組
• {}; // 空對象
• 非0數(shù)字
• Infinity

注意:任何不是null 和undefined包括值為 false 的 Boolean 對象，直接用于條件語句時都會被當(dāng)做 true 來對待,有new時,會執(zhí)行語句體的代碼,而無new則不會執(zhí)行語句體的代碼

var x = new Boolean(false);
if (x) {
  // 這里的代碼會被執(zhí)行
}

基本類型的布爾值不受此規(guī)則影響,如下代碼

var x = false;
if (x) {
  // 這里的代碼不會執(zhí)行
}

注意:不要用創(chuàng)建 Boolean 對象的方式將一個非布爾值轉(zhuǎn)化成布爾值，直接將 Boolean 當(dāng)做轉(zhuǎn)換函數(shù)來使用即可，或者使用雙重!!運算符

var x = Boolean(expression);     // 推薦
var x = !!(expression);          // 推薦
var x = new Boolean(expression); // 不太好

有new與無new的結(jié)果是不一樣的,前面無new的Boolean會返回一個boolean結(jié)果
值得注意的是:
對于任何對象，即使是值為 false的 Boolean對象，當(dāng)將其傳給Boolean函數(shù)時，生成的Boolean 對象的值都為true`,如下所示

var myFalse = new Boolean(false);   // false
var g = new Boolean(myFalse);       // true
var myString = new String("Hello");
var s = new Boolean(myString);      // true
if (myFalse) {
    console.log("itclanCoder");    // 這條語句會執(zhí)行
}

官方的建議是:不要在應(yīng)該使用基本類型布爾值的地方使用 Boolean 對象,濫用Boolean對象,如果需要將其他類型轉(zhuǎn)化為布爾值的時候,可以使用,例如將字符串轉(zhuǎn)為boolean類型等
以下是列出的值得注意:

Boolean('0') == true;  // true
'0' != true                  // true
 0 != null ;                // true
 0 == [] ;                 // true,比較的是值,如果是全等===,那么將是false
 0 == false              // true
 Boolean(null) == false;   // true
 null != true;    // true
 null != false   // true
 Boolean(undefined) == false;   // true
 undefined != true;         // true       
 undefined != false;       // true
 Boolean([]) == true     // true       
 Boolean({}) == true  // true

有時候,當(dāng)你需要排除不是0和空字符和false,或許你會寫這樣的代碼

if (x != "" && x != null) {
   // 語句體
} 

上面的代碼不是不可以,但很冗余,可以優(yōu)化為如下所示

if (x) {
  // 語句體
}

當(dāng)你使用while循環(huán)時,當(dāng)你希望 x 不不是 0 和空字符串串, 和 false,你或許看到這樣的代碼

while(x != null){
  // 語句體
}

同樣,可以優(yōu)化為如下所示

while(x) {
  // 語句體
}

上面的代碼優(yōu)化同時考慮到了null,空字符,或者false的情況,如果說要非真的話,那么就取反嘛

結(jié)語

本小節(jié)主要學(xué)習(xí)到j(luò)s中的選擇控制語句,if語句,switch語句,while語句以及do..while語句,for循環(huán)的對比,每個語句都有與之對應(yīng)的應(yīng)用場景以及解決的問題,當(dāng)然最后學(xué)習(xí)到了表達式中的真(true)與假(false),在我們平時做一些邏輯判斷的時候,對于一些邊界值的判斷往往是非常重要的