重學前端之（2）流程控制

流程控制

程序的三種基本結構

順序結構

• 從上到下執行的代碼就是順序結構

• 程序默認就是從上到下,一行一行的順序執行的

• console.log("哈哈1");
  console.log("哈哈2");
  console.log("哈哈3");
  複製代碼

分支結構

• 分支結構, 也叫選擇結構 , 根據不一樣的狀況,,執行對應的代碼

循環結構

• 循環結構：重複作一件事情

分支語句 (3個)

分支語句目的 : 解決不一樣條件不一樣效果的問題

第1個分支語句 : if語句

• 單獨的if語句 ==> 可能性只有一種

  // 語法
  if (條件) {
      // 只有當條件爲 true 時,執行代碼
  }
  
  var age = 10;
  if (age >= 18) {
      console.log('能夠訪問該網站')
  }
  複製代碼

  ​

• if..else 語句 ==> 可能性有2種

  // 語法
  if (條件) {
      // 當條件爲 true 時執行的代碼
  }else {
      // 當條件不爲 true 時執行的代碼
  }
  
  var age = 10;
  if (age >= 18) {
      console.log('能夠訪問該網站')
  }else {
      console.log('不能夠玩王者榮耀')
  }
  複製代碼

  ​

• if..else if ..else 語句 ==> 可能性有2種以上

  if (條件1) {
      // 當條件1爲 true 時執行的代碼
  }else if (條件2){
      // 當條件2 爲true 時執行的代碼
  }else {
      // 當條件1和 條件2 都不爲true 時執行的代碼
  }
  
    var age = 10;
  
    if(age >= 18) {
  
      console.log("準玩王者榮耀");
  
    }else if(age > 12){
  
      console.log("能夠玩王者榮耀2個小時");
  
    }else {
  
      console.log("不能夠玩王者榮耀");
  
    }
  
  複製代碼

---

第2個分支語句 : 三元運算符

條件 ? 值1 : 值2    /*或者*/   條件 ? 表達式1 : 表達式2  
1. 三元運算符會獲得一個結果，結果根據`條件`來肯定。
2. 若是`條件`的值爲true，會返回表達式1的值/值1
3. 若是`條件`的值爲false，會返回表達式2的值/值2
複製代碼

案例 :

//求兩個數的最大值
var max = n1 > n2 ? n1 : n2;

//思考1：求兩個數的最小值
//思考2：判斷成年仍是未成年, 並返回字符串
//思考3：求三個數的最小值
複製代碼

第3個分支語句 :switch語句

if..else適用於範圍的判斷，switch..case適用於具體的值的判斷

語法格式 :

switch case break default

switch (變量) {
  case 值1:
    語句1;
    break;
  case 值2:
    語句2;
    break;
  case 值3:
    語句3;
    break;
  …
  default:
    默認語句;
    break;
}
複製代碼

注意 :

break能夠省略，若是省略，代碼會繼續執行下一個case
switch 語句在比較值時使用的是全等操做符, 所以不會發生類型轉換（例如，字符串'10' 不等於數值 10）
複製代碼

案例 :

輸入一個數字，顯示星期幾
複製代碼

//思考題：
var num = "10"; // 10
switch (num) {
    case 10:
        console.log("10");
    case 20:
        console.log("20");
    case 30:
        console.log("30");
    default:
        console.log("lalala");
}
複製代碼

使用場景

1. 若是是範圍性的判斷，使用if..else會更加方便
2. 若是是對具體值的判斷，使用switch..case語句會更加方便，固然用if..else也是能夠的。
3. 若是if..else比較簡單，可使用三元運算符進行替代。

//練習1：土豪的兒子, 輸入ABCDE 
	//若是考了A： 買法拉利
	//若是考了B： 買寶馬
	//若是考了C： 買三輪
	//若是考了D： 買摩拜自行車
	//若是考了E： 斷絕父子關係
	//若是是其餘值，提示代碼有bug

//練習2： 買手機，輸入本身的工資
   //若是超過30000: 買蘋果手機
   //若是10000-30000： 買vivo手機
   //若是5000-10000 ： 買魅族手機
   //若是低於5000 ： 還買個錘子

//練習3： 輸入本身的每個月薪資
	//若是超過15000 : 高富帥
    //若是不超過 ：窮矮醜
複製代碼

循環語句 (3個)

在javascript中，循環語句有三種，while、do..while、for循環。

循環語句的目的 : 解決須要重複執行某些語句的代碼

第1個循環語句 : while循環

基本語法 :

//當循環條件爲true時，執行循環體，
//當循環條件爲false時，結束循環。
while(循環條件){
  //循環體：須要循環執行的語句
}
複製代碼

代碼示例:

//1. 打印1-100之間全部的數
//2. 計算1-100之間全部數的和
// 初始化變量
var i = 1;
var sum = 0;
while(i <= 100){//判斷條件
  sum += i;//循環體
  i++;//自增，修改循環條件（不能省略）
}
console.log(sum);
複製代碼

第2個循環語句 : do..while循環

do..while循環和while循環很是像，兩者常常能夠相互替代，可是do..while的特色是無論條件成不成立，都會執行一次。

基礎語法 :

do {
   //循環體;
}while(條件)
複製代碼

代碼示例 :

//初始化變量
var i = 1;
var sum = 0;
do{
  sum += i;//循環體
  i++;//自增
}while(i <= 100);//循環條件
複製代碼

第3個循環語句 : for循環

寫while循環的常常會忘記自增，for循環實際上是while循環演化過來的，語法更加的簡潔明瞭，使用很是的普遍。

for循環語法：

//1. for循環使用分號分隔
//2. for循環有2個分號，兩個分號不能少
for(初始化語句;判斷語句;自增語句){
  //循環體
}
複製代碼

執行順序：1243 ---- 243 -----243(直到循環條件變成false)

1. 初始化語句
2. 判斷語句
3. 自增或者自減
4. 循環體

for循環代碼示例：

//1. 打印1-5之間全部數
for ( var i = 1;i<=5;i++ ) {
    console.log(i);
}

複製代碼

break和continue

break: 結束/停止for循環

​ 當即跳出當前整個循環，即循環結束，開始執行循環後面的內容（直接跳傳出大括號）

​ 通常寫在打印以後

continue: 結束本次循環,進行下一個循環

​ 當即跳出當前循環，繼續下一次循環（跳到i++的地方） (放打印代碼前面)

​ 通常寫在打印以前

代碼示例：

//輸出結果是什麼？
for(var i = 1; i <=10; i++) {
  if(i == 5){
    continue;
  }
  if(i == 7){
    break;
  }
  console.log(i);
}
複製代碼

總結 :

1. 循環有不少種，可是之後用得最多的是for循環
2. 當不明確循環次數的時候，可使用while循環
3. 當不管如何都要執行一次代碼的時候，可使用do..while循環。
4. 循環能夠相互替代。