# JavaScript入门必学3：if条件判断核心逻辑——比较运算符与逻辑运算符详解 ## 开篇：点外卖时的「隐形判断」，你每天都在做 想象你晚上点外卖，页面显示「预计30分钟送达」。你心里会默默做几个判断： - 「现在已经7点了，30分钟后是7:30，还没到睡觉时间」→ 可以下单 - 「如果下雨的话，配送时间可能延长到45分钟」→ 需要看天气 这些「如果…就…」「不…就…」的思考过程，在JavaScript中就是**条件判断**。而支撑这些判断的核心工具，就是今天要学的「比较运算符」和「逻辑运算符」。学会它们，你就能让代码像人一样「做决策」。 --- ## 一、比较运算符：给数据「打分数」 比较运算符的作用是**比较两个值的大小、是否相等**，并返回一个「布尔值」（`true` 或 `false`），就像老师给学生作业打「√」或「×」。 ### 1. 最常用的6个比较符 | 运算符 | 名称 | 作用 | 示例（a=5, b=3） | 结果 | |--------|------------|----------------------|------------------|-------| | `>` | 大于 | 左边值 > 右边值 | `a > b` | true | | `<` | 小于 | 左边值 < 右边值 | `a =` | 大于等于 | 左边值 ≥ 右边值 | `a >= b` | true | | `<=` | 小于等于 | 左边值 ≤ 右边值 | `a = 90) { console.log("A"); } else if (score >= 80) { // 等价于 score >=80 且 score = 70) { console.log("C"); } else { console.log("D"); } // 输出：B（因为85≥80且 3)` → false | false | ### 2. 短路特性：聪明的「偷懒」机制 `&&` 和 `||` 有个聪明的「偷懒」特性：**当结果已经确定时，不再计算后续条件**。 - **`&&` 的短路**：如果第一个条件是 `false`，直接返回 `false`，不看第二个条件 ```javascript false && console.log("我不会执行"); // 输出空（因为第一个条件是false） true && console.log("我会执行"); // 输出"我会执行"（第一个条件是true，继续算第二个） ``` - **`||` 的短路**：如果第一个条件是 `true`，直接返回 `true`，不看第二个条件 ```javascript true || console.log("我不会执行"); // 输出空（第一个条件是true） false || console.log("我会执行"); // 输出"我会执行"（第一个条件是false，继续算第二个） ``` 这个特性可以用来简化代码，比如设置默认值： ```javascript // 如果userName是空字符串（falsy），就用"游客"作为默认值 let userName = ""; let displayName = userName || "游客"; // 等价于：如果userName为真，用userName；否则用"游客" console.log(displayName); // 输出"游客" ``` ### 3. 组合实战：登录验证功能 假设需要实现一个登录功能，要求： - 密码长度≥6位 - 验证码必须输入（非空） 用逻辑运算符组合条件： ```javascript let password = "12345"; // 用户输入的密码 let captcha = ""; // 用户输入的验证码 // 验证逻辑：密码长度≥6 且 验证码非空 if (password.length >= 6 && captcha !== "") { console.log("登录成功"); } else { console.log("登录失败：密码至少6位，且需输入验证码"); } // 输出："登录失败：密码至少6位，且需输入验证码"（密码只有5位） ``` --- ## 三、常见错误：这些坑新手一定要注意 ### 1. 用 `=` 代替 `===` 做判断 错误示例： ```javascript let isLogin = true; if (isLogin = false) { // 错误！这里用了赋值，不是比较 console.log("未登录"); } ``` 这段代码会把 `isLogin` 的值改成 `false`，然后判断 `false` 是否为「真值」（JavaScript中 `false`、`0`、`""` 等是「假值」），所以不会输出内容。正确写法是用 `===`： ```javascript if (isLogin === false) { // 正确比较 console.log("未登录"); } ``` ### 2. 忽略 `==` 的类型转换规则 比如 `null` 和 `undefined` 在 `==` 下相等，但和其他值比较时容易出错： ```javascript console.log(null == undefined); // true（特殊规则） console.log(null == 0); // false（null不会转数字） console.log(undefined == ""); // false（undefined不会转字符串） ``` **建议**：除非明确知道自己在做什么，否则统一用 `===`。 --- ## 四、练习时间：动手写条件判断 1. **基础题**：判断一个数是否是正偶数（大于0且能被2整除） ```javascript function isPositiveEven(num) { // 你的代码： return num > 0 && num % 2 === 0; } console.log(isPositiveEven(4)); // 应该输出true console.log(isPositiveEven(-2)); // 应该输出false ``` 2. **进阶题**：根据分数输出奖励（90+分奖平板，80+奖耳机，70+奖笔记本，否则鼓励） ```javascript let score = 85; if (score >= 90) { console.log("奖励平板"); } else if (score >= 80) { console.log("奖励耳机"); } else if (score >= 70) { console.log("奖励笔记本"); } else { console.log("继续加油"); } // 输出："奖励耳机" ``` 3. **陷阱题**：预测下面代码的输出结果 ```javascript let a = 0; let result = a || "默认值"; // a是0（假值），所以取"默认值" console.log(result); // 输出"默认值" ``` --- ## 总结：条件判断的核心技能 | 技能点 | 掌握程度检查 | |-----------------|----------------------------------| | 比较运算符 | 能正确使用 `>`、`<`、`===` 等 | | 逻辑运算符 | 会用 `&&`、`||` 组合条件 | | 短路特性 | 理解 `&&` 和 `||` 的「偷懒」逻辑 | | 避免常见错误 | 不会混淆 `=` 和 `===` | 下一步建议：当你能熟练写条件判断后，可以继续学习链接，了解如何用更简洁的语法处理简单条件。 遇到任何疑问，欢迎随时提问！比如："为什么 `0 == ''` 结果是true？" 或 "逻辑或 `||` 怎么设置默认对象？"