程序的執行順序

在程序開發中，程序有三種不同的執行順序

1.順序執行

2.分支執行

3.循環執行

程序的代碼塊

  <script>//一個代碼塊{var num1=1var num2=2var num3=num1+num2}//一個休想var info={name:"chen",age:18}

1.if分支語句（單分支語句）

if(條件){

}

如果條件成立執行代碼塊

補充一：如果代碼塊中只有一句語句，可以省略大括號

補充二：if（...）語句會計算圓括號的表達式，并將結果轉換為布爾型（Boolean）

轉換規則和Boolean函數的規則一樣

數字0、空字符串“”、null、undefined和NaN都會被轉換成fasle

? 因為它們被稱為“假值”

其他值被轉換成true，所以它們被稱為“真值（truthy）”

2.if...else語句?

if（條件）{}

else{}

3.if-else if-else語句

此結構能對多個條件進行判斷，一旦某個條件為真，就會執行對應的代碼塊。

?

javascript

let score = 85;if (score >= 90) {console.log("成績為 A");
} else if (score >= 80) {console.log("成績為 B");
} else if (score >= 70) {console.log("成績為 C");
} else if (score >= 60) {console.log("成績為 D");
} else {console.log("成績為 F");
}
// 輸出：成績為 B

?

執行流程：

?

• 先判斷?if?條件，若為?true，則執行對應的代碼塊，之后跳出整個?if?結構。
• 若?if?條件為?false，就接著判斷第一個?else if?條件，若為?true?則執行其代碼塊并跳出。
• 若所有?else if?條件都為?false，且存在?else?塊，就會執行?else?塊中的代碼。

?4.三元運算符?

基本語法

javascript

條件表達式 ? 表達式1 : 表達式2;

?

執行邏輯：

?

• 先對?條件表達式?進行求值。
• 若結果為?true，則整個三元運算符返回?表達式1?的值。
• 若結果為?false，則返回?表達式2?的值。

基礎示例

javascript

// 判斷一個數是奇數還是偶數
let num = 6;
let result = num % 2 === 0 ? "偶數" : "奇數";
console.log(result); // 輸出：偶數// 根據年齡判斷是否成年
let age = 17;
let isAdult = age >= 18 ? "已成年" : "未成年";
console.log(isAdult); // 輸出：未成年

嵌套使用

三元運算符可以嵌套使用，從而實現更復雜的條件判斷。

?

javascript

// 根據分數給出對應的等級
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : score >= 60 ? "D" : "F";console.log(grade); // 輸出：B

?

注意：雖然三元運算符嵌套能讓代碼更簡潔，但要是嵌套層次過多，代碼的可讀性就會變差。一般嵌套不要超過兩層。

?

    <script>//案例一：var num1=1var num2=2var result=num1>num2?num1:num2console.log(result)//案例二：給變量賦一個默認值var info={name:"chen"}var obj=info?info:{}console.log(obj)//案例三：讓用戶輸入一個年齡，判斷是否是成年人var age=prompt("請輸入你的年齡")age=Number(age)// if(age>=18){//   alert("成年人")// }else{//   alert("未成年人")// }var message=alert(age>=18?"成年人":"未成年人")</script>

?

5.邏輯運算符?

1. 邏輯與（&&）

語法：表達式1 && 表達式2
執行規則：

• 若?表達式1?的值為?false，則直接返回?表達式1?的值，不會對?表達式2?進行計算。
• 若?表達式1?的值為?true，則返回?表達式2?的值。

示例：

javascript

console.log(true && true);   // 輸出：true
console.log(true && false);  // 輸出：false
console.log(false && true);  // 輸出：false（短路求值）
console.log(false && 0);     // 輸出：false（不會計算0）// 非布爾值的情況
console.log(5 && "hello");   // 輸出："hello"
console.log(null && "test"); // 輸出：null（短路求值）

常見用途：

• 條件判斷：檢查多個條件是否同時成立。

  javascript

  const age = 25;
  const hasLicense = true;
  if (age >= 18 && hasLicense) {console.log("可以開車"); // 會執行
  }
  

• 短路求值：避免在條件不滿足時執行某些操作。

  javascript

  const user = { name: "張三" };
  // 若user存在才訪問name屬性
  console.log(user && user.name); // 輸出："張三"
  

2. 邏輯或（||）

語法：表達式1 || 表達式2
執行規則：

• 若?表達式1?的值為?true，則直接返回?表達式1?的值，不計算?表達式2。
• 若?表達式1?的值為?false，則返回?表達式2?的值。

示例：

javascript

console.log(true || true);   // 輸出：true（短路求值）
console.log(true || false);  // 輸出：true（短路求值）
console.log(false || true);  // 輸出：true
console.log(false || 0);     // 輸出：0// 非布爾值的情況
console.log("" || "默認值");  // 輸出："默認值"
console.log(0 || null);      // 輸出：null

常見用途：

• 設置默認值：當變量的值為假值（如?null、undefined）時，使用默認值。

  javascript

  const username = null;
  const displayName = username || "訪客";
  console.log(displayName); // 輸出："訪客"
  

• 多重條件檢查：只要有一個條件滿足即可。

  javascript

  const day = "周六";
  if (day === "周六" || day === "周日") {console.log("周末愉快"); // 會執行
  }
  

3. 邏輯非（!）

語法：!表達式
執行規則：

• 對?表達式?的值進行取反操作，將其轉換為布爾值后再取反。

示例：

javascript

console.log(!true);    // 輸出：false
console.log(!false);   // 輸出：true
console.log(!0);       // 輸出：true（0被視為false）
console.log(!"");      // 輸出：true（空字符串被視為false）
console.log(!null);    // 輸出：true
console.log(!undefined); // 輸出：true
console.log(!5);       // 輸出：false（非零數字被視為true）
console.log(!"hello"); // 輸出：false

常見用途：

• 條件取反：反轉某個條件的判斷結果。

  javascript

  const isLoggedIn = false;
  if (!isLoggedIn) {console.log("請先登錄"); // 會執行
  }
  

• 強制轉換為布爾值：使用兩個?!!?可以將值強制轉換為布爾類型。

  javascript

  console.log(!!"hello"); // 輸出：true
  console.log(!!0);      // 輸出：false
  

4. 優先級與結合性

• 優先級：!?的優先級高于?&&，&&?的優先級高于?||。

  javascript

  // 等價于 (true && false) || true
  console.log(true && false || true); // 輸出：true
  

• 結合性：&&?和?||?都是左結合的，即從左到右進行計算。

  javascript

  // 等價于 ((a && b) && c)
  a && b && c;
  

5. 短路求值（Short-circuit Evaluation）

邏輯與（&&）和邏輯或（||）都具有短路特性，即一旦結果確定，就不再計算后續表達式。

• &&?的短路：若左側為?false，右側表達式不會執行。

  javascript

  let x = 5;
  false && (x = 10);
  console.log(x); // 輸出：5（右側賦值未執行）
  

• ||?的短路：若左側為?true，右側表達式不會執行。

  javascript

  let y = 3;
  true || (y = 7);
  console.log(y); // 輸出：3（右側賦值未執行）
  

6. 實際應用示例

javascript

// 示例1：檢查對象屬性是否存在并使用
const user = { profile: { email: "test@example.com" } 
};// 安全訪問嵌套屬性
const email = user && user.profile && user.profile.email;
console.log(email); // 輸出："test@example.com"// 示例2：函數參數的默認值（ES5方式）
function greet(name) {name = name || "朋友"; // 若name為假值，則使用默認值console.log(`你好，${name}！`);
}greet();        // 輸出："你好，朋友！"
greet("張三");  // 輸出："你好，張三！"

7. 注意事項

• 非布爾值的處理：邏輯運算符會將操作數轉換為布爾值進行計算，但返回的是原始值，而非布爾值。

  javascript

  console.log(5 || 10); // 輸出：5（而非true）
  

• 與位運算符的區別：邏輯運算符（&&、||）處理的是布爾值，而位運算符（&、|）處理的是二進制位。

  javascript

  // 邏輯與
  console.log(true && false); // 輸出：false// 位與（將值轉換為32位整數后按位與）
  console.log(5 & 3); // 輸出：1（二進制：0101 & 0011 = 0001）
  

掌握這些邏輯運算符的使用方法后，你就能在 JavaScript 中構建更復雜、更靈活的條件表達式了。

?閱讀文章（邏輯或本質/邏輯與本質）的前提說明：注意在文章下面提到的運算元不是一個單個的運算元，是一整個表達式（||的左面或者右面的表達式）

5.1邏輯或的本質?

||（或）兩個豎線符號表示“或”運算符（也成為短路或）

result=a||b

從左到右依次計算操作符

處理每一個操作數的時候，都將其轉化成布爾值（Boolean）

如果結果是true，就停止計算，返回這個操作數的初始值

如果所有的操作數都被計算過（也就是，轉換結果都是false），則返回最后一個操作數

    <script>//脫離分支語句，單獨使用邏輯或/*1.先將運算元轉換成Booleanleix2.對轉成的boolean類型進行判斷如果為true，直接將結果（元類型）返回如果為false，進行第二個運算元的判斷以此類推3.如果找到最后，也沒有找到，那么返回最后一個運算元*///本質推導一：之前的多條件是如何進行判斷的var chineseScore=95var mathScore=90//chineseScore>90 為true ，那么后續的條件都不會進行判斷if(chineseScore>90|| mathScore>90){}//本質推導二：獲取第一個有值的結果var info="abc"var obj={name:"chen"}var message=info||obj||"我是默認值"console.log(message.length)</script>

?5.2邏輯與的本質

    <script>// 運算元1&&運算元2&&運算元3/*也可以脫離條件判斷來使用邏輯與的本質1.拿到第一個運算元，將運算元轉成Booleanleix2.對運算元的Boolean類型進行判斷如果false，返回運算元（原始值）如果true，查找下一個繼續來運算以此類推3.如果查找了所有的都為true，那么返回最后一個運算元（原始值）*///  本質推導一：邏輯與，稱之為短路與var chineseScore=95var mathScore=99if(chineseScore>90&&mathScore>90){}//本質推導二：對一些屬性（對象中的方法）進行有值判斷var obj={name:"chen",friend:{name:"wei",eating:function(){console.log("eat something")}}}//調用eating函數//obj.friend.eating()obj&&obj.friend&&obj.friend&&obj.friend.eating&&obj.friend.eating()</script>

5.3邏輯非的補充?

邏輯非運算符接收一個參數，并且按照如下進行運算：

步驟一：將操作數轉化為布爾類型：true/false

步驟二：返回相反的值

兩個非運算！！有時候用來將某個值轉化為布爾類型

也就是，第一個非運算將該值轉化為布爾類型并且取反，第二個非運算再次取反

最后我們就得到了一個任意值到布爾值的轉化

    <script>var message="Hello World"//console.log(Boolean(message))// 將一個值轉化為布爾值的另一個做法console.log(!!message)</script>

6.switch語句?

?switch是分支結構的一種語句：

它是通過判斷表達式的結果（或者變量）是否等于case語句的常量，來執行相應的分支體的

與if語句不同的是，switch語句只能做值的相等判斷（使用全等運算符===），而if語句可以做值的范圍判斷；

switch的語法：

switch語句有至少一個case代碼塊和一個可選的default代碼塊

switch(變量){

? case 常量1：

? //語句一

? break

? case 常量2：

? //語句二

? break

? default：

? //語句三

}

switch語句的補充

case穿透問題：

一條case語句結束后，會自動執行下一個case的語句

這種現象被稱之為case穿透

break關鍵字

通過在每個case的代碼塊后添加break關鍵字來解決這個問題

注意事項：這里的相等是嚴格相等

被比較的值必須是相同的類型才能進行匹配?

    <script>//案例//上一首的按鈕：0//播放/暫停的按鈕：1//下一首的按鈕：2// var btnIndex=0// if(btnIndex === 0){//   console.log("點擊了上一首")// }else if(btnIndex===1){//   console.log("點擊了播放/暫停")// }else if(btnIndex===2){//   console.log("點擊了下一首")// }else{//   console.log("當前按鈕的索引有問題")// }//默認情況下是由case穿透的：使用break解決這個問題switch(btnIndex){case 0:console.log("點擊了上一首")breakcase 1:console.log("點擊了播放暫停")breakcase 3:console.log("點擊了下一首")breakdefault:console.log("當前按鈕的索引有問題")}</script>

?