文章配套視頻

• https://study.163.com/course/introduction/1005973001.htm

1.什么是代碼塊

簡介

程序是由一條一條語句構(gòu)成的, 
語句是按照自上向下的順序一條一條執(zhí)行的, 
在JS中可以使用{}來為語句進(jìn)行分組
同一個{}中的語句我們稱為是一組語句，
它們要么都執(zhí)行，要么都不執(zhí)行。

使用
JS中的代碼塊，
只具有分組的的作用，
沒有其他的用途,
代碼塊里面的內(nèi)容，
在外部是完全可見的。

列如:

javascript
      {
        var name = '撩課學(xué)院';  
        console.log("itlike.com");
        document.write("喜歡IT, 就上撩課!");
      }
javascript
 console.log("name = " + name);

2. 流程控制語句

基本概念
默認(rèn)情況下，
程序的運行流程是這樣的：
運行程序后，
系統(tǒng)會按書寫從上至下順序
執(zhí)行程序中的每一行代碼,
但是這并不能滿足
我們所有的開發(fā)需求

如下圖:

實際開發(fā)中,
我們需要根據(jù)
不同的條件執(zhí)行
不同的代碼或者
重復(fù)執(zhí)行某一段代碼

為了方便我們控制程序的運行流程，
JavaScript提供3種流程結(jié)構(gòu)，
不同的流程結(jié)構(gòu)可以實現(xiàn)不同的運行流程。
這3種流程結(jié)構(gòu)分別是
順序、選擇、循環(huán):

三種基本控制結(jié)構(gòu)構(gòu)造.
順序結(jié)構(gòu)
 默認(rèn)的流程結(jié)構(gòu)。按照書寫順序從上至下執(zhí)行每一條語句
選擇結(jié)構(gòu)
對給定的條件進(jìn)行判斷，再根據(jù)判斷結(jié)果來決定執(zhí)行哪一段代碼
循環(huán)結(jié)構(gòu)
在給定條件成立的情況下，反復(fù)執(zhí)行某一段代碼

if語句
如果條件表達(dá)式為真,執(zhí)行語句塊1,否則不執(zhí)行
if(條件表達(dá)式) { 語句塊1 } 后續(xù)語句;

  if(age > 18)
  {
      console.log("可以上網(wǎng)");
  }
  ````

如果條件表達(dá)式為真,則執(zhí)行語句塊1,否則執(zhí)行語句塊2

  if(條件表達(dá)式)
  {
      語句塊1
  }else{
      語句塊2
  }

  if(age > 18)
  {
      console.log("可以上網(wǎng)");
  }else{
      console.log("你媽媽喊你吃飯");
  }

特點

if和else后面的代碼塊({})只有一個會被執(zhí)行 
如果條件表達(dá)式1為真,則執(zhí)行語句塊1,
否則判斷條件表達(dá)式2,
如果為真執(zhí)行語句塊2,
否則再判斷條件表達(dá)式3,
如果真執(zhí)行語句塊3, 
當(dāng)表達(dá)式1、2、3都不滿足,會執(zhí)行最后一個else語句

 代碼如下:
      if(條件表達(dá)式1)
      {
          語句塊1
      }else if(條件表達(dá)式2){
          語句塊2
      }else if(條件表達(dá)式3){
          語句塊3
      }else{
          語句塊4



      if(age>40)
      {
          console.log("老年人");
      }else if(age>25){
          console.log("中年人");
      }else if(age>18){
          console.log("成年人");
      }else{
          console.log("未成年");
      }


 特點
     這么多大括號中只有一個大括號中的內(nèi)容會被執(zhí)行
     當(dāng)執(zhí)行到后面條件的時候證明前面的條件不滿足
     else if可以只有一個, 也可以有多個, 但是都必須添加在if和else之間

 注意事項
   如果只有一條語句時if后面的大括號可以省略
      if(age > 18)
          console.log("成年人");

   注意:受到if管制的只有緊跟其后的那條語句
   開發(fā)中盡量不要省略大括號

        if(false)
            console.log("語句1");
        console.log("語句2"); // 語句2會被輸出

  分號“;”也是一條語句, 空語句
      if(4 > 6);
      {
          console.log("4 > 6");
      }
      // 輸出結(jié)果: 4 > 6, if管制的緊跟其后的那個分號
      // {}在JS中僅僅代表告訴系統(tǒng)里面的語句是一個整體, 沒有別的用途,不會影響代碼的執(zhí)行

   if else是一個整體， else匹配if的時候匹配離它最近的一個if

         if(0)
              if(1)
                  console.log("A");
              else 
                  console.log("B");
          else 
              if (1)
                  console.log("C"); 
              else
                  console.log("D");

  對于非Boolean類型的值,會先轉(zhuǎn)換為Boolean類型后再判斷

       if (0) {
              console.log("itlike\n"); // 不會被執(zhí)行
          }
      ```

   判斷變量與常量問題

   但凡遇到比較一個變量等于或者不等于某一個常量的時候，把常量寫在前面

        // if(a = 0)  // 錯誤寫法, 但不會報錯
            if (0 == a) {
                console.log("a的值是0\n");
            }else{
               console.log("a的值不是0\n");
            }

         /*
            本來是先判斷變量a存儲的值是否等于0,
            但是如果不小心寫成a=0,代表把0存儲到a中.
            為了避免這種問題判斷是否相等時把常量寫前面,
            因為等號左邊只能是變量, 所以如果少寫一個等號會報錯
        */


   if語句可以嵌套使用

       var num = 20;
          if (num >= 10)
          {
              if(num <= 30)
              {
                  console.log("一個10~30之間的數(shù)")
              }
          }

  習(xí)題訓(xùn)練

  從鍵盤輸入一個整數(shù)，判斷其是否是偶數(shù)，如果是偶數(shù)就輸出YES，否則輸出NO

    //    1.定義一個變量保存用戶輸入的整數(shù)
        var temp;
    //    2.利用window.prompt()接收用戶輸入數(shù)據(jù)
    //     window.prompt返回給我們的是一個字符串, 需要轉(zhuǎn)換為Number
        temp = +(window.prompt("請輸入一個整數(shù)"));
    //    3.對用戶輸入的數(shù)據(jù)進(jìn)行安全校驗
        if(isNaN(temp)){
            alert("你是SB嗎?");
        }else{
    //    3.判斷用戶輸入的數(shù)據(jù)是否是偶數(shù), 然后根據(jù)判斷結(jié)果輸出YES/NO
            /*
            if(temp % 2 == 0){
                alert("YES");
            }else{
                alert("NO");
            }
            */
            (temp % 2 == 0) ? alert("YES") :  alert("NO");
        }
  接收用戶輸入的1～7的整數(shù)，根據(jù)用戶輸入的整數(shù)，輸出對應(yīng)的星期幾?

    //    1.定義變量保存用戶輸入的數(shù)據(jù)
        var day;
    //    2.利用window.prompt()接收用戶輸入數(shù)據(jù)
        day = +(window.prompt("輸入的1～7的整數(shù)"));
    //    3.判斷當(dāng)前是星期幾
        if(day == 1){
            console.log("星期一");
        }else if(day == 2){
            console.log("星期二");
        }else if(day == 3){
            console.log("星三");
        }else if(day == 4){
            console.log("星期四");
        }else if(day == 5){
            console.log("星期五");
        }else if(day == 6){
            console.log("星期六");
        }else if(day == 7){
            console.log("星期日");
        }else{
            console.log("滾犢子");
        }.

  接收用戶輸入的一個整數(shù)month代表月份，根據(jù)月份輸出對應(yīng)的季節(jié)?
  第一種:

      //    1.定義變量保存用戶輸入的數(shù)據(jù)
          var month;
      //    2.利用window.prompt()接收用戶輸入數(shù)據(jù)
          month = +(window.prompt("請輸入一個1-12的月份"));
      //    3.數(shù)據(jù)安全校驗
          if(isNaN(month)){
              alert("火星SB?");
          }else{
      //    4.根據(jù)輸入的數(shù)據(jù)判斷輸出對應(yīng)的月份即可
              if(month >= 3 && month <= 5){
                  alert("春季 ");
              }else if(month >=6 && month <= 8){
                  alert("夏季");
              }else if(month >=9 && month <= 11){
                  alert("秋季");
              }else if(month == 12 || month == 1 || month == 2){
                  alert("冬季");
              }else{
                  alert("火星季節(jié)");
              }
        }
   第二種:
      //    1.定義變量保存用戶輸入的數(shù)據(jù)
          var month;
      //    2.利用window.prompt()接收用戶輸入數(shù)據(jù)
          month = +(window.prompt("請輸入一個1-12的月份"));
      //    3.數(shù)據(jù)安全校驗
          if(isNaN(month)){
              alert("火星SB?");
          }else{
      //    4.根據(jù)輸入的數(shù)據(jù)判斷輸出對應(yīng)的月份即可
              if(month < 1 || month > 12){
                  alert("火星季節(jié)");
              }else if(month >= 3 && month <= 5){
                  alert("春季 ");
              }else if(month >=6 && month <= 8){
                  alert("夏季");
              }else if(month >=9 && month <= 11){
                  alert("秋季");
              }else{
                  alert("冬季");
              }
          }

  第三種:
      //    1.定義變量保存用戶輸入的數(shù)據(jù)
          var month;
      //    2.利用window.prompt()接收用戶輸入數(shù)據(jù)
          month = +(window.prompt("請輸入一個1-12的月份"));
      //    3.數(shù)據(jù)安全校驗
          if(isNaN(month)){
              alert("火星SB?");
          }else{
      //    4.根據(jù)輸入的數(shù)據(jù)判斷輸出對應(yīng)的月份即可
              if(month == 12 || month == 1 || month == 2){
                  alert("冬季");  // 沒有進(jìn)入, 剩下的必然是3-11
              }else if(month >=9){ 
                  alert("秋季"); // 沒有進(jìn)入, 剩下的必然 3-8
              }else if(month >=6){ 
                  alert("夏季"); // 沒有進(jìn)入, 剩下的必然 3-5
              }else if(month >= 3){
                  alert("春季 ");
              }else{ // 12 1 2
                  alert("火星季節(jié)");
              }
          }
  從鍵盤輸入2個整數(shù)，判斷大小后輸出較大的那個數(shù)?
  
    //    1.定義變量保存三個整數(shù)
        var a, b;
    //    2.利用window.prompt接收用戶輸入的數(shù)據(jù)
        a =  +(window.prompt("請輸入內(nèi)容")); 
        b =  +(window.prompt("請輸入內(nèi)容")); 
    //    3.利用if進(jìn)行兩兩比較
        if(a > b){
            console.log(a);
        }else{
            console.log(b);
        }
        /*
        三元運算符好處：可以簡化if else代碼
        弊端                  ：因為是一個運算符所以運算完必要要有一個結(jié)果。  
        簡單用三元 復(fù)雜用if(閱讀性好)
        */
        console.log(a > b? a: b);
  從鍵盤輸入3個整數(shù)，排序后輸出?
  常規(guī)寫法

      //    1.定義變量保存三個整數(shù)
          var a, b, c;
      //    2.利用window.prompt接收用戶輸入的數(shù)據(jù)
          a =  +(window.prompt("請輸入內(nèi)容"));
          b =  +(window.prompt("請輸入內(nèi)容"));
          c =  +(window.prompt("請輸入內(nèi)容"));
          //     方式1 寫出所有方式
          if (a >= b && b >=c) {
              console.log(a, b, c);
          }else if (a >= c && c >= b) {
              console.log(a, c, b);
          }else if (b >= a && a >= c) {
              console.log(b, a, c);
          }else if (b >= c && c >= a) {
              console.log(b, c, a);
          }else if (c >= a && a >= b) {
              console.log(c, a, b);
          }else if (c >= b && b >= a) {
              console.log(c, b, a);
          }

      選擇排序
        //    1.定義變量保存三個整數(shù)
            var a, b, c;
        //    2.利用window.prompt接收用戶輸入的數(shù)據(jù)
            a =  +(window.prompt("請輸入內(nèi)容"));
            b =  +(window.prompt("請輸入內(nèi)容"));
            c =  +(window.prompt("請輸入內(nèi)容"));
        //     方式2 選擇排序
            var temp;
            if (a > b) {
                temp = a;
                a = b;
                b = temp;
            }
            if (a > c) {
                temp = a;
                a = c;
                c = temp;
            }
            if ( b > c) {
                temp = b;
                b = c;
                c = temp;
            }
            console.log(a, b, c);
  冒泡排序

          //    1.定義變量保存三個整數(shù)
              var a, b, c;
          //    2.利用window.prompt接收用戶輸入的數(shù)據(jù)
              a =  +(window.prompt("請輸入內(nèi)容"));
              b =  +(window.prompt("請輸入內(nèi)容"));
              c =  +(window.prompt("請輸入內(nèi)容"));
          //     方式3 冒泡排序
              var temp;
              if (a > b) {
                  temp = a;
                  a = b;
                  b = temp;
              }
              if (b > c) {
                  temp = b;
                  b = c;
                  c = temp;
              }
              if ( a > b) {
                  temp = a;
                  a = b;
                  b = temp;
              }
              console.log(a, b, c);
    石頭剪子布實現(xiàn)?

    // 定義 0.剪刀 1.石頭 2.布
        // 1、定義變量 玩家和電腦
        var player,computer = 0;
        
        // 2、讓電腦先出拳
        var temp = Math.random() * 3;
        // 3、用戶出拳
        var player = window.prompt("請出拳:0.剪刀 1.石頭 2.布");
        // 數(shù)據(jù)合法性的校驗
        if (player<0||player>2) {
            window.prompt("請重新出拳:0.剪刀 1.石頭 2.布");
        }else{
            // 4、判斷比較 //先判斷用戶贏的情況
            if((player==0&&computer==2)||
                    (player==1&&computer==0)||
                    (player==2&&computer==1)){
                window.alert("我靠,你贏了!\n");
    
            }else if((computer==0&&player==2)||
                    (computer==1&&player==0)||
                    (computer==2&&player==1)){
                window.alert("很遺憾,你輸了!\n");
    
            }else{
                window.alert("平局\n");
            }
        }


3. 循環(huán)

循環(huán)結(jié)構(gòu)是程序中一種很重要的結(jié)構(gòu)。其特點是,在給定條件成立時,反復(fù)執(zhí)行某程序段, 直到條件不成立為止。

給定的條件稱為循環(huán)條件,反復(fù)執(zhí)行的程序段稱為循環(huán)體
循環(huán)結(jié)構(gòu)簡單來說就是:一次又一次的執(zhí)行相同的代碼塊

現(xiàn)實生活中的循壞

JavaScript中的循壞

  while語句
  do-while語句
  for語句
  while循環(huán)

格式

 while ( 條件表達(dá)式 ) {
      語句1;
      語句2;
      ....
  }

執(zhí)行流程

判斷條件表達(dá)式是否為真, 如果為真執(zhí)行后面大括號中的內(nèi)容

執(zhí)行完畢再次判斷條件表達(dá)式是否還為真,如果為真執(zhí)行后面大括號中的內(nèi)容

 重復(fù)上述過程,直到條件不成立就結(jié)束while循環(huán)

  var num = 0;
  while (num < 10){
    console.log(num); 
    num++;
  }

構(gòu)成循環(huán)結(jié)構(gòu)的幾個條件

 循環(huán)控制條件(條件表達(dá)式)
 循環(huán)退出的主要依據(jù),來控制循環(huán)到底什么時候退出
 循環(huán)體(while后面的大括號{})
 循環(huán)的過程中重復(fù)執(zhí)行的代碼段
 循環(huán)結(jié)束語句(遞增,遞減,break等)
 能夠讓循環(huán)條件為假的依據(jù),否則退出循環(huán)

while循環(huán)特點

如果while中的條件一開始就不成立,那么循環(huán)體中的語句永遠(yuǎn)不會被執(zhí)行
  var num = 10;
  while (num < 10){
      alert(num); // 什么都不彈
      num++;
  }

while循壞注意點

  死循環(huán)

  條件表達(dá)式永遠(yuǎn)為真, 循壞永遠(yuǎn)無法結(jié)束,我們稱之為死循環(huán)

     while (true){
            alert("itlike.com");
        }

任何值都有真假性

 對于非Boolean類型的值, 會先轉(zhuǎn)換為Boolean類型再判斷

 while (1){ // 先把1轉(zhuǎn)換為Boolean, 然后再判斷真假
            alert("itlike.com");
        }
 
 while 后如果只有一條語句它可以省略大括號

 如果省略大括號, while只會管制緊跟其后的那條語句

    while (0)
       alert("會執(zhí)行我么?"); // 不會執(zhí)行
    alert("itlike.com");

分號問題

   分號(;)也是一條語句, 代表空語句

     while (0);
      {
          alert("123"); // 會被執(zhí)行, 因為while管制的是分號(;)
      }

最簡單的死循環(huán)
開發(fā)中慎用死循環(huán), 會導(dǎo)致程序阻塞

     while (1);

while循壞練習(xí)

    提示用戶輸入一個正整數(shù)n， 計算1 + 2 + 3 + ...n的和

      //    1.定義變量保存上一次的和
          var sum = 0;
          //    2.定義變量保存遞增的數(shù)
          var number = 1;
          while (number <= 5) {
              console.log("sum = "+ sum +" + number = "+ number);
              sum = sum + number;
              number++;
          }
          console.log("sum = " + sum);

    獲取1～100之間 7的倍數(shù)的個數(shù)并打印，并統(tǒng)計個數(shù)

      var count = 1;
          var num = 0;
          while (count <= 100) {
      
              if (count % 7 == 0) {
      
                  console.log("count = " + count);
                  num++;//計數(shù)器
              }
              count++;
          }
      
          console.log("number = "+ num);

break關(guān)鍵字

      var num = 1;
      switch(num){
          case 1:
              console.log("壹");// 輸出壹
              break; // 跳出switch語句, 后面代碼不會執(zhí)行
          case 2:
              console.log("貳"); 
              break;
          default:
              console.log("非法數(shù)字");
              break;
      }

跳出循環(huán)語句

      var num = 0;
      while(true){ 
          console.log(num);
          if(3 == num){
              break; // 當(dāng)num等于3時跳出循環(huán)
          }
          num++
      }

注意點

      break關(guān)鍵字只能用于循環(huán)語句和switch語句, 在其它地方?jīng)]有意義

       
        break;  // 瀏覽器會報錯
        alert("我會輸出么?");

        if(true){
            break; // 瀏覽器會報錯
            alert("我會輸出么?");
        }
        ```

      在多層循環(huán)中,一個break語句只向外跳一層

       
        while (1){
            while (2){
                console.log("我是while2"); // 會被輸出多次
                break; // 跳出while2,但是不會跳出while1
            }
            console.log("我是while1");
        }
    

      break后面的語句永遠(yuǎn)不會被執(zhí)行

       
        while (1){
            break;
            alert("會彈出來么?"); // 不會彈出
        }

continue關(guān)鍵字

  作用

  跳過當(dāng)前循環(huán)體中剩余的語句而繼續(xù)下一次

      var num = 0;
        while (num < 10){
            num++;
            if(num % 2 == 0){
                continue;
            }
            console.log(num); // 1, 3, 5, 7, 9
        }


注意點

只能用于循環(huán)結(jié)構(gòu), 在其它地方?jīng)]有意義

continue后面的語句永遠(yuǎn)不會被執(zhí)行

      while (1){
          continue;
          alert("會彈出來么?"); // 不會彈出
      }

do-while循環(huán)

格式

   do {
       語句1;
       語句2;
       ....
   } while ( 條件 );


    執(zhí)行流程

    首先會執(zhí)行一次循環(huán)體中的語句
    接著判斷while中的條件表達(dá)式是否為真，如果為真再次執(zhí)行循環(huán)體中的語句
    重復(fù)上述過程，直到條件不成立就結(jié)束while循環(huán)

  特點

    不管while中的條件是否成立，循環(huán)體中的語句至少會被執(zhí)行一遍

  應(yīng)用場景

    口令校驗

for循環(huán)

JavaScript中的for語句使用最為靈活,
不僅可以用于循環(huán)次數(shù)已經(jīng)確定的情況,
而且可以用于循環(huán)次數(shù)不確定而只給出循環(huán)結(jié)束條件的情況,
它完全可以代替while語句。

格式

  
  for(①初始化表達(dá)式；②循環(huán)條件表達(dá)式；④循環(huán)后操作表達(dá)式)
  {
      ③執(zhí)行語句；
  }

for循環(huán)執(zhí)行流程

   for循環(huán)開始時，會先執(zhí)行初始化表達(dá)式，而且在整個循環(huán)過程中只執(zhí)行一次初始化表達(dá)式

    接著判斷循環(huán)條件表達(dá)式是否為真，如果條件為真，就會執(zhí)行循環(huán)體中的語句

   循環(huán)體執(zhí)行完畢后，接下來會執(zhí)行循環(huán)后的操作表達(dá)式

    執(zhí)行完循環(huán)后操作表達(dá)式, 然后再次判斷循環(huán)條件表達(dá)式是否為真，如果條件為真，就會執(zhí)行循環(huán)體中的語句

    重復(fù)上述過程，直到條件不成立就結(jié)束for循環(huán)

        for(var i = 0; i < 10; i++){
            alert(i); // 輸出0-9
        }
       
        for循環(huán)和while循環(huán)如何選擇?

       一般情況下while和for可以互換, 但是如果循環(huán)執(zhí)行完畢之后就不需要使用用于控制循環(huán)的增量, 那么用for更好

     注意點

        for循環(huán)中初始化表達(dá)式,循環(huán)條件表達(dá)式,
        循環(huán)后操作表達(dá)式都可以不寫
        循環(huán)條件表達(dá)式默認(rèn)為真
        for(; ;) 語句相當(dāng)于while(1), 都是死循環(huán)
        其它注意點和while一樣

      循環(huán)嵌套練習(xí)

        打印好友列表

          好友列表1
          ?          好友1
          ?          好友2
          ?          好友3
             好友列表2
          ?          好友1
          ?          好友2
          ?          好友3

           
          for (var i = 1; i <= 2; i++) {
                  console.log("好友列表"+ i);
                  for (var j = 1; j <= 3; j++) {
                      console.log("    好友"+ j);
                  }
              }
        

       for循環(huán)嵌套實現(xiàn):打印99乘法表

        
        <style>
        
                span{
                    display: inline-block;
                    border: 1px solid #000;
                    padding: 10px;
                }
        </style>
        <script>
            /*
              1.觀察發(fā)現(xiàn)有很多行很多列--》循環(huán)嵌套
              2.尖尖朝上，讓內(nèi)循環(huán)條件表達(dá)式隨著外循環(huán)i改變
              3.輸出的結(jié)果等于 內(nèi)循環(huán)的變量 * 外循環(huán)的變量
            */
            for (var i = 1; i <= 9; i++) {
                for (var j = 1; j <= i; j++) {
                    document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
                }
                window.document.write("<br/>");
            }
        </script>