何雨果的知识库

Appearance

JavaScript 流程控制 ​

核心基础 JavaScript Control Flow

一、条件语句（If-Else） ​

1.1 基本结构 ​

条件语句让代码根据 当前条件 执行不同的路径：

javascript
if (condition) {
  // 条件为 true 时执行
} else {
  // 条件为 false 时执行
}

类比： 就像火车轨道——如果前方畅通就直行，否则就转弯。

1.2 多条件判断（else if） ​

javascript
if (loveScore > 70) {
  alert("You love each other like Kanye loves Kanye.");
} else if (loveScore > 30 && loveScore <= 70) {
  alert("Your love score is " + loveScore + "%.");
} else {
  alert("You go together like oil and water.");
}

二、比较运算符（Comparators） ​

2.1 运算符一览 ​

运算符含义示例
===严格相等（值 + 类型）1 === 1 → true
!==严格不等1 !== "1" → true
>大于5 > 3 → true
<小于3 < 5 → true
>=大于等于5 >= 5 → true
<=小于等于3 <= 5 → true

2.2 === vs ==（严格相等 vs 宽松相等） ​

关键区别

javascript
var a = 1;       // Number
var b = "1";     // String

a === b;         // false（类型不同）
a == b;          // true （忽略类型，仅比较值）

最佳实践：始终使用 === 进行比较，避免隐式类型转换带来的 bug。

比较方式检查值检查类型推荐度
=== 严格相等✅✅⭐ 推荐
== 宽松相等✅❌⚠️ 避免

三、逻辑运算符（Combining Comparators） ​

3.1 三种逻辑运算 ​

运算符含义示例
&&AND（两个条件都为真）a > 0 && a < 10
||OR（任意一个条件为真）a === 0 || b === 0
!NOT（取反）!true → false

3.2 组合条件实战 ​

javascript
// 检查是否在 30-70 之间
if (loveScore > 30 && loveScore <= 70) {
  alert("Normal range");
}

// 检查是否在范围之外
if (loveScore <= 30 || loveScore > 70) {
  alert("Extreme range");
}

四、随机数生成 ​

4.1 Math.random() ​

Math.random() 生成一个 0（含）到 1（不含） 之间的伪随机浮点数：

javascript
Math.random();   // 例如 0.36472849...

4.2 生成指定范围的整数 ​

公式： 生成 min 到 max 的随机整数

javascript
// 通用公式
Math.floor(Math.random() * (max - min + 1)) + min;

示例：模拟骰子（1-6）

javascript
var n = Math.random();        // 0 ~ 0.999...
n = n * 6;                    // 0 ~ 5.999...
n = Math.floor(n);            // 0 ~ 5
n = n + 1;                    // 1 ~ 6

// 简写
var dice = Math.floor(Math.random() * 6) + 1;

步骤拆解：

步骤操作范围
1. Math.random()生成随机小数[0, 1)
2. × 6放大范围[0, 6)
3. Math.floor()向下取整{0, 1, 2, 3, 4, 5}
4. + 1平移范围{1, 2, 3, 4, 5, 6}

伪随机数

计算机本质上是 确定性 的（一堆开关的 0/1），无法产生真正的随机数。Math.random() 使用数学算法生成 看起来随机 的数列，称为 伪随机数生成器（PRNG）。

五、综合实战项目 ​

5.1 Love Calculator ❤️ ​

javascript
prompt("What is your name?");
prompt("What is their name?");

// 生成 1-100 的随机分数
var loveScore = Math.floor(Math.random() * 100) + 1;

// 根据分数给出不同消息
if (loveScore > 70) {
  alert("Your love score is " + loveScore +
        "%. You love each other like Kanye loves Kanye.");
} else if (loveScore > 30 && loveScore <= 70) {
  alert("Your love score is " + loveScore + "%.");
} else {
  alert("Your love score is " + loveScore +
        "%. You go together like oil and water.");
}

5.2 闰年计算器 📅 ​

判断规则：

  1. 能被 4 整除 → 可能是闰年
  2. 但如果能被 100 整除 → 不是闰年
  3. 但如果能被 400 整除 → 是闰年

流程图：

年份 → 能被4整除？
        ├─ 否 → 不是闰年
        └─ 是 → 能被100整除？
                 ├─ 否 → 是闰年 ✅
                 └─ 是 → 能被400整除？
                          ├─ 是 → 是闰年 ✅
                          └─ 否 → 不是闰年

代码实现：

javascript
function isLeap(year) {
  if (year % 4 === 0) {
    if (year % 100 === 0) {
      if (year % 400 === 0) {
        return "Leap year.";
      } else {
        return "Not leap year.";
      }
    } else {
      return "Leap year.";
    }
  } else {
    return "Not leap year.";
  }
}

验证：

年份÷4÷100÷400结果
2000✅✅✅闰年 ✅
1900✅✅❌非闰年
2024✅❌—闰年 ✅
2023❌——非闰年

解题方法论

  1. 先用 自然语言 理解规则
  2. 画 流程图（推荐 draw.io）
  3. 将流程图 翻译 为代码

代码不难，逻辑才是关键。

六、数组（Arrays） ​

6.1 数组是什么 ​

数组是一个 有序集合，用于存储多个相关数据：

javascript
var guestList = ["Angela", "Jack", "Pam", "James", "Lara", "Jason"];

类比： 鸡蛋盒——一个盒子装多个鸡蛋，而非每个鸡蛋单独用一个变量。

6.2 基本操作 ​

javascript
// 访问元素（从 0 开始计数）
guestList[0];          // "Angela"
guestList[2];          // "Pam"

// 获取长度
guestList.length;      // 6

// 检查是否包含某元素
guestList.includes("Angela");  // true
guestList.includes("Hugo");    // false

6.3 实战：Guest List 检查器 ​

javascript
var guestList = ["Angela", "Jack", "Pam", "James", "Lara", "Jason"];

var guestName = prompt("What is your name?");

if (guestList.includes(guestName)) {
  alert("Welcome!");
} else {
  alert("Sorry, maybe next time.");
}

← 返回 Web 开发研究