当前位置：首页 > news >正文

JS分支和循环

news 来源：原创 2025/6/2 17:00:22

程序的执行顺序

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

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>