大家好！[上节课](/post/js-105-control-flow/)我们学会了让程序“动脑子”做决策（if/else），但有时候，我们需要让程序**反复做同一件事**——比如从1数到100，或者遍历一个列表。如果用手写100遍`console.log(1)`、`console.log(2)`……那不得累死？程序员最讨厌的就是重复劳动，所以就有了**循环**。



循环就是程序的“复读机”，你告诉它干啥、干多少遍，它就老老实实一遍遍执行，直到你喊停。今天我们就来认识三种循环：`while`、`do...while`和`for`。

---

## 1. 生活中的循环

想象一下这些场景：

- 每天早上：闹钟响 → 按掉 → 再响 → 再按掉……直到你起床（条件不满足）。
- 搬砖：只要还有砖（条件为真），就一直搬。
- 追女生：每天发一条微信，直到她回复（或者拉黑你）。

循环就是这种“只要条件成立，就一直重复”的逻辑。

---

## 2. while循环：先判断，再执行

`while`循环的语法最简单：

    while (条件) {
        // 循环体：要重复执行的代码
    }
    

它的执行流程是：

1. 判断条件（结果是布尔值，或者被转成布尔值）。
2. 如果条件为真，执行循环体，然后回到第1步。
3. 如果条件为假，跳出循环，继续往后执行。

```js
let i = 1;
while (i <= 5) {
    console.log(i);
    i++; // 千万别忘了更新变量，否则会死循环
}
```

输出：1 2 3 4 5

注意：循环体里一定要有改变条件的语句（比如`i++`），否则条件永远为真，就成了**死循环**——程序会卡死，甚至崩溃。如果你不小心写出了死循环，别慌，关掉浏览器标签页或者重启控制台就行。

### 2.1 while的经典应用：不确定次数的循环

`while`很适合用在不知道要循环多少次的情况，比如等待用户输入正确密码：

    let password;
    while (password !== '123456') {
        password = prompt('请输入密码：');
    }
    console.log('密码正确，欢迎进入！');
    

只要用户输入的密码不是`'123456'`，就会一直弹窗询问，直到输入正确。

---

## 3. do...while循环：至少执行一次

`do...while`和`while`很像，区别在于：**它先执行一次循环体，再判断条件**。所以无论条件是否成立，循环体至少执行一次。

    do {
        // 循环体
    } while (条件);
    

**举个栗子**：

    let i = 10;
    do {
        console.log('这次肯定执行');
        i++;
    } while (i < 5);
    

输出一次“这次肯定执行”，因为先执行后判断，`i=10`，条件`10<5`为假，结束。

这种循环适合那些“不管怎样，先干一次再说”的场景，比如展示菜单，然后根据用户选择决定是否继续。

---

## 4. for循环：最常用的循环

`for`循环把循环需要的三要素（初始化、条件、更新）都写在一行，结构清晰，是遍历次数已知的情况的首选。

    for (初始化; 条件; 更新) {
        // 循环体
    }
    

执行顺序：

1. 执行**初始化**（只执行一次，通常用来声明循环变量）。
2. 判断**条件**，如果为假，跳出循环；如果为真，执行循环体。
3. 执行**更新**（通常改变循环变量）。
4. 回到第2步。

    // 从1数到5
    for (let i = 1; i <= 5; i++) {
        console.log(i);
    }
    

是不是比`while`更紧凑？初始化`let i=1`只执行一次；然后判断`i<=5`，为真就执行`console.log(i)`，然后`i++`，再判断……直到`i=6` 时条件为假退出。

### 4.1 for循环的三个部分都可以省略，但分号不能省

- 省略初始化：如果循环变量已经在外面定义了。
- 省略条件：相当于条件永远为真，会死循环。
- 省略更新：可以在循环体里自己更新。

但通常不建议省略，除非特殊情况。

---

## 5. 循环的控制：break和continue

有时候，我们想在循环中间提前退出，或者跳过某次循环。这时就需要`break`和`continue`。

### 5.1 break：强行终止整个循环

`break`就像“急刹车”，一旦执行，循环立即结束，不再进行后续判断。

    // 找到第一个大于10的数就停止
    for (let i = 1; i <= 20; i++) {
        if (i > 10) {
            console.log('找到了，大于10的第一个数是：' + i);
            break; // 找到后就退出循环
        }
    }
    

输出到11就停了，不会继续输出后面的数字。

### 5.2 continue：跳过本次循环，继续下一次

`continue`就像“跳过广告”，只结束本次循环的后续代码，直接进入下一次循环。

    // 输出1到10，但跳过5
    for (let i = 1; i <= 10; i++) {
        if (i === 5) {
            continue; // 遇到5就跳过，不执行后面的 console.log
        }
        console.log(i);
    }
    

输出：1 2 3 4 6 7 8 9 10（没有5）

注意：`continue`在`while`里要小心，如果更新语句在`continue`后面，可能会导致死循环。所以`for`循环用`continue`更安全，因为更新语句在`continue`之后也会执行（因为它是循环结构的一部分）。

---

## 6. 循环的嵌套：套娃模式

循环里面还可以套循环，就像俄罗斯套娃。外层循环每执行一次，内层循环就要完整跑一遍。

    // 打印九九乘法表
    for (let i = 1; i <= 9; i++) {
        let row = '';
        for (let j = 1; j <= i; j++) {
            row += `${j}×${i}=${i * j} `;
        }
        console.log(row);
    }
    

外层循环控制行数（1到9），内层循环控制每行的列数。嵌套循环在处理二维数组、矩阵时特别有用。

---

## 7. 常见坑点与技巧

### 7.1 死循环

忘了更新循环变量，或者条件永远为真，就会死循环。例如：

    let i = 1;
    while (i <= 5) {
        console.log(i);
        // 忘了 i++
    }
    

浏览器会卡死，赶紧关标签页。

### 7.2 循环变量的作用域

用`let`在`for`循环里声明的变量，只在循环内有效；如果在外部也需要，要在外面声明。

    for (let i = 0; i < 3; i++) {
        // i 只在这里有效
    }
    console.log(i); // 报错：i is not defined
    

### 7.3 使用`break`跳出多层循环

`break`只能跳出当前循环。如果想跳出多层嵌套循环，可以给循环加标签（label）。

    outer: for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            if (i === 1 && j === 1) {
                break outer; // 跳出外层循环
            }
            console.log(`i=${i}, j=${j}`);
        }
    }
    

不过标签用得少，大多数情况下可以用函数封装或调整逻辑避免多层`break`。

---

## 8. 循环的实际应用

循环最常见的用途是遍历数组（后面会详讲）。比如有一个数组`['苹果', '香蕉', '橘子']`，想输出每个元素：

    let fruits = ['苹果', '香蕉', '橘子'];
    for (let i = 0; i < fruits.length; i++) {
        console.log(fruits[i]);
    }
    

此外，循环也常用于计算累加、累乘、查找最大值等。

---

## 9. 动手小练习：循环训练营

1. 用`for`循环计算1到100的和。
2. 用`while`循环输出10到1（倒序）。
3. 写一个程序，用`prompt`不断输入数字，直到输入的是0为止，然后输出所有输入数字的和。（提示：用`while`）
4. 打印出100以内的所有质数。（进阶题，可以试试）

---

## 10. 小结与下集预告

今天你学会了：

- **while 循环**：先判断后执行，适合次数未知的循环。
- **do...while循环**：至少执行一次。
- **for循环**：最常用的计数循环。
- **break和continue**：控制循环的“刹车”和“跳过”。
- **循环嵌套**：套娃模式，处理二维结构。

循环是编程的基石，很多算法都离不开它。下一节课，我们将学习**函数**——把一段代码打包起来，随用随调，真正实现“一次编写，到处运行”。你将学会如何创建自己的“工具包”，告别重复代码。

记得完成练习，下节课见！

---

**课后作业**：

1. 用`for`循环输出1到100之间所有能被3整除的数。
2. 用`while`循环实现一个猜数字游戏：程序随机生成一个1-100的数字，用户输入猜测，提示“大了”、“小了”或“恭喜猜对”，直到猜对为止。（提示：用`Math.random()` 生成随机数）

第六课：循环——重复的力量（for、while）

大家好！前[几节课](/post/js-104-operators/)我们学会了怎么存数据（变量）、怎么操作数据（运算符），但程序一直是个“直肠子”——代码从上往下一条条执行，从不拐弯。今天我们要给程序装上“大脑”，让它学会做决策：如果条件成立，就干这个；否则，就干那个。这就是**流程控制**，也是程序变得“智能”的开始。



想象一下，你早上起床：如果今天是周末，就睡懒觉；否则（工作日），就起床搬砖。这种“如果…就…否则…”的逻辑，在JavaScript里就是用`if/else`和`switch`来实现的。

---

## 1. 布尔值的“真假美猴王”

在讲`if`之前，得先搞懂一个概念：**真假值**。JavaScript中，每个值都可以被解释为布尔值`true`或`false`，但有些值天生就是“假”的，有些则是“真”的。

**假值**只有以下8个（记住它们，面试常考）：

- `false`
- `0`（数字零）
- `-0`（负零，特殊但也是假）
- `0n`（BigInt零）
- `''`或`""`（空字符串）
- `null`
- `undefined`
- `NaN`

除了这8个，其他所有值都是**真值**，比如：`true`、`42`、`'hello'`、`[]`（空数组）、`{}`（空对象）、`function(){}`等等。

这个知识点很重要，因为`if`的条件判断就是基于真假值的——它会把条件表达式的结果转成布尔值，然后决定走哪条路。

---

## 2. if语句：最简单的“岔路口”

`if`语句的语法很简单：

    if (条件) {
        // 条件为真时执行的代码
    }
    

如果条件为真，就执行花括号里的代码；否则跳过。

    let age = 20;
    if (age >= 18) {
        console.log('你已经成年了，可以去网吧了！');
    }
    

如果`age`改成 16，控制台就不会打印任何东西。

### 2.1 if...else：两条路，选一个

如果条件为假时也想干点啥，就用`else`：

    if (条件) {
        // 条件为真时执行
    } else {
        // 条件为假时执行
    }
    

**举个栗子**：

    let age = 16;
    if (age >= 18) {
        console.log('欢迎进入网吧！');
    } else {
        console.log('未成年请回家写作业。');
    }
    

### 2.2 if...else if...else：多条路，选一条

现实中有多种情况，比如根据分数评等级：90以上是A，80-89是B，70-79是C，60-69是D，60以下是F。这时可以用`else if`：

    let score = 85;
    if (score >= 90) {
        console.log('A');
    } else if (score >= 80) {
        console.log('B');
    } else if (score >= 70) {
        console.log('C');
    } else if (score >= 60) {
        console.log('D');
    } else {
        console.log('F');
    }
    

注意：一旦某个条件满足，执行完对应的代码块后就会跳出整个`if`结构，后面的`else if`不再判断。所以条件的顺序很重要，比如应该从高分往低分写，否则会出错。

---

## 3. 三元运算符：简洁版的if...else

如果只是简单的二选一赋值，可以用**三元运算符**`? :`，它长得像这样：

    条件 ? 表达式1 : 表达式2
    

如果条件为真，返回表达式1的值，否则返回表达式2的值。

    let age = 20;
    let status = age >= 18 ? '成年人' : '未成年人';
    console.log(status); // '成年人'
    

它很适合用在需要根据条件返回不同值的场景，但不要嵌套太多层，否则代码可读性会下降。

---

## 4. switch语句：多条路，选一条（专门对付“等于”情况）

如果你有一堆固定的值需要匹配（比如星期几、选项编号），用`if...else if`会显得啰嗦。这时`switch`更合适。

    switch (表达式) {
        case 值1:
            // 表达式 === 值1 时执行
            break;
        case 值2:
            // 表达式 === 值2 时执行
            break;
        default:
            // 都不匹配时执行
    }
    

注意：`switch`用的是**严格相等**（`===`），不会做类型转换。

    let day = 3;
    let dayName;
    switch (day) {
        case 1:
            dayName = '星期一';
            break;
        case 2:
            dayName = '星期二';
            break;
        case 3:
            dayName = '星期三';
            break;
        case 4:
            dayName = '星期四';
            break;
        case 5:
            dayName = '星期五';
            break;
        case 6:
            dayName = '星期六';
            break;
        case 7:
            dayName = '星期日';
            break;
        default:
            dayName = '非法日期';
    }
    console.log(dayName); // '星期三'
    

### 4.1 break的重要性

如果没有`break`，程序会从匹配的`case`开始一直往下执行，直到遇到`break`或`switch`结束，这叫**穿透（fall-through）**。有时候可以利用穿透来简化代码，比如多个`case`执行相同逻辑：

    let fruit = '苹果';
    switch (fruit) {
        case '苹果':
        case '梨':
        case '桃子':
            console.log('这是水果');
            break;
        default:
            console.log('不知道是啥');
    }
    

但如果不需要穿透，一定要记得加`break`，否则会出bug。

---

## 5. 条件嵌套：套娃警告

条件里面还可以再套条件，就像俄罗斯套娃。但嵌套太深会让代码难以阅读，所以一般建议用尽早返回或者逻辑运算符简化。

    let age = 25;
    let hasTicket = true;
    if (age >= 18) {
        if (hasTicket) {
            console.log('请进场');
        } else {
            console.log('请先买票');
        }
    } else {
        console.log('未成年禁止入内');
    }
    

可以用逻辑运算符简化：

    if (age >= 18 && hasTicket) {
        console.log('请进场');
    } else if (age >= 18 && !hasTicket) {
        console.log('请先买票');
    } else {
        console.log('未成年禁止入内');
    }
    

甚至可以用三元嵌套，但不推荐，可读性太差。

---

## 6. 常见坑点与技巧

### 6.1 赋值vs比较

新手常犯的错误：在`if`条件里用`=`而不是`===`。

    let x = 5;
    if (x = 3) { // 这是赋值，不是比较！x 被赋值为 3，整个表达式结果是 3，所以条件为真
        console.log('这个代码总会执行');
    }
    

正确的应该是`if (x === 3)`。用`===`可以避免这种问题。

### 6.2 使用布尔值直接判断

如果条件本身就是布尔值，没必要再比较一次。

    let isLoggedIn = true;
    if (isLoggedIn === true) { // 多余
        // ...
    }
    if (isLoggedIn) { // 简洁
        // ...
    }
    

### 6.3 用逻辑运算符简化

有时候可以用`&&`和`||`代替`if`，特别是执行简单语句时。

    // 如果用户已登录，显示欢迎语
    if (isLoggedIn) {
        console.log('欢迎回来');
    }
    // 可以写成：
    isLoggedIn && console.log('欢迎回来');
    
    // 设置默认值
    let username = inputName || '匿名';
    

---

## 7. 动手小练习：决策模拟器

1. 写一个程序，用`prompt`获取用户输入的数字，判断它是正数、负数还是零，并输出相应信息。
2. 用三元运算符判断一个数字是否是偶数，如果是就输出“偶数”，否则输出“奇数”。（提示：偶数能被2整除，即`num % 2 === 0`）
3. 模拟一个简易登录验证：用`prompt`获取用户名和密码（两个`prompt`），如果用户名为`'admin'`且密码为`'123456'`，输出“登录成功”，否则输出“用户名或密码错误”。  

---

## 8. 小结与下集预告

今天你学会了：

- **真假值**：8个falsy，其他都是truthy。
- **if/else**：基本条件分支，可以处理多种情况。
- **三元运算符**：简洁的二选一。
- **switch**：专门用于多值匹配，注意`break`。
- **嵌套与简化**：保持代码可读性。

下节课，我们将学习**循环**——让计算机反复做同一件事，解放你的双手。你会学到`for`、`while`、`do...while`，以及如何用`break`和`continue`控制循环节奏。

记得完成作业，[下节课](/post/js-106-loops/)见！

---

**课后作业**：

1. 用`if/else`实现一个简单的计算器：用`prompt`输入两个数字和一个运算符（+、-、*、/），根据运算符计算结果并输出。注意处理除数为0的情况。
2. 用`switch`实现一个简单的菜单：输入1打印“开始游戏”，输入2打印“加载存档”，输入3打印“设置”，输入4打印“退出”，其他输入打印“无效选项”。
3. 思考：如果不用`switch`，用`if/else if`实现上述菜单，哪个代码更简洁？为什么？

第五课：流程控制——如果…就…，否则…（if/else、switch）

大家好！[上节课](/post/js-103-variables-datatypes/)咱们在内存里给数据安了家，还认识了各种数据“物种”——数字、字符串、布尔值……但光有数据不动，就像买了一堆菜却不做饭，有啥用？今天，我们要学习怎么“烹饪”这些数据，用各种**运算符**让它们动起来、比一比、甚至做逻辑推理。



运算符就是计算机里的“工具人”，有的负责算术（加减乘除），有的负责比较（谁大谁小），有的负责逻辑（与或非）。学会它们，你就能指挥计算机干各种活了。

---

## 1. 算术运算符：数学课代表

算术运算符就是用来做数学运算的，跟小学数学差不多，但多了几个新朋友。

- 加法`5 + 3 = 8`
- 减法`5 - 3 = 2`
- 乘法`5 * 3 = 15`
- 除法`5 / 2 = 2.5`
- 取余`5 % 2 = 1`
- 指数`5 ** 2 = 25`

### 1.1 加法运算符的“两面派”

`+`有两个身份：数字相加和字符串拼接。如果两边都是数字，就做加法；如果有一边是字符串，就把另一边也转成字符串，然后拼接。这就是它的“两面派”作风。

    console.log(3 + 5);      // 8（数字加法）
    console.log('3' + 5);    // '35'（字符串拼接）
    console.log('hello' + ' world'); // 'hello world'
    

### 1.2 取余运算符（%）：看看能不能整除

取余就是求除法剩下的余数。常用于判断奇偶（`num % 2 === 0`为偶数），或者实现循环队列。

    console.log(10 % 3); // 1
    console.log(8 % 2);  // 0
    

### 1.3 指数运算符（**）：快速幂

ES7引入的`**`相当于`Math.pow()`，比如`2 ** 3`就是2的3次方（结果为8）。

---

## 2. 赋值运算符：把值塞进变量

最基本的赋值是`=`，意思是把右边的值赋给左边的变量。但JavaScript提供了一些“快捷操作”，让你在赋值的同时做运算。

| 运算符 | 例子      | 等价于       |
| :----- | :-------- | :----------- |
| `=`    | `x = y`   | `x = y`      |
| `+=`   | `x += y`  | `x = x + y`  |
| `-=`   | `x -= y`  | `x = x - y`  |
| `*=`   | `x *= y`  | `x = x * y`  |
| `/=`   | `x /= y`  | `x = x / y`  |
| `%=`   | `x %= y`  | `x = x % y`  |
| `**=`  | `x **= y` | `x = x ** y` |

这些运算符能让你少敲几个字母，比如`count += 1`比`count = count + 1`简洁多了。

    let num = 10;
    num += 5; // 相当于 num = num + 5，现在 num 是 15
    num *= 2; // 现在 num 是 30
    

---

## 3. 比较运算符：谁更强？谁相等？

比较运算符用来比较两个值，结果永远是布尔值：`true`（真）或`false`（假）。它们是程序的“判官”，决定代码走哪条路。

### 3.1 相等与不等：双等号和三等号的恩怨

| 运算符 | 描述           | 例子        | 结果    |
| :----- | :------------- | :---------- | :------ |
| `==`   | 相等（值相等） | `5 == '5'`  | `true`  |
| `===`  | 严格相等       | `5 === '5'` | `false` |
| `!=`   | 不等           | `5 != '5'`  | `false` |
| `!==`  | 严格不等       | `5 !== '5'` | `true`  |

`==`只比较值，不比较类型，如果类型不同会先进行类型转换（这叫“隐式转换”），然后再比较。这经常带来意想不到的结果：

    console.log(0 == false);   // true（false 转成 0）
    console.log('' == false);  // true（都转成 0？其实规则复杂）
    console.log(null == undefined); // true（特殊规则）
    

而`===`是严格相等，值和类型必须都一样才返回`true`。**建议永远使用`===`和`!==`**，避免隐式转换带来的坑。

### 3.2 大小比较：>、<、>=、<=

这些运算符也会进行类型转换（比如字符串和数字比较时，字符串会转成数字，如果转不了就成`NaN`，结果总是`false`）。

    console.log(5 > 3);     // true
    console.log(5 >= 5);    // true
    console.log('10' > 5);  // true（'10' 转成 10）
    console.log('abc' > 5); // false（'abc' 转成 NaN，NaN 与任何数比较都是 false）
    

比较特殊的是字符串之间比较，是按字典顺序（ASCII/Unicode码）逐个字符比较。

    console.log('apple' > 'banana'); // false（因为 a 和 b 比较）
    console.log('2' > '12');         // true（因为比较的是字符 '2' 和 '1'，不是数字大小）
    

所以字符串比较要小心，最好转成数字再比。

---

## 4. 逻辑运算符：与、或、非的“决策三人组”

逻辑运算符用来组合或反转布尔值，是程序逻辑的核心。

### 4.1 逻辑与（&&）：一假即假

`a && b`只有`a`和`b`都是`true`时，结果才为`true`；否则为`false`。

有趣的是，`&&`和`||`并不总是返回布尔值，它们返回的是**决定结果的那个操作数的值**（短路计算）。比如：

    console.log(5 && 10);      // 10（因为 5 是 truthy，所以返回第二个操作数）
    console.log(0 && 10);      // 0（因为 0 是 falsy，直接返回 0）
    console.log('hello' && 'world'); // 'world'
    

这叫**短路求值**：对于`&&`，如果左边是假，整个表达式肯定是假，右边就不计算了，直接返回左边值；如果左边是真，结果取决于右边，返回右边值。

### 4.2 逻辑或（||）：一真即真

`a || b`如果`a`是 `true`，直接返回`a`；否则返回`b`。

    console.log(5 || 10);      // 5（5 是真，直接返回 5）
    console.log(0 || 10);      // 10（0 是假，返回右边 10）
    console.log(null || '默认值'); // '默认值'
    

这个特性常用来设置默认值，比如`let name = inputName || '匿名';`。

### 4.3 逻辑非（!）：颠倒黑白

`!`把真变成假，假变成真。它总是返回布尔值。

    console.log(!true);   // false
    console.log(!0);      // true（0 是 falsy，!0 就是 true）
    console.log(!'hello'); // false（'hello' 是 truthy）
    

两次非`!!`可以用于将任何值转成对应的布尔值（相当于`Boolean()`）：

    console.log(!!'hello'); // true
    console.log(!!0);       // false
    

---

## 5. 位运算符（简介）：操作二进制

位运算符直接操作数字的二进制位，包括`&`（与）、`|`（或）、`~`（非）、`^`（异或）、`<<`（左移）、`>>`（右移）等。对于初学者，了解即可，通常用在底层或性能优化场景。

    console.log(5 & 1); // 1（0101 & 0001 = 0001）
    console.log(5 | 1); // 5（0101 | 0001 = 0101）
    

---

## 6. 运算符优先级：先算谁，后算谁

就像数学里先乘除后加减一样，JavaScript运算符也有优先级。遇到复杂表达式时，优先级高的先运算。记不住优先级没关系，可以用括号`()`明确指定顺序。

    let a = 2 + 3 * 4;      // 先算 3*4=12，再加 2，得 14
    let b = (2 + 3) * 4;    // 括号优先，得 20
    let c = true || false && false; // 先算 false && false 为 false，再 true || false 得 true
    

当不确定时，用括号最保险。

---

## 7. 动手小练习：运算符大乱斗

打开控制台，玩一玩这些运算符：

1. 计算`7 + 3 * 2`和`(7 + 3) * 2`看看区别。
2. 判断`'10' - 5`的结果和类型。
3. 试试`5 == '5'`和`5 === '5'`的区别。
4. 用`&&`写一个表达式：如果`age`大于18，就输出`'成年'`，否则输出`'未成年'`。（提示：可以用短路求值，比如`age >= 18 && console.log('成年')`但这样不完善，下节课学if会更简单）
5. 用`||`设置一个默认值：`let username = 用户输入 || '游客';` 并测试用户输入为空的情况。
6. 用`!`判 `NaN`的布尔值（`!!NaN`是什么？）。

---

## 8. 小结与下集预告

今天咱们认识了运算符大家庭：

- **算术运算符**：`+ - * / % **`，数据的基本操作。
- **赋值运算符**：`= += -=`等，简化代码。
- **比较运算符**：`==`vs`===`，记住用三等号避坑。
- **逻辑运算符**：`&& || !`，程序的“决策大脑”。
- **位运算符**：二进制操作，进阶技能。
- **运算符优先级**：用括号掌控一切。

下节课，我们将学习**流程控制**——用`if/else`和`switch`让程序学会“思考”，根据不同的条件执行不同的代码。到时候，你就能写出真正有“智商”的程序了。

记得完成练习，[下节课](/post/js-105-control-flow/)见！

---

**课后作业**：

1. 写出以下表达式的结果，并在控制台验证：
- `10 + '20' - 5`
- `'10' * '2'`
- `true + true + true`
- `'5' == 5 && '5' === 5`
- `!null && !!undefined`

2. 编写一段代码，用`prompt`获取用户的年龄（字符串），然后用`>=`判断是否成年（18岁），用`console.log`打印“成年”或“未成年”。注意处理用户输入非数字的情况（可以先不管，但可以思考）。
3. 用`||`实现：如果用户输入的名字为空，则使用默认名字“匿名用户”。

第四课：运算符——计算机的“加减乘除”与“灵魂拷问”

大家好！[上节课](/post/js-102-environment/)我们学会了在控制台里喊话（`console.log`）和弹窗吓人（`alert`），算是和JavaScript混了个脸熟。今天，我们要深入计算机的内存世界，看看数据是怎么存进去、取出来，以及JavaScript里到底有哪些“物种”的数据。



想象一下，你的电脑内存就像一栋巨大的公寓楼，里面有无数的房间（内存单元）。每个房间可以放一些数据，比如数字、文字。但问题来了：你怎么找到这些房间？总不能每次都用钥匙挨个开门找吧？这就需要给房间贴**标签**——这就是变量的作用。

---

## 1. 变量声明：let和const——给数据起个名字

在JavaScript里，要使用变量，得先“声明”一下，告诉系统我要用这个名字了。目前最推荐的方式是使用`let`和`const`。

### 1.1 let——可以变的量

`let`用来声明一个**可以改变**的变量。就像你有一个存钱罐，今天放10块，明天可以换成20块。

    let age = 18;       // 声明一个变量 age，并赋值为 18
    console.log(age);   // 18
    age = 20;           // 修改变量的值
    console.log(age);   // 20
    

你可以把`let`想象成一个“可擦写的便签”——想贴什么就贴什么，想换就换。

### 1.2 const——不变的常量

`const`用来声明一个**不可改变**的常量。就像你的身份证号，一旦确定，就不能改。

    const PI = 3.14;
    console.log(PI);    // 3.14
    PI = 3.14159;       // 报错！常量不能被重新赋值
    

注意：`const`声明时必须赋值，而且之后不能重新赋值。但如果`const`声明的是一个对象，对象内部的属性是可以修改的——这个等我们学到对象时再细说，现在你只要记住：**简单类型的常量不能改**。

### 1.3 变量命名规则

- 只能包含字母、数字、下划线`_`、美元符号`$`。
- 不能以数字开头。
- 不能是JavaScript的保留字（如`if`、`for`、`function`等）。
- 建议使用驼峰命名法：`myAge`、`userName`、`isStudent`。

**合法命名**：`name`、`age2`、`_private`、`$elem`
**非法命名**：`2age`（数字开头）、`my-name`（短横线是减号）、`class`（保留字）

---

## 2. 关于var——一个老古董的彩蛋

你可能在一些旧教程或代码里看到过`var`，它是JavaScript早期声明变量的方式。现在有了`let`和`const`，我们**基本不再使用`var`**，因为它有一些奇怪的行为（比如变量提升、没有块级作用域），容易造成bug。

你只需要知道：**现代JavaScript开发，一律用`let`和`const`**。至于`var`到底哪里奇怪，我们会在后续课程《执行上下文与作用域链》中揭秘。现在，就当它是一个“历史遗留文物”，看看就好。

---

## 3. 数据类型：JavaScript里的“物种起源”

变量是用来存放数据的，那数据有哪些种类呢？JavaScript中有八种数据类型（七种原始类型+一种引用类型）。咱们先认识这七种“原始居民”（原始类型），引用类型（主要是对象）后面再细讲。

### 3.1 Number（数字）：啥都能算，但偶尔抽风

Number类型包括整数、浮点数，以及一些特殊值：`Infinity`（无穷大）、`-Infinity`（负无穷）、`NaN`（Not a Number，不是数字）。

    let intNum = 42;
    let floatNum = 3.14;
    let infinite = 1 / 0; // Infinity
    let notNumber = 'abc' * 2; // NaN
    

注意：`NaN`很特别，它不等于任何值，包括它自己。判断是不是`NaN`要用`isNaN()`函数。

### 3.2 String（字符串）：文本的容器

字符串是用单引号`'`、双引号`"`或反引号```括起来的文本。反引号是ES6的模板字符串，支持换行和变量插值（用`${}`）。

    let name = '张三';
    let greeting = "你好，";
    let template = `我的名字是${name}，今年${18 + 2}岁。`; // 模板字符串
    

字符串可以相加（拼接），但要注意数字和字符串相加时的隐式转换（后面讲）。

### 3.3 Boolean（布尔值）：要么真，要么假

布尔值只有两个`true`和`false`，用于逻辑判断。

### 3.4 Undefined（未定义）：声明了但没赋值

当一个变量被声明但没有赋值时，它的值就是`undefined`。也可以显式地把变量设为`undefined`，但一般不这么做。

    let x;
    console.log(x); // undefined
    

### 3.5 Null（空）：表示“没有对象”

`null`是一个特殊值，表示“空”、“没有”。它是一个对象（历史遗留问题，`typeof null`返回`"object"`），但通常用来表示“此处不该有值”。

    let y = null;
    console.log(y); // null
    

有趣的是，`null`和`undefined`在相等性上：`null == undefined`是`true`（因为两者都表示“无”），但`null === undefined`是`false`（类型不同）。

### 3.6 Symbol（符号）：独一无二的钥匙

ES6新增的`Symbol`，表示独一无二的值。通常用作对象属性的键，避免命名冲突。每次调用`Symbol()`都会生成一个全新的唯一值。

    let s1 = Symbol();
    let s2 = Symbol();
    console.log(s1 === s2); // false
    

### 3.7 BigInt（大整数）：数大无穷

ES2020引入的`BigInt`，用于表示大于`2^53 - 1`的整数。写法是在数字后面加`n`，或者调用`BigInt()`函数。

    let bigNum = 9007199254740991n; // 最大安全整数是 2^53-1，这个更大
    let another = BigInt('12345678901234567890');
    

---

## 4. 动态类型：今天你是字符串，明天就能变数字

JavaScript是**动态类型**语言，意思是变量的类型不是固定的，可以随时改变。这就像变色龙，根据环境变颜色。

    let something = 'hello'; // 字符串
    something = 42;          // 变成数字
    something = true;        // 变成布尔值
    something = { name: '对象' }; // 变成对象
    

这种灵活性有时很方便，但有时也会带来意想不到的bug。比如：

    let result = '5' + 3; // 结果是 '53'（字符串拼接）
    let result2 = '5' - 3; // 结果是 2（数字运算）
    

这是因为`+`运算符遇到字符串会优先进行拼接，而`-`运算符会尝试把字符串转成数字。这就是所谓的**隐式类型转换**，经常让新手一脸懵逼。

要查看一个变量的当前类型，可以用`typeof`运算符：

    console.log(typeof 42);        // "number"
    console.log(typeof 'hello');   // "string"
    console.log(typeof true);      // "boolean"
    console.log(typeof undefined); // "undefined"
    console.log(typeof null);      // "object" (历史遗留)
    console.log(typeof Symbol());  // "symbol"
    console.log(typeof 123n);      // "bigint"
    

---

## 5. 动手小练习：变量动物园

现在，让我们用刚学的知识做个有趣的练习。打开控制台，一步步操作：

1. 用`const`声明一个变量`myName`，赋值为你的名字。
2. 用`let`声明一个变量`age`，赋值为你的年龄。
3. 用`let`声明一个变量`isStudent`，赋值为`true`。
4. 在控制台打印这三个变量。
5. 尝试把`myName`改为另一个名字，看看会发生什么（提示：会报错，因为`const`不能改）。
6. 把`age`改为你的虚岁，再打印出来。
7. 用`typeof`检查`isStudent`的类型。
8. 声明一个变量`futureJob`，但不赋值，打印它的值和类型。
9. 把`futureJob`赋值为`null`，再次打印值和类型。

做完这些，你应该对变量的声明和基本类型有了直观感受。

---

## 6. 小结与下集预告

今天咱们学到了：

- 用`let`声明可变变量，用`const`声明不可变常量。
- 七种原始数据类型：`number`、`string`、`boolean`、`undefined`、`null`、`symbol`、`bigint`。
- 动态类型和`typeof`运算符。

下节课，我们将学习运算符——让数据“动起来”的工具，包括算术运算、比较、逻辑判断等。你将学会如何让JavaScript帮你做决策，写出真正有“智商”的程序。

记得完成作业，[下节课](/post/js-104-operators/)见！

---

**课后作业**：

1. 猜猜下面表达式的结果（然后在控制台验证）：
- `'10' - 5`
- `'10' + 5`
- `true + true`
- `'6' * '3'`

2. 写一段代码，用`prompt`获取用户输入的年龄，然后用`console.log` 打印出“明年你就XX岁了”（其中XX是年龄加1）。注意`prompt`返回的是字符串，需要转换成数字（可以用`Number()`或`parseInt()`）。

第三课：变量与数据类型——让数据在内存里“安家落户”

[上回书](/post/js-101-history/)说到，JavaScript从一个十天速成的“临时工”，一路逆袭成了宇宙级顶流。今天，咱们终于要动手写代码了！别紧张，写代码这事，就跟学做菜一样——先得把锅碗瓢盆准备好，再点火倒油，最后才能炒出一盘色香味俱全的“Hello World”。



---

## 1. 浏览器控制台：程序员的“忏悔室”兼“游乐场”

首先，咱们得找个地方写 JavaScript。你可能会想：是不是得下载个啥软件？像学Python要装Python，学Java要装JDK？其实完全不用！**浏览器就是最好的运行环境**——因为浏览器内置了JavaScript引擎（比如Chrome的V8），它像个24小时待命的“隐形式解释器”，随时准备执行你的代码。而浏览器的“开发者工具”里，藏着一个叫**控制台（Console）** 的神奇面板，这就是你的JS游乐场。

**怎么打开它？**

- Chrome/Edge：按`F12`或`Ctrl+Shift+I`，然后点击顶部的“Console”标签。
- Firefox：同样`F12`或`Ctrl+Shift+I`。
- Safari：需要先在设置里开启“开发菜单”，然后`Cmd+Option+C`。

打开之后，你会看到一个空白的命令行界面，光标在`>`后面一闪一闪，仿佛在说：“来呀，快输入点啥！”这就是你的JavaScript游乐场——你可以在这里输入任意JS代码，按回车立即执行，结果会直接显示出来。

**为什么叫“忏悔室”？**
因为程序员经常在这里调试错误，对着满屏红彤彤的报错信息，一边念叨“我错了，我改了”，一边找bug。控制台就是那个静静听你忏悔、然后告诉你哪里错了的神父。

**试试手：**
在控制台里输入`1 + 2`回车，你会看到输出`3`。再试试`'Hello' + ' ' + 'World'`，输出`'Hello World'`。是不是很有成就感？你已经会写JavaScript了！（虽然只是表达式）

---

## 2. 编辑器推荐：VSCode真香现场

控制台适合写一两行代码试试手，但真要写一个完整的网页脚本，还是得用专业的代码编辑器。市面上编辑器很多，但我要给你安利的是**Visual Studio Code**（简称VSCode）——免费、开源、插件丰富、颜值高，堪称编辑器界的“瑞士军刀”。

**为什么是VSCode？**

- **智能提示**：你打字的时候，它会像猜你喜欢一样弹出补全建议，少敲好多字母。
- **插件市场**：想要啥功能直接搜，比如代码高亮、自动格式化、括号变色……连主题都能换，程序员也要讲究界面美观的好吗！
- **集成终端**：不用切换窗口就能运行命令，省心。
- **调试神器**：可以直接在编辑器里打断点、看变量值，找bug就像玩推理游戏。

当然，如果你喜欢硬核，也可以用**Sublime Text**、**Atom**、**WebStorm**（付费但强大）甚至记事本——不过用记事本写代码的，要么是大神，要么是自虐狂。

**安装提示**：去官网code.visualstudio.com下载安装，一路下一步就行。装完后建议装个中文插件（搜索“Chinese”），毕竟母语看着舒服。

---

## 3. 第一个程序：Hello World及其亲戚们

好了，环境备齐，现在开始编程界的“开光仪式”——写一个程序，让电脑对你说“Hello World”。

### 3.1 最正统的Hello World

在控制台里输入：

    console.log('Hello World');
    

回车，你会看到控制台输出`Hello World`。恭喜你，你的JavaScript生涯正式开始了！

`console.log`是JavaScript里最常用的“喊话”工具，它的作用是把括号里的内容打印到控制台。你可以打印数字、字符串、变量、甚至整个对象。比如：

    console.log('我的年龄是：', 18);
    console.log('一个对象：', { name: '张三', age: 20 });
    

在真实开发中，`console.log`主要用于调试——在你怀疑某个变量值不对的时候，打印出来看看。它就像侦探的放大镜，帮你找出代码里的“凶手”。

### 3.2 爱弹窗的alert

如果说`console.log`是悄悄在后台打印，那`alert`就是直接跳到用户脸上，强行刷存在感。试试在控制台输入：

    alert('你被JavaScript绑架了！');
    

浏览器会立刻弹出一个对话框，上面显示你写的文字，还有一个“确定”按钮。用户必须点击“确定”才能继续操作。这玩意儿早期常被用来做“欢迎提示”，现在更多用于教学演示或者紧急通知——毕竟强行弹窗太霸道，用多了会被用户嫌弃。

### 3.3 能输入信息的prompt

`prompt`比`alert`更进一步，它不仅能显示消息，还能让用户输入文字。比如：

    prompt('你叫什么名字？');
    

会弹出一个带输入框的对话框，用户输入后点击确定，输入的内容会作为返回值（不过你现在还没学变量，暂时感受一下）。这个函数有点像登记表，等着用户填信息。

### 3.4 需要确认的confirm

`confirm`则是让用户做选择——显示一段话，附带“确定”和“取消”两个按钮。比如：

    confirm('你确定要删除这条记录吗？');
    

点击确定返回`true`，取消返回`false`。它常用于需要用户确认的场景，比如删除前二次确认。

### 3.5 页面直接输出的document.write

还有一个老古董：`document.write`。它可以把内容直接写到网页里。比如在控制台输入：

    document.write('<h1>Hello World</h1>');
    

你会在当前页面看到一个大标题。注意，如果这个脚本是在页面加载后执行的，它会覆盖掉整个页面内容（因为`document.write`的行为比较粗暴）。所以现在基本不用它了，但偶尔在古董代码里见到，知道是干啥的就行。

---

## 4. 把这些亲戚放一起做个对比
- `console.log`在控制台打印信息悄悄后台打印，不影响用户界面，调试神器
- `alert`弹出提示框强行中断用户操作，必须点确定，适合紧急通知
- `prompt`弹出输入框获取用户输入，返回值是字符串
- `confirm`弹出确认框让用户选择确定或取消，返回布尔值
- `document.write`直接写入页面简单粗暴，但容易覆盖页面，现在基本弃用

注意：除了`console.log`，其他几个都是浏览器提供的Web API，不是JavaScript语言本身的特性。但在浏览器环境里，它们就是可以随便用的“亲戚”。

---

## 5. 动手小练习：和电脑聊个天

现在轮到你了。打开浏览器控制台，依次执行以下代码，看看会发生什么：

1. `console.log('你好，我是电脑，你是谁？');`
2. `let name = prompt('请输入你的名字：');`（先不管`let`是啥，照着输就行）
3. `console.log('你好，' + name + '！很高兴认识你。');`
4. `confirm('我们做朋友好吗？');`
5. 如果点击了确定，就在控制台打印`true`，否则打印`false`

做完这些，你已经和电脑完成了一次简单的对话！是不是有点小成就感？

---

## 6. 小结与下集预告

今天咱们学会了：

- 打开浏览器控制台这个“游乐场”。
- 安装VSCode这个强大编辑器。
- 写了第一个程序`console.log('Hello World')`。
- 认识了它的亲戚们：`alert`、`prompt`、`confirm`、`document.write`。

从下一课开始，我们就要正式进入JavaScript的语法世界了——变量、数据类型、运算符……这些听起来有点枯燥，但我会尽量讲得像相声一样有趣。记得按时来上课，别迟到哦！

---

**课后作业**：

1. 尝试在VSCode里新建一个HTML文件，在里面用`<script>`标签写一段JavaScript，然后在浏览器中打开，看看效果。（提示：`<script>console.log('我在HTML里！');</script>`）
2. 如果`alert`和`prompt`同时出现，谁先弹出来？为什么？（答案在下节课揭晓）

[下节课](/post/js-103-variables-datatypes/)见！记得带好你的键盘和好奇心。

第二课：工欲善其事，必先利其器——开发环境准备与Hello World

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。