PorterYuan · 个人学习博客

条件与循环

6分钟阅读

条件与循环

一、条件与循环

1.1 if / else if / else

 
// ===== 基本语法 =====
 
// 和 Python 不同的是：① 条件必须加 ()  ② 代码块必须用 {}
 
const score = 85;
 
if (score >= 90) {          // 条件写在 () 里，代码块写在 {} 里
 
    console.log("优秀");
 
} else if (score >= 60) {   // Python 是 elif，JS 是 else if
 
    console.log("及格");
 
} else {
 
    console.log("不及格");
 
}
 
// Python 对照：
 
// if score >= 90:
 
//     print("优秀")
 
// elif score >= 60:          ← 注意：Python 是 elif，JS 是 else if
 
//     print("及格")
 
// else:
 
//     print("不及格")

1.2 三元运算 —— 和 Python 顺序反了！

 
// ===== JS 三元运算 =====
 
// 条件 ? 为真时的值 : 为假时的值
 
const result = score >= 60 ? "及格" : "不及格";
 
// ===== Python 三元运算（对照） =====
 
// result = "及格" if score >= 60 else "不及格"
 
//          ↑ 真值在前        ↑ 条件在中   ↑ 假值在后
 
// JS:  条件 ? 真 : 假
 
// Py:  真 if 条件 else 假
 
// ↑ 顺序反了！别写反！
 
// React 里条件渲染的天天用：
 
// {isVip ? <VipBadge /> : <NormalBadge />}
 
// {loading ? "加载中..." : "已就绪"}

1.3 && / || 的条件渲染用法（React 里高频）

 
// ===== && 短路：左边为真，才执行右边 =====
 
// 条件 && 表达式  →  条件为 true 返回表达式的值，条件为 false 返回 false
 
true && "hello";      // "hello"
 
false && "hello";     // false
 
// React 条件渲染：
 
// {user.isVip && <VipBadge />}
 
// user.isVip 为 true → 渲染 <VipBadge />
 
// user.isVip 为 false → 跳过，什么都不渲染
 
// ===== || 兜底：左边为假，用右边的值 =====
 
const name = inputName || "匿名用户";  // 如果 inputName 是空字符串，用默认值
 
// Python 对照：name = input_name or "匿名用户"

⚠️ && 的 0 陷阱（React 常见 Bug）：

 
// ❌ 危险写法：数组长度为 0 时，0 会被 React 渲染成文字 "0"！
 
{items.length && <p>共 {items.length} 条</p>}
 
// ✅ 安全写法：显式转布尔
 
{items.length > 0 && <p>共 {items.length} 条</p>}

1.4 循环

 
// ===== for 循环（C 语言风格）=====
 
for (let i = 0; i < 5; i++) {   // (初始化; 条件; 每次循环后做的事)
 
    console.log(i);              // 输出 0 1 2 3 4
 
}
 
//             ↑ i++ 就是 i = i + 1
 
// Python 对照：
 
// for i in range(5):
 
//     print(i)
 
// ===== for...of 循环（遍历数组元素，更像 Python 的 for）=====
 
const names = ["张三", "李四", "王五"];
 
for (let name of names) {        // name 依次是数组中的每个元素
 
    console.log(name);           // "张三" "李四" "王五"
 
}
 
// Python 对照：for name in names:
 
// ===== while 循环 =====
 
let count = 0;
 
while (count < 3) {
 
    console.log(count);          // 0 1 2
 
    count++;                     // count = count + 1
 
}

⚠️ for (var i = 0; ...) 的坑：

 
// ❌ 用 var：循环结束后 i 还活着！
 
for (var i = 0; i < 3; i++) {}
 
console.log(i);  // 3 —— i 穿透了 {}，还能访问！
 
// ✅ 用 let：循环结束后 i 死亡
 
for (let j = 0; j < 3; j++) {}
 
// console.log(j);  // ❌ ReferenceError —— j 被 {} 拦住了

速记卡（面试闪卡）

Q1：一句话讲清「条件与循环」到底是什么？

A：JS 用 if/else if/else 做条件、三元 ?: 与 &&/|| 做短路，for/for…of/while 做循环（Control Flow）。

Q2：六、条件与循环 —— 怎么理解？

A：JS 条件必须加 ()、代码块必须 {}；三元是 条件 ? 真 : 假（和 Python 的 真 if 条件 else 假 顺序反了）。循环有 for(i++)、for…of（遍历元素，像 Python 的 for）、while。整体叫控制流（Control Flow），决定代码怎么走。

Q3：1.1 if / else if / else —— 怎么理解？

A：JS 用 else if（Python 是 elif），条件写 () 里、块写 {} 里。像红绿灯：score>=90 走优秀、>=60 走及格、否则不及格。注意条件必须用括号包，这是 JS 语法硬性要求（条件语句，Conditional Statement）。

Q4：1.2 三元运算 —— 和 Python 顺序反了！ —— 怎么理解？

A：JS 是 条件 ? 为真值 : 为假值；Python 是 真值 if 条件 else 假值——顺序完全反，别写反。React 里天天用：{isVip ? : }。像先问”满没满分”再决定给金牌还是普通牌（三元运算符，Ternary Operator）。

Q5：1.3 && / || 的条件渲染用法（React 里高频） —— 怎么理解？

A：&& 短路——左边真才执行右边，React 里 {user.isVip && }；|| 兜底——左边假用右边，name = inputName || ‘匿名用户’。⚠️ 坑：items.length && 当长度为 0 时 React 会渲染出 ‘0’，要写 items.length > 0 转布尔（短路求值，Short-circuit Evaluation）。

Q6：核心速记主线有哪些？

  • 条件用 () 包、块用 {}；三元 条件?真:假（与 Python 顺序反）

  • && 短路：左真才执行右；|| 兜底：左假用右

  • for(i++)/for…of（像 Python for）/while 三种循环

  • 坑：&& 遇 0 会渲染 ‘0’，要显式 >0 转布尔

口诀

A：JS 条件加括号，三元顺序反 Python；

&& 短路左真才，|| 兜底左假填；

for for…of while 转，循环三兄弟见面；

零值渲染成 ‘0’ 坑，显式转布尔才安全。

相关链接

关系图谱

反向链接

近期更新