程序的执行顺序

在程序开发中，程序有三种不同的执行顺序

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>