JS分支和循环

程序的执行顺序

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

1.顺序执行

2.分支执行

3.循环执行

程序的代码块
html 复制代码
  <script>
    //一个代码块
    {
      var num1=1
      var num2=2
      var 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
注意：虽然三元运算符嵌套能让代码更简洁，但要是嵌套层次过多，代码的可读性就会变差。一般嵌套不要超过两层。
html 复制代码
    <script>
      //案例一：
      var num1=1
      var num2=2
      var result=num1>num2?num1:num2
      console.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），则返回最后一个操作数
html 复制代码
    <script>
      //脱离分支语句，单独使用逻辑或
      /*1.先将运算元转换成Booleanleix
        2.对转成的boolean类型进行判断
          如果为true，直接将结果（元类型）返回
          如果为false，进行第二个运算元的判断
          以此类推
        3.如果找到最后，也没有找到，那么返回最后一个运算元
      */
     //本质推导一：之前的多条件是如何进行判断的
     var chineseScore=95
     var 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逻辑与的本质

html 复制代码

    <script>
      // 运算元1&&运算元2&&运算元3
      /*
      也可以脱离条件判断来使用
      逻辑与的本质
      1.拿到第一个运算元，将运算元转成Booleanleix
      2.对运算元的Boolean类型进行判断
        如果false，返回运算元（原始值）
        如果true，查找下一个继续来运算
        以此类推
      3.如果查找了所有的都为true，那么返回最后一个运算元（原始值）
      */
    //  本质推导一：逻辑与，称之为短路与
    var chineseScore=95
    var mathScore=99
    if(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

步骤二：返回相反的值

两个非运算！！有时候用来将某个值转化为布尔类型

也就是，第一个非运算将该值转化为布尔类型并且取反，第二个非运算再次取反

最后我们就得到了一个任意值到布尔值的转化
html 复制代码
    <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关键字来解决这个问题

注意事项：这里的相等是严格相等

被比较的值必须是相同的类型才能进行匹配
html 复制代码
    <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("点击了上一首")
          break
          case 1:
          console.log("点击了播放暂停")
          break
          case 3:
          console.log("点击了下一首")
          break
          default:
          console.log("当前按钮的索引有问题")
      }
    </script>

1.if分支语句（单分支语句）

2.if...else语句

3.if-else if-else语句

4.三元运算符

基本语法

基础示例

嵌套使用

5.逻辑运算符

1. 逻辑与（`&&`）

2. 逻辑或（`||`）

3. 逻辑非（`!`）

4. 优先级与结合性

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

6. 实际应用示例

7. 注意事项

5.1逻辑或的本质

5.2逻辑与的本质

5.3逻辑非的补充

6.switch语句

JS分支和循环

1.if分支语句（单分支语句）

2.if...else语句

3.if-else if-else语句

4.三元运算符

基本语法

基础示例

嵌套使用

5.逻辑运算符

1. 逻辑与（&&）

2. 逻辑或（||）

3. 逻辑非（!）

4. 优先级与结合性

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

6. 实际应用示例

7. 注意事项

5.1逻辑或的本质

5.2逻辑与的本质

5.3逻辑非的补充

6.switch语句

1. 逻辑与（`&&`）

2. 逻辑或（`||`）

3. 逻辑非（`!`）