JavaScript基础：运算符与流程控制详解

1. 运算符

运算符用于对变量和值执行算术计算、比较或赋值等操作。理解各类运算符的行为及其优先级，是编写正确 JavaScript 代码的关键。

第1步：掌握算术与递增/递减运算

目的：实现变量的数学计算与数值自增自减操作。

入口：基本语法表达式。

动作：

• 算术运算符：包括加 ( + )、减 ( - )、乘 ( * )、除 ( / ) 和取余 ( % )。其中取余运算返回除法后的余数。
• 递增/递减：通过 ++ 和 -- 实现变量加 1 或减 1。分为前置（先运算后取值）和后置（先取值后运算）两种形式。

重要参数：

在计算中，前置递增 ++num 遵循“先自加，后返回值”，而后置递增 num++ 遵循“先返回值原值，后自加”。当它们单独作为一行语句使用时，效果相同；若参与复杂表达式，则结果差异显著。

var num = 10;
// 后置递增：先用原值10参与加法，之后num变为11
alert(num++ + 10); // 输出 20
console.log(num);    // 11

风险提示（浮点数精度）：JavaScript 基于 IEEE 754 双精度浮点数标准，直接进行小数加减乘除可能会产生精度误差。例如 0.1 + 0.2 的结果不是预期的 0.3。因此，尽量避免直接判断两个浮点数是否完全相等，必要时可使用整数运算替代或设置误差容限。

第2步：正确使用比较与逻辑运算符

目的：根据条件真假执行不同路径的代码逻辑。

入口：条件判断表达式。

动作：

• 比较运算符：== 为宽松相等（会自动转换类型进行比较），=== 为严格相等（要求值和类型完全一致）。推荐使用 === 以避免隐式转换带来的隐患。
• 逻辑运算符：&&（与）两侧都为真结果才为真；||（或）只要一侧为真结果即为真；!（非）用于翻转布尔值。

关键现象（短路运算）：在逻辑表达式中，若左侧表达式的值已能确定最终结果，则右侧表达式将不再计算。例如 true || console.log(1) 不会触发打印；而 false || fn() 则会执行函数。这种“逻辑中断”对性能优化和防错处理非常重要。

第3步：应用复合赋值运算符

目的：简化常规的赋值与运算组合步骤。

入口：变量赋值位置。

动作：使用 = 结合算术运算，如 +=、*= 等。例如 a += 5 等价于 a = a + 5。

第4步：遵循运算符优先级规则

目的：确保包含多种运算符的表达式按照预期顺序执行。

动作：当不确定优先级时，最安全的做法是使用圆括号 () 强制指定运算顺序。一般优先级从高到低依次为：() → 一元运算符（! ++ --）→ 算术运算符 → 关系运算符 → 相等运算符 → 逻辑运算符 → 赋值运算符。

2. 流程控制

流程控制决定了代码块的执行顺序。JavaScript 主要提供顺序结构、分支结构和循环结构来实现复杂的业务逻辑。

第5步：构建基本的 if 分支结构

目的：根据单一条件的真假执行对应的语句块。

入口：用户输入或数据状态。

动作：

• 单分支 (if)：仅当条件表达式为 true 时执行大括号内的代码。
• 双分支 (if...else)：条件为真执行第一段代码，否则执行 else 段代码。两者互斥，必执行其一。

var age = prompt('请输入您的年龄');
if (age >= 18) {
    alert('已成年，允许访问');
} else {
    alert('未成年，请回家做作业');
}

完成判断：弹窗会根据输入的年龄准确展示对应的提示语。

第6步：处理多条件选择 (if...else if)

目的：从多个互斥条件中筛选并执行唯一匹配的那一段逻辑。

动作：按从上到下的顺序依次判断条件。一旦某个条件成立，执行对应语句并退出整个 if-else if 链，后续条件不再判断。

var score = prompt('请输入成绩');
if (score >= 90) {
    alert('A 级');
} else if (score >= 80) {
    // 走到这里说明成绩一定小于 90，无需重复判断上限
    alert('B 级');
} else {
    alert('未达标');
}

第7步：使用三元表达式简化简单判断

目的：在不改变执行流的前提下，快速获取一个基于条件的返回值。

动作：语法格式为 条件 ? 表达式1 : 表达式2。如果条件为真，返回表达式 1 的值，否则返回表达式 2 的值。

// 自动补零：若数字小于 10，则在前面拼接 '0'
var time = prompt('请输入时间(0-59)');
var result = time < 10 ? '0' + time : time;
alert(result);

第8步：配置 switch 语句处理精确匹配

目的：当需要针对同一变量的多个特定离散值分别进行处理时，使用 switch 语句比多层 if 更清晰且易于扩展。

入口：待匹配的变量。

动作：

• switch 后面的表达式值会与每一个 case 后的值进行全等 (===) 比较。
• break 关键字必须放在每个 case 的最后，防止“穿透”到下一个 case 继续执行。
• default 用于处理所有 case 均未匹配成功的情况。

var fruit = prompt('请输入水果名称');
switch (fruit) {
    case '苹果':
        alert('价格：3.5元/斤');
        break; // 此处必须有 break，否则会穿透执行榴莲的逻辑
    case '榴莲':
        alert('价格：35元/斤');
        break;
    default:
        alert('暂无此水果信息');
}

注意：if...else 更适合处理范围判断（如大于某个数），而 switch 适用于固定值的精准分发。在处理大量定值分支时，switch 的性能和可读性通常更优。

总结

运算符是构成数据的积木，而流程控制则是指挥这些积木搭建结构的蓝图。熟练掌握浮点数陷阱、短路逻辑以及 if 和 switch 的适用场景，能让你的 JavaScript 代码更加健壮和高效。以上就是JavaScript运算符与流程控制详解的详细内容，更多关于JavaScript入门的资料请关注本站其它相关文章！