js基礎第二天

1.2 算數運算子

• 算術運算子概述

  概念：算術運算使用的符號，用於執行兩個變數或值的算術運算。

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-RI31lGoL-1605489975584)(E:/長沙黑馬/03-JavaScript基礎 - 程式碼和作業/JavaScript基礎第02天/5-筆記/images/圖片1.png)]

1.3 遞增和遞減運算子

遞增和遞減運算子概述

如果需要反覆給數字變數新增或減去1，可以使用遞增（++）和遞減（ – ）運算子來完成。

在 JavaScript 中，遞增（++）和遞減（ -- ）既可以放在變數前面，也可以放在變數後面。放在變數前面時，我們可以稱為前置遞增（遞減）運算子，放在變數後面時，我們可以稱為後置遞增（遞減）運算子。

• 注意：遞增和遞減運算子必須和變數配合使用。

• 遞增運算子

  • 前置遞增運算子

    ++num 前置遞增，就是自加1，類似於 num = num + 1，但是 ++num 寫起來更簡單。

    使用口訣：先自加，後返回值

    ++i 前置 先自加再運算

    i++ 後置 先運算在自加 （先返回值，再自加）

    var  num = 10;
    alert(++num + 10);   // 21
    

    1.4 比較運算子

    • 比較運算子概述

      概念：比較運算子（關係運算子）是兩個資料進行比較時所使用的運算子，比較運算後，會返回一個布林值（true / false）作為比較運算的結果。

      [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-Iz2dtEYK-1605489975589)(E:/長沙黑馬/03-JavaScript基礎 - 程式碼和作業/JavaScript基礎第02天/5-筆記/images/圖片2.png)]

    • 等號比較

      [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-ZjeSdt1x-1605489975592)(E:/長沙黑馬/03-JavaScript基礎 - 程式碼和作業/JavaScript基礎第02天/5-筆記/images/圖片3.png)]

1.5 邏輯運算子

• 邏輯運算子概述

  概念：邏輯運算子是用來進行布林值運算的運算子，其返回值也是布林值。後面開發中經常用於多個條件的判斷

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-lAuN0PQ0-1605489975595)(E:/長沙黑馬/03-JavaScript基礎 - 程式碼和作業/JavaScript基礎第02天/5-筆記/images/圖片4.png)]

• 邏輯與&&

  兩邊都是 true才返回 true，否則返回 false

  ​

  ​

• 邏輯或 ||

  兩邊都是 true才返回 true，否則返回 false

  ​

  ​

• 邏輯非 ！

  邏輯非（!）也叫作取反符，用來取一個布林值相反的值，如 true 的相反值是 false

  var isOk = !true;
  console.log(isOk);  // false
  

• 短路運算（邏輯中斷）

  短路運算的原理：當有多個表示式（值）時,左邊的表示式值可以確定結果時,就不再繼續運算右邊的表示式的值;

  • 邏輯與

    語法： 表示式1 && 表示式2

    邏輯運算子

    與 && 同時滿足兩個條件才為真

    或 || 兩個條件只要有一個條件為真 結果為真

    非 ！ 取反

    - 如果第一個表示式的值為真，則返回表示式2
    
    - 如果第一個表示式的值為假，則返回表示式1
    

    console.log( 123 && 456 );        // 456
    console.log( 0 && 456 );          // 0
    console.log( 123 && 456&& 789 );  // 789
    

  • 邏輯或

    語法： 表示式1 || 表示式2

    - 如果第一個表示式的值為真，則返回表示式1
    
    - 如果第一個表示式的值為假，則返回表示式2
    

    console.log( 123 || 456 );         //  123
    console.log( 0 ||  456 );          //  456
    console.log( 123 || 456 || 789 );  //  123
    

1.6 賦值運算子

概念：用來把資料賦值給變數的運算子。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-dbhRiYJ3-1605489975598)(E:/長沙黑馬/03-JavaScript基礎 - 程式碼和作業/JavaScript基礎第02天/5-筆記/images/圖片9.png)]

var age = 10;
age += 5;  // 相當於 age = age + 5;
age -= 5;  // 相當於 age = age - 5;
age *= 10; // 相當於 age = age * 10;

1.7 運算子優先順序

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-0QSY1U70-1605489975601)(E:/長沙黑馬/03-JavaScript基礎 - 程式碼和作業/JavaScript基礎第02天/5-筆記/images/圖片10.png)]

• 一元運算子裡面的邏輯非優先順序很高
• 邏輯與比邏輯或優先順序高

1.8 賦值運算子

概念：用來把資料賦值給變數的運算子。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-ILf65ROn-1605489975604)(E:/長沙黑馬/03-JavaScript基礎 - 程式碼和作業/JavaScript基礎第02天/5-筆記/images/圖片9.png)]

var age = 10;
age += 5;  // 相當於 age = age + 5;
age -= 5;  // 相當於 age = age - 5;
age *= 10; // 相當於 age = age * 10;

2.3 分支流程控制

• 分支結構

  由上到下執行程式碼的過程中，根據不同的條件，執行不同的路徑程式碼（執行程式碼多選一的過程），從而得到不同的結果

if 語句

• 語法結構

  // 條件成立執行程式碼，否則什麼也不做
  if (條件表示式) {
      // 條件成立執行的程式碼語句
  }
  
   if (2 < 3) {
              alert('判斷正確 正常執行')
          }
  

  if else if 語句(多分支語句)

  • 語法結構

// 適合於檢查多重條件。
if (條件表示式1) {
    語句1；
} else if (條件表示式2)  {
    語句2；
} else if (條件表示式3)  {
   語句3；
 ....
} else {
    // 上述條件都不成立執行此處程式碼
}

2.4 三元表示式

• 語法結構

  表示式1 ? 表示式2 : 表示式3;
  

•  <script>
          var str = 10;
          var s = str > 5 ? '是的' : '不是的'; //知道表示式是有返還至的
          alert(s)
      </script>
  

• 執行思路

  • 如果表示式1為 true ，則返回表示式2的值，如果表示式1為 false，則返回表示式3的值
  • 簡單理解： 就類似於 if else （雙分支） 的簡寫

  2.5 switch分支流程控制

  • 語法結構

    switch 語句也是多分支語句，它用於基於不同的條件來執行不同的程式碼。當要針對變數設定一系列的特定值的選項時，就可以使用 switch。

     <script>
            var str = prompt('請你輸入你需要的水果')
    
            switch (str) {
                case '香蕉':
                    alert('香蕉價格3.5一斤');
                    break;
                case '榴蓮':
                    alert('榴蓮價格69一斤');
                    break;
    
                default:
                    alert('沒有這個水果')
            }
        </script>
    

    • switch ：開關 轉換 ， case ：小例子 選項

    • 關鍵字 switch 後面括號內可以是表示式或值， 通常是一個變數

    • 關鍵字 case , 後跟一個選項的表示式或值，後面跟一個冒號

    • switch 表示式的值會與結構中的 case 的值做比較

    • 如果存在匹配全等(===) ，則與該 case 關聯的程式碼塊會被執行，並在遇到 break 時停止，整個 switch 語句程式碼執行結束

    • 如果所有的 case 的值都和表示式的值不匹配，則執行 default 裡的程式碼

      注意： 執行case 裡面的語句時，如果沒有break，則繼續執行下一個case裡面的語句。

    • switch 語句和 if else if 語句的區別

      • 一般情況下，它們兩個語句可以相互替換
      • switch…case 語句通常處理 case為比較確定值的情況， 而 if…else…語句更加靈活，常用於範圍判斷(大於、等於某個範圍)
      • switch 語句進行條件判斷後直接執行到程式的條件語句，效率更高。而if…else 語句有幾種條件，就得判斷多少次。
      • 當分支比較少時，if… else語句的執行效率比 switch語句高。
      • 當分支比較多時，switch語句的執行效率比較高，而且結構更清晰。