一个前端开发者的救赎之路——JS基础回顾（二）

2025年7月26日 13:05

空语句

代码第一行是{，将其识别为代码块，例如：

/**
* 因为第一行是{}，被识别成一个代码块，
* 然后代码块内部什么都没有就是空代码块，无操作
* 就等同于 + 0，所以结果为数字0
**/
{} + 0 = 0
// 这个逻辑和上面的一样，- 0 = -0
{} - 0 = -0
/**
* 因为第一行是{}，被识别成一个空代码块
* 就成了 + {} => + Number([object object]) => + NaN
**/
{} + {} = NaN

关于上面的{}+{}=NaN，后面的步骤，D老师给的解释

一元 + 运算符（ToNumber 抽象操作）：
根据规范 §13.5.1，+ 会调用 ToNumber 对操作数进行强制转换：
- 对第二个 {}（对象）应用 ToNumber：
  1. 调用 ToPrimitive（hint: "number"）转换为原始值（§7.1.1：
    - 调用 valueOf()：返回对象本身（非原始值）。
    - 调用 toString()：返回 "[object Object]"（字符串）。
  2. 对字符串 "[object Object]" 应用 ToNumber（§7.1.3）：
    - 无法解析为数字，返回 NaN。

分支语句

1. if/else

基本语法：

    // else if 和 else 非必须且不可单独使用
    if（exp）{
        statement1
    } else if (exp2) {
        statement2
    } else {
        statement3
    }

案例一：判断奇偶数

/**
* 判断奇偶数
* 数学：能整除2的就是偶数，否则就是奇数
**/
if (num % 2) {
    console.log(num + '是一个奇数')
} else {
     console.log(num + '是一个偶数')
}

案例二：根据0 ~ 100输出成绩

/**
* 根据0 ~ 100输出成绩
*  [90, 100] 输出A
*  [80, 90] 输出B
*  [70, 80] 输出C
*  [60, 70] 输出D
*  [0, 60] 输出E
**/
if (score >= 90 && score <= 100) {
    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('您的成绩为：E')
}

案例三：判断闰年

/**
* 什么是闰年？
* 世纪闰年：公历年份是整百的，必须是400的倍数才是闰年
* 普通闰年：公历年份是4的倍数，且不是100的倍数的
**/
if (!(year % 400 || !(year % 4) && year % 100) {
    console.log(year + '年，是闰年！')
} else {
    console.log(year + '年，是平年！')
}

2. switch

基础语法

switch(n) {
case 1:          // 如果n === 1，从这里开始执行
    // 执行第一个代码块
    break;       // 到这里停止
case 2:          // 如果n === 2，从这里开始执行
    // 执行第二个代码块
    break;       // 到这里停止
case 3:          // 如果n === 3，从这里开始执行
    // 执行第三个代码块
    break;       // 到这里停止
default:         // 如果前面都不匹配，从这里开始执行
    // 执行第四个代码块
    break;       // 到这里停止

案例一：Switch语句在实际开发中常用来做一些状态标签展示

switch(n) {
case '001':          
    document.write("未付款")
    break;       
case '002':          
    document.write("已付款")
    break;       
case '003':          
    document.write("已发货")
    break;       
case '004':         
    document.write("已完成")
    break; 
default:         // 如果前面都不匹配，从这里开始执行
    document.write("出错了")
    break;       // 到这里停止

案例二：判断一个月有多少天

// 根据1 ~ 12的数字来输出一个月有多少天，不考虑闰年
switch(month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log(month + '月有31天')
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log(month + '月有30天')
        break;
    case 2:
        console.log(month + '月有28天')
        break;
}

switch语句中的case子句只指定了预期代码的起点，并没有指定终点。在没有break语句的情况下，switch语句从匹配其表达式值的case代码块开始执行，一直执行到代码块结束。

注意在前边两个例子中，case关键字后面分别是数值和字符串字面量。这是实践中使用switch语句的常见方式，但注意ECMAScript标准孕育每个case后面跟任意表达式。（不建议这样，不如直接使用if语句）

switch语句的首先对跟在switch关键字后面的表达式求值，然后再按照顺序求值case表达式，直至遇到匹配的值。这里的匹配使用的是===全等操作符，而不是==相等操作符，因此表达式必须在没有类型转换的情况下匹配。

考虑到在switch语句执行时，并不是所有case表达式都会被求值，所以应该避免使用包含副作用的case表达式，比如函数调用或赋值表达式。最可靠的做法是在case后面只写常量表达式。

循环语句

循环语句必须要有某些固定的内容：

初始化
条件判断
要执行的代码
自身改变

while

基本语法
```
while (exp) {
    statement
}
```

案例一：求数字1-100的和

    var num = 1;
    var sum = 0;
    while (num <= 100) {
        sum += num;
        num++;
    }

案例二：求一个数的阶乘

var factorial = 1, i = 1;
while(i < num) {
    factorial *= i;
    i++;
}

do/while

do/while循环与while循环类似，区别是对循环表达式的测试在循环底部而不是顶部。这意味着循环体始终会至少执行一次。语法如下：

```js
do {
    statement
} while (exp)
```

do/while循环可以说是实际开发中使用的最少的一个循环了，几乎没用过，下面给一个do/while循环的场景

```js
// 进入一个系统前必须输入密码或者验证码
do {
    const input = prompt('请输入验证码');
} while (!input);
```

注意： do/while循环必须始终以分号终止。而while循环在循环体使用花括号时不需要分号。

for

基础语法：
```
for(initialize; test ; increment)
    statement
```
- initialize, test, increment是三个表达式（以分号隔开），分别负责初始化、测试和递增寻喊变量。
- 对for循环，三个表达式中任何一个都可以省略，只有两个分号是必需的
- 因此，for(;;)与while(true)一样，是另一种编写无穷循环的方式

案例一：求1-100的和

var sum = 0;
for (num = 1; num <= 100; num++) {
    sum += num;
}

案例二：九九乘法表

// 使用 var 声明变量
for (var i = 1; i <= 9; i++) {
  var row = ''; // 存储当前行的字符串
  for (var j = 1; j <= i; j++) {
    // 拼接每个乘法式，\t 用于对齐
    row += j + ' × ' + i + ' = ' + (i * j) + '\t';
  }
  console.log(row); // 输出当前行
}

三种循环语句如何选择

graph TD
    A[开始循环] --> B{循环次数是否明确?}
    B -->|是| C[使用 for]
    B -->|否| D{是否需要至少执行一次?}
    D -->|是| E[使用 do-while]
    D -->|否| F[使用 while]

阅读视图

空语句