JavaScript入门必学3：if条件判断核心逻辑——比较运算符与逻辑运算符详解

开篇：点外卖时的「隐形判断」，你每天都在做

想象你晚上点外卖，页面显示「预计30分钟送达」。你心里会默默做几个判断：

• 「现在已经7点了，30分钟后是7:30，还没到睡觉时间」→ 可以下单
• 「如果下雨的话，配送时间可能延长到45分钟」→ 需要看天气

这些「如果…就…」「不…就…」的思考过程，在JavaScript中就是条件判断。而支撑这些判断的核心工具，就是今天要学的「比较运算符」和「逻辑运算符」。学会它们，你就能让代码像人一样「做决策」。

一、比较运算符：给数据「打分数」

比较运算符的作用是比较两个值的大小、是否相等，并返回一个「布尔值」（true 或 false），就像老师给学生作业打「√」或「×」。

1. 最常用的6个比较符

2. 重点区分 == 和 ===：类型转换的陷阱

新手最容易踩的坑，就是混淆 == 和 ===。我们通过几个例子看区别：

console.log(5 == '5');    // true（数字5和字符串'5'值相等，类型不同）
console.log(0 == false);  // true（0和false在宽松比较中等价）
console.log('' == null);  // false（空字符串和null不相等）
console.log(5 === '5');   // false（类型不同：number vs string）
console.log(0 === false); // false（类型不同：number vs boolean）

⚠️ 为什么推荐用 ===？
== 会自动转换类型，可能导致「看起来对，实际错」的结果。比如：

// 错误场景：用户输入的年龄是字符串'18'，但判断时用了==
let userAge = '18';
if (userAge == 18) {  // 虽然结果是true，但逻辑不严谨
  console.log("已成年");
}

// 正确做法：用===明确要求和数字类型比较
if (userAge === 18) {  // 这里userAge是字符串，结果为false
  console.log("已成年");
}
// 这时候需要先转换类型：userAge = Number(userAge)

3. 实际应用：判断考试成绩等级

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {  // 等价于 score >=80 且 score <90
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}
// 输出：B（因为85≥80且<90）

二、逻辑运算符：组合多个条件

只用一个比较运算符可能不够，比如「考试及格且没迟到」才能拿奖学金。这时候需要逻辑运算符来组合多个条件。

1. 三个逻辑运算符的作用

2. 短路特性：聪明的「偷懒」机制

&& 和 || 有个聪明的「偷懒」特性：当结果已经确定时，不再计算后续条件。

• && 的短路：如果第一个条件是 false，直接返回 false，不看第二个条件

  false && console.log("我不会执行");  // 输出空（因为第一个条件是false）
  true && console.log("我会执行");     // 输出"我会执行"（第一个条件是true，继续算第二个）
  

• || 的短路：如果第一个条件是 true，直接返回 true，不看第二个条件

  true || console.log("我不会执行");   // 输出空（第一个条件是true）
  false || console.log("我会执行");    // 输出"我会执行"（第一个条件是false，继续算第二个）
  

这个特性可以用来简化代码，比如设置默认值：

// 如果userName是空字符串（falsy），就用"游客"作为默认值
let userName = "";
let displayName = userName || "游客";  // 等价于：如果userName为真，用userName；否则用"游客"
console.log(displayName);  // 输出"游客"

3. 组合实战：登录验证功能

假设需要实现一个登录功能，要求：

• 密码长度≥6位
• 验证码必须输入（非空）

用逻辑运算符组合条件：

let password = "12345";    // 用户输入的密码
let captcha = "";          // 用户输入的验证码

// 验证逻辑：密码长度≥6 且 验证码非空
if (password.length >= 6 && captcha !== "") {
  console.log("登录成功");
} else {
  console.log("登录失败：密码至少6位，且需输入验证码");
}
// 输出："登录失败：密码至少6位，且需输入验证码"（密码只有5位）

三、常见错误：这些坑新手一定要注意

1. 用 = 代替 === 做判断

错误示例：

let isLogin = true;
if (isLogin = false) {  // 错误！这里用了赋值，不是比较
  console.log("未登录");
}

这段代码会把 isLogin 的值改成 false，然后判断 false 是否为「真值」（JavaScript中 false、0、"" 等是「假值」），所以不会输出内容。正确写法是用 ===：

if (isLogin === false) {  // 正确比较
  console.log("未登录");
}

2. 忽略 == 的类型转换规则

比如 null 和 undefined 在 == 下相等，但和其他值比较时容易出错：

console.log(null == undefined);  // true（特殊规则）
console.log(null == 0);          // false（null不会转数字）
console.log(undefined == "");    // false（undefined不会转字符串）

建议：除非明确知道自己在做什么，否则统一用 ===。

四、练习时间：动手写条件判断

1. 基础题：判断一个数是否是正偶数（大于0且能被2整除）

   function isPositiveEven(num) {
     // 你的代码：
     return num > 0 && num % 2 === 0;
   }
   console.log(isPositiveEven(4));  // 应该输出true
   console.log(isPositiveEven(-2)); // 应该输出false
   

2. 进阶题：根据分数输出奖励（90+分奖平板，80+奖耳机，70+奖笔记本，否则鼓励）

   let score = 85;
   if (score >= 90) {
     console.log("奖励平板");
   } else if (score >= 80) {
     console.log("奖励耳机");
   } else if (score >= 70) {
     console.log("奖励笔记本");
   } else {
     console.log("继续加油");
   }
   // 输出："奖励耳机"
   

3. 陷阱题：预测下面代码的输出结果

   let a = 0;
   let result = a || "默认值";  // a是0（假值），所以取"默认值"
   console.log(result);  // 输出"默认值"
   

总结：条件判断的核心技能

下一步建议：当你能熟练写条件判断后，可以继续学习链接，了解如何用更简洁的语法处理简单条件。

遇到任何疑问，欢迎随时提问！比如："为什么 0 == '' 结果是true？" 或 "逻辑或 || 怎么设置默认对象？"