1. 程式人生 > >2018.12.18運算子,分支結構(迴圈),異常處理,函式

2018.12.18運算子,分支結構(迴圈),異常處理,函式

1複習

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>複習預習</title>
   <style>
      .b { /* 作用域: {}產生的, {作用域開始的標識, }作用域結束的標識 */
           /*出現在作用域中的所有內容,都是屬於作用域擁有者 .b*/
      }
      {
           /*如果直接書寫作用域, 作用域沒有具體擁有者, 但是是一個小的空間(名稱空間)*/
      }
      {
           /*區域性作用域*/
      }
       /*區域性與區域性直接資料是否想通? 不相通 <=>
      作用域中只能使用本作用域和所屬作用域中的資料 */

       /* python test.py
      // 全域性名稱空間(全域性作用域)
      ① // 只能使用自身空間內容, 不能使用②③
          def a(): // 區域性名稱空間(區域性作用域)
              ② // ②對自身空間內容使用和對①空間內容使用均可以, 不能用③
              pass

          def b(): // 區域性名稱空間(區域性作用域)
              ③ // ③對自身空間內容使用和對①空間內容使用均可以, 不能用②
              pass

          def c():
              ④ // 能④①, 不能②③⑤
              def d():
                  ⑤ // 能①④⑤, 不能②③
                  pass
              return d;

      */
   </style>
</head>
<body>
   <!--1.js引入-->
   <!--書寫在行間式的事件全域性屬性中 - 行間式 -->
   <!--書寫在script標籤中 - 內聯式 -->
   <!--書寫在外部js檔案中,用script標籤src屬性引入, 該script內部的js程式碼會被遮蔽 - 外聯式-->

   <!--在html中出現的位置 head底部 | body底部-->
   <!--head底部: 依賴性js庫-->
   <!--body底部: 功能性js指令碼-->

   <!--2.變數的定義-->
   <!--作用域: 用{}(js)或縮排(python)來標識一個區域內容所屬某一物件-->
   <!-- 四種定義方式
       // ES5標準下定義變數, 沒有塊級作用域概念
       num = 10;
       var num = 10;
       // ES6標準下定義變數, 有塊級作用域概念
       let num = 10;
       const NUM = 10;
   -->
   <script>
       // 全域性作用域
       // 定義在全域性作用域與中的變數(常量),都是全域性變數
      {
           // 塊級作用域
           // ES5標準下定義變數(無關鍵詞/var), 為全域性變數
           // ES6標準下定義變數(let/const), 為區域性變數(區域性內可以使用,區域性外不可以使用)
      }

       function func() {
           // 區域性作用域
           // 除了無關鍵詞定義的變數為全域性變數, 其他均為區域性變數
      }

       // 可以產生塊級作用域的方式
       // 直接書寫 {}
       // if 後的 {}
       // while 後的 {}
       // switch 後的 {}
       // for 後的 {}
       // do...wihlt 後的 {}
   </script>


   <!--3.彈出框與除錯方式-->
   <!--4.資料型別 | 型別轉換-->
   <!--
   數字(Number) <= +'10' +true
   字串(String) <= ''+ 10
   布林(Boolean) <= Boolean(10)
   未定義(undefined)

   函式(Function)
   物件(Object)
   空(Null)
   -->
   <!--
   "5" + 2 => "52"
   "5" - 2 => 3
   +"5" + 2 => 7
   -->
</body>
</html>

二運算子


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>運算子</title>
</head>
<body>
   運算子
</body>
<script>
   // 算術運算子
   // + | - | * | / | % | ++ | --
   console.log(5 / 2);  // 2.5
   // 取整
   console.log('%d', 5 / 2); // "2"
   var num = parseInt(5 / 2);  // 2
   console.log(num);

   // 取模(求餘)
   console.log(5 % 2);  // 1
   // 任何一個自然數對 n 取餘, 結果為 [0, n-1]

   // 自增|自減 ++|--
   // ++就是自增1, --就是自減1
   var num = 10
   console.log(num++);  // 10
   console.log(++num);  // 12
   console.log(num);  // 12
   // ++在變數後(num++), 先將變數的值拿去使用,再自身自增1
   // ++再變數前(++num), 先將變數自身自增1, 再將結果拿去使用
   // 總結: 不管++在前在後,運算結束後,變數自身值一定自增1

   // res = ++num <==> num++; res = num
   // res = num++ <==> res = num; ++num

</script>
<script>
   // 賦值運算子
   // = | += | -= | *= | /= | %=
   var x = 10;  // 將10的值賦值給變數x
   y = x;  // 將變數x的值傳遞給變數y
   console.log(y);  // 10

   x += 10;  // x = x + 10, 運算方式由右至左, 將x+10的結果重新複製給x
   console.log(y);  // 10, y的值雖然來源於x, 但y值只由自身控制

   // x /= 10 == x = x / 10
</script>
<script>
   // 比較運算子, 結果為Boolean型別
   // == | ===
   console.log("5" == 5);  // true, 只做值比較
   console.log("5" === 5);  // false, 比較值及型別

   // != | !==
   console.log("5" != 5);  // false, 只做值比較
   console.log("5" !== 5);  // true, 比較值及型別

</script>
<script>
   // 邏輯運算子, 運算結果通常為Boolean(可以不是)
   // 或 | 與 | 非 <==> || | && | !

   // &&(與)
   var a = 10;
   var b = 20;
   var c = "20";
   var res = a < b && b == c;  // true
   console.log(res)
   // 總結&&: 全真為真, 有假則假
   // 總結||: 全假則假, 有真則真
   // 總結!: 真則假, 假則真

   // 邏輯運算子的結果本質上為表示式值
   // 表示式: 由數字,變數,運算子組成的合法式子
   res = a < b && c;
   console.log(res);

   res = (a = 1 || b == c);
   console.log(res);

   // 針對 && | ||
   // 疑問: 邏輯運算子結果可能為邏輯運算子之前表示式的值,也可能是之後表示式的值
   // 當邏輯運算子出現 短路現象 , 就是之前表示式的值, 否則(正常情形下), 就是之後表示式的值

   // &&, 前一個表示式為假時, 整個式子的結果已經確定為假, 後表示式不會被執行, 就是被短路了
   var num = 10;
   res = false && num++;
   console.log(res, num);  // null, 10
   res = null && ++num;
   console.log(res, num);  // null, 10

   // ||, 前一個表示式為真時, 整個式子的結果已經確定為真, 後表示式不會被執行, 就是被短路了
   res = -10 || ++num;
   console.log(res, num);  // -10, 10

   // 特殊小技巧 => 類似於if分支來使用 ***
   /* if a > b:
      print(a)
    */
   var a = 100;
   a > b && console.log("大值a:", a);


</script>
<script>
   // 三目運算子
   // 語法: 條件表示式 ? 表示式1 : 表示式2
   var a = 10, b = 20;
   var res = a < b ? a : b;  // 取小值
   console.log(res);
   res = a < b ? b : a;  // 取大值
   console.log(res);

   // 類似於if...esle...
   a < b ? console.log("表示式結果為true") : console.log("表示式結果為false")


</script>
<script>
   let abc = 10;
   // let abc = 20; // 在es6語法下,有變數的重複定義規則, 不允許在同一作用域下,出現變數的重複定義
  {
       let abc = 20;  // 可以編譯執行通過
  }

   // ES6新增
   let [a1, b1, c1] = [1, 2, 3];
   // a1=1,b2=2,c3=3

   let [a2, ...b2] = [1, 2, 3];
   
// a2=1,b2=[2,3]

   let {key: a3} = {key: 10};
   // a3=10

   let [a4, b4, c4] = 'xyz';
   // a4='x',b4='y',c4='z'

   console.log("end")
</script>
</html>

三分支結構


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>分支結構</title>
</head>
<body>
   分支結構
</body>
<script>
   // 程式本質分為三大結構: 順序結構 | 分支結構 if|switch | 迴圈結構 for|while|do...while
   // 根據程式程式碼執行的方式 劃分為 三大結構

   // 邏輯運算子 => 類似於 if單分支結構
   // 三目運算子 => 類似於 if...else分支結構

   /* py 語法
      if 條件表示式:
          程式碼塊;

      js 語法
      if (表示式) {
          程式碼塊
      }
    */
   if (1) {
       var a = 10;
       let b = 20;
       console.log("d:%d只能在塊級作用域中訪問", b);
  }
   console.log("a:%d在塊級作用域內外都可以訪問", a);

   /* 全語法
      if (表示式1) {

      } else if () {

      }
      ...
      else if () {

      }
      else {

      }
    */
   /*
  if 與 if直接可以隨意巢狀
    */
   var salary = prompt("請輸入所發工資:");
   if (salary > 0) {
       console.log("工資已發, 打算還賬!");
       salary -= 100000;
       if (salary > 0 ) {
           console.log("拯救世界...");
      } else if (salary == 0) {
            console.log("家裡蹲, 峽谷見");
      } else {
           console.log("借錢, 填窟窿, 誰來拯救我...");
           console.log("借%d元錢", -salary);
      }
  } else {
       console.log("拿我刀來, 允許你跑49m");
  }
</script>
<script>
   // switch分支
   /* 語法
      switch (結果為整數|字串的表示式) {
          case 值1(值需要和表示式進行型別統一): 程式碼塊; break;
          ...
          case 值n: 程式碼塊; break;
          default: 程式碼塊;
      }
    */

   // 用例
   var num = prompt("請輸入一個自然數: ");  // 輸入接收的預設為字串型別資料
   var num = +num;
   switch (num) {
       case "0": console.log("使用者輸入的是數字0"); break;
       case "1": console.log("使用者輸入的是數字1"); break;
       case 0: console.log("change, 使用者輸入的是數字0"); break;
       case 1: console.log("change, 使用者輸入的是數字1"); break;
       default: console.log("使用者輸入的是數字非0和1");
  }
   // default分支, 出現在所有case之下, 當所有case沒有匹配上, 走該分支,
   // 該分支也可以省略, 代表沒有未匹配到的動作

   // switch()中的表示式結果為 整型 或 字串, case的值要與其對應

   // break作用是結束分支結構(結束所屬switch語句), 可以省略

   var month = +prompt("請輸入月份");
   switch (month) {
       case 1: case 3: case 5: case 7: case 8: case 10:  case 12:
           console.log("%d月天數為31天", month); break;
       case 4: case 6: case 9: case 11:
           console.log("%d月天數為30天", month); break;
       case 2:
           console.log("%d月天數為28天", month);
  }
   
</script>
</html>

四.1分支結構(迴圈結構)


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>迴圈結構</title>
</head>
<body>
迴圈結構
</body>
<script>
   /* 迴圈
  py
  while 條件表示式:
      程式碼塊;

  js
  while (條件表示式) {
      程式碼塊;
  }
    */

   var count = 0;
   while (count < 5) {
       console.log("我最棒, 我最帥, 我是天下第一!");
       count++;
  }

   // for迴圈
   /*
  for (迴圈變數定義並初始化①; 迴圈變數條件表示式②; 迴圈變數增量③) {
      程式碼塊④;
  }
  執行順序 ① ②④③ ... ②④③ ②, ②④③個數就是迴圈次數
    */

   for (var i = 0; i < 5; i++) {
       console.log("我最棒, 我最帥, 我是天下第一!");
  }

   // 所有for迴圈可以解決的問題, 都可以由while來解決
   // while迴圈可以解決不明確迴圈次數的迴圈需求

   // break: 結束當前所屬迴圈體
   // continue: 結束本次迴圈,進入下一次迴圈

   for (var i = 0; i < 5; i++) {
       if (i == 3) break;
       console.log(i);  // 0, 1, 2
  }
   for (var i = 0; i < 5; i++) {
       if (i == 3) continue;
       console.log(i);  // 0, 1, 2, 4
  }

   // do...while迴圈
   // 無論條件是否滿足, 都需要執行一次迴圈體 (迴圈體只是要被執行一次)
   var num = 0;
   do {
       console.log("我最棒, 我最帥, 我是天下第一!");
       num++;
  } while (num < 5);  // 當條件滿足時, 返回迴圈體



</script>
</html>

五異常處理


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>異常處理</title>
</head>
<body>
異常處理
</body>
<script>
   // 瞭解
   let num = 10;
   try {
       console.log(num);  // try...catch捕獲的是runtime時的異常
       let num = 20;
  } catch (e) {
       console.log(e)  // catch為處理異常的分支
  } finally {
       console.log('無論是否出現異常,該分支都會被執行')
  }
</script>
<script>
   console.log(num)
</script>
</html>

六函式


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>函式</title>
</head>
<body>
</body>
<script>
   // 什麼函式: 具有特定功能的程式碼塊
   // 函式與方法: 呼叫方式的不同 函式通過函式名 | 方法通過呼叫者.語法呼叫
   // 如何定義函式:
   /*
  function 函式名(引數列表) {
      函式體;
      (函式體可以包含函式的返回值)
  }
  */
   // 函式的呼叫: 函式名(引數列表)
   //     函式的呼叫()一定不可以省略, 引數列表看情況(不管需不需要,均可以傳或不傳)
   // 函式的分類:
   // 無參函式:
   function fn1() {
       console.log("無參函式")
  }
   fn1();
   // 有參函式:
   function fn2(a, b) {
       console.log("a,b的和:", a + b)
  }
   fn2(10, 20);
   // 匿名函式:
   var fn3 = function () {
       // 匿名函式雖然沒有名字, 但會開闢記憶體空間, 所以當然可以用一個變數來指向這個記憶體空間
       console.log("沒有直接定義名字的函式");
  };
   fn3();  // 系統不好在()()之間新增;作為語句結束,需要新增分號時一定需要手動新增
   fn4 = fn3;
   fn4();
   // 匿名函式的自呼叫
  (function () {
       // 定義一個匿名函式, 至少需要使用一次, 使用一次的方式就叫做 匿名函式的自呼叫
       // 如果匿名函式不存在任何使用, 編譯就無法通過
       // 匿名函式的自呼叫:
       //     1.將整個匿名函式作為一個整體, 用()將其包裹
       //     2.並完成函式的呼叫, 新增 (引數列表)
       console.log(" 匿名函式的自呼叫");
  })();

   // 函式的引數:
   function func1() {
       console.log("無參");
  }
   // 均可以呼叫
   func1();
   func1(10, 20);

   function func2(a, b) {
       console.log(">>>", a + b);
  }
   func2()
   func2(10)
   func2(10, 20)