1 - 運算子（操作符）

1.1 運算子的分類

運算子（operator）也被稱為操作符，是用於實現賦值、比較和執行算數運算等功能的符號。

JavaScript中常用的運算子有：

• 算數運算子
• 遞增和遞減運算子
• 比較運算子
• 邏輯運算子
• 賦值運算子

1.2 算數運算子

• 算術運算子概述

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

• 浮點數的精度問題

  浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數。

  var result = 0.1 + 0.2;    // 結果不是 0.3，而是：0.30000000000000004
  console.log(0.07 * 100);   // 結果不是 7，  而是：7.000000000000001
   
  

  所以：不要直接判斷兩個浮點數是否相等 !

• 表示式和返回值

  表示式：是由數字、運算子、變數等以能求得數值的有意義排列方法所得的組合

  簡單理解：是由數字、運算子、變數等組成的式子

  表示式最終都會有一個結果，返回給開發者，稱為返回值

1.3 遞增和遞減運算子

• 遞增和遞減運算子概述

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

    在 JavaScript 中，遞增（++）和遞減（ -- ）既可以放在變數前面，也可以放在變數後面。放在變數前面時，我們可以稱為前置遞增（遞減）運算子，放在變數後面時，我們可以稱為後置遞增（遞減）運算子。
  
    注意：遞增和遞減運算子必須和變數配合使用。 
   
  

• 遞增運算子

  • 前置遞增運算子

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

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

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

  • 後置遞增運算子

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

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

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

1.4 比較運算子

• 比較運算子概述

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

• 等號比較

  console.log(18 == '18');
  console.log(18 === '18'); 
  

1.5 邏輯運算子

• 邏輯運算子概述

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

• 邏輯與&&

  兩邊都是 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 賦值運算子

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

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

1.7 運算子優先順序

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

2 - 流程控制

2.1 流程控制概念

在一個程式執行的過程中，各條程式碼的執行順序對程式的結果是有直接影響的。很多時候我們要通過控制程式碼的執行順序來實現我們要完成的功能。

簡單理解：**流程控制就是來控制程式碼按照一定結構順序來執行**

流程控制主要有三種結構，分別是**順序結構**、**分支結構**和**迴圈結構**，代表三種程式碼執行的順序。

2.2 順序流程控制

​

​ 順序結構是程式中最簡單、最基本的流程控制，它沒有特定的語法結構，程式會按照程式碼的先後順序，依次執行，程式中大多數的程式碼都是這樣執行的。
​

2.3 分支流程控制

• 分支結構

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

  JS 語言提供了兩種分支結構語句：if 語句、switch 語句

• if 語句

  • 語法結構

  // 條件成立執行程式碼，否則什麼也不做
  if (條件表示式) {
      // 條件成立執行的程式碼語句
  }
  

  語句可以理解為一個行為，迴圈語句和分支語句就是典型的語句。一個程式由很多個語句組成，一般情況下，會分割成一個一個的語句。

  • 執行流程

• if else語句（雙分支語句）

  • 語法結構

    // 條件成立  執行 if 裡面程式碼，否則執行else 裡面的程式碼
    if (條件表示式) {
        // [如果] 條件成立執行的程式碼
    } else {
        // [否則] 執行的程式碼
    }
    
    

  • 執行流程

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

  • 語法結構

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

  • 執行邏輯

2.4 三元表示式

• 語法結構

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

• 執行思路

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

2.5 switch分支流程控制

• 語法結構

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

  switch( 表示式 ){ 
      case value1:
          // 表示式 等於 value1 時要執行的程式碼
          break;
      case value2:
          // 表示式 等於 value2 時要執行的程式碼
          break;
      default:
          // 表示式 不等於任何一個 value 時要執行的程式碼
  }
  

  • 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語句的執行效率比較高，而且結構更清晰。

3 - 迴圈

1.1 for迴圈

• 語法結構

  for 迴圈主要用於把某些程式碼迴圈若干次，通常跟計數有關係。其語法結構如下：

  for(初始化變數; 條件表示式; 操作表示式 ){
      //迴圈體
  }
  

  執行過程：

  1. 初始化變數，初始化操作在整個 for 迴圈只會執行一次。
  2. 執行條件表示式，如果為true，則執行迴圈體語句，否則退出迴圈，迴圈結束。
  3. 執行操作表示式，此時第一輪結束。
  4. 第二輪開始，直接去執行條件表示式（不再初始化變數），如果為 true ，則去執行迴圈體語句，否則退出迴圈。
  5. 繼續執行操作表示式，第二輪結束。
  6. 後續跟第二輪一致，直至條件表示式為假，結束整個 for 迴圈。

  斷點除錯：

斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式執行到這一行就會停住，然後你可以一步一步往下除錯，除錯過程中可以看各個變數當前的值，出錯的話，除錯到出錯的程式碼行即顯示錯誤，停下。

斷點除錯可以幫助觀察程式的執行過程

瀏覽器中按 F12--> sources -->找到需要除錯的檔案-->在程式的某一行設定斷點

Watch: 監視，通過watch可以監視變數的值的變化，非常的常用。

F11: 程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化。

• for 迴圈重複相同的程式碼

  for迴圈可以重複相同的程式碼 ，比如我們要輸出10句“媳婦我錯了”

  //  基本寫法
  for(var i = 1; i <= 10; i++){
      console.log('媳婦我錯了~');
  }
  // 使用者輸入次數
  var num = prompt('請輸入次數:')；
  for ( var i = 1 ; i <= num; i++) {
      console.log('媳婦我錯了~');
  } 
  

• for 迴圈重複不相同的程式碼

  for 迴圈還可以重複不同的程式碼，這主要是因為使用了計數器 ，計數器在每次迴圈過程中都會有變化。

  例如，求輸出1到100歲：

  //  基本寫法
  for (var i = 1; i <= 100; i++) {
        console.log('這個人今年' + i + '歲了');
  }
  

  例如，求輸出1到100歲，並提示出生、死亡

  // for 裡面是可以新增其他語句的 
  for (var i = 1; i <= 100; i++) {
   if (i == 1) {
      console.log('這個人今年1歲了， 它出生了');
   } else if (i == 100) {
      console.log('這個人今年100歲了，它死了');
    } else {
         console.log('這個人今年' + i + '歲了');
    }
  }
  

  for迴圈因為有了計數器的存在，還可以重複的執行某些操作，比如做一些算術運算。

1.2 雙重for迴圈

• 雙重 for 迴圈概述

  迴圈巢狀是指在一個迴圈語句中再定義一個迴圈語句的語法結構，例如在for迴圈語句中，可以再巢狀一個for 迴圈，這樣的 for 迴圈語句我們稱之為雙重for迴圈。

• 雙重 for 迴圈語法

  for (外迴圈的初始; 外迴圈的條件; 外迴圈的操作表示式) {
      for (內迴圈的初始; 內迴圈的條件; 內迴圈的操作表示式) {  
         需執行的程式碼;
     }
  }
  

  • 內層迴圈可以看做外層迴圈的語句
  • 內層迴圈執行的順序也要遵循 for 迴圈的執行順序
  • 外層迴圈執行一次，內層迴圈要執行全部次數

• 列印五行五列星星

  var star = '';
  for (var j = 1; j <= 3; j++) {
      for (var i = 1; i <= 3; i++) {
        star += '☆'
      }
      // 每次滿 5個星星 就 加一次換行
      star += '\n'
  }
  console.log(star);
  

  核心邏輯：

  1.內層迴圈負責一行列印五個星星

  2.外層迴圈負責列印五行

• for 迴圈小結

  • for 迴圈可以重複執行某些相同程式碼
  • for 迴圈可以重複執行些許不同的程式碼，因為我們有計數器
  • for 迴圈可以重複執行某些操作，比如算術運算子加法操作
  • 隨著需求增加，雙重for迴圈可以做更多、更好看的效果
  • 雙重 for 迴圈，外層迴圈一次，內層 for 迴圈全部執行
  • for 迴圈是迴圈條件和數字直接相關的迴圈

1.3 while迴圈

while 語句可以在條件表示式為真的前提下，迴圈執行指定的一段程式碼，直到表示式不為真時結束迴圈。
while語句的語法結構如下：

while (條件表示式) {
    // 迴圈體程式碼 
}

**執行思路**：

• 先執行條件表示式，如果結果為 true，則執行迴圈體程式碼；如果為 false，則退出迴圈，執行後面程式碼

• 執行迴圈體程式碼

• 迴圈體程式碼執行完畢後，程式會繼續判斷執行條件表示式，如條件仍為true，則會繼續執行迴圈體，直到迴圈條件為 false 時，整個迴圈過程才會結束

  注意：

• 使用 while 迴圈時一定要注意，它必須要有退出條件，否則會成為死迴圈

• while 迴圈和 for 迴圈的不同之處在於 while 迴圈可以做較為複雜的條件判斷，比如判斷使用者名稱和密碼

1.4 do-while迴圈

do... while 語句其實是 while 語句的一個變體。該迴圈會先執行一次程式碼塊，然後對條件表示式進行判斷，如果條件為真，就會重複執行迴圈體，否則退出迴圈。
do... while 語句的語法結構如下：

do {
    // 迴圈體程式碼 - 條件表示式為 true 時重複執行迴圈體程式碼
} while(條件表示式);

**執行思路**：

• 先執行一次迴圈體程式碼

• 再執行條件表示式，如果結果為 true，則繼續執行迴圈體程式碼，如果為 false，則退出迴圈，繼續執行後面程式碼

  注意：先再執行迴圈體，再判斷，do…while迴圈語句至少會執行一次迴圈體程式碼

• 1.5 continue、break

  continue 關鍵字用於立即跳出本次迴圈，繼續下一次迴圈（本次迴圈體中 continue 之後的程式碼就會少執行一次）。

  例如，吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子，其程式碼實現如下：

   for (var i = 1; i <= 5; i++) {
       if (i == 3) {
           console.log('這個包子有蟲子，扔掉');
           continue; // 跳出本次迴圈，跳出的是第3次迴圈 
        }
        console.log('我正在吃第' + i + '個包子呢');
   }
  

  執行結果：

break 關鍵字用於立即跳出整個迴圈（迴圈結束）。

例如，吃5個包子，吃到第3個發現裡面有半個蟲子，其餘的不吃了，其程式碼實現如下：

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整個for 迴圈，跳到整個for下面的語句
   }
   console.log('我正在吃第' + i + '個包子呢');
 }

執行結果：

4 - 程式碼規範

2.1 識別符號命名規範

• 變數、函式的命名必須要有意義
• 變數的名稱一般用名詞
• 函式的名稱一般用動詞

2.2 操作符規範

// 操作符的左右兩側各保留一個空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整個 for 迴圈，跳到整個for迴圈下面的語句
   }
   console.log('我正在吃第' + i + '個包子呢');
}

2.3 單行註釋規範

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 單行註釋前面注意有個空格
   }
   console.log('我正在吃第' + i + '個包子呢');
}

2.4 其他規範

關鍵詞、操作符之間後加空格