第3课：运算符与流程控制——JS的“决策者”

一切美好都值得你全力以赴。即使过程艰难，但只要坚持，必有回响。加油！

欢迎来到「JavaScript 魔法学院」第 3 课！今天我们将化身代码世界的"指挥官"，用运算符 计算数据，用流程控制 做出决策！文末实战带你用9 行代码生成九九乘法表，绝对震撼！

一、运算符：JS 的"计算器"

1. 算术运算符

js 复制代码

console.log(10 + 3 * 2);   // 16（注意优先级！）
console.log(10 % 3);       // 1（取余数）
console.log(2 ** 4);       // 16（指数运算）

优先级口诀：先乘除后加减，括号优先最保险！

2. 比较运算符

符号	含义	示例	结果
==	值相等	"5" == 5	✅
===	严格相等	"5" === 5	❌
大于		10 > "8"	✅

避坑指南：

优先用 === 避免隐式类型转换
NaN === NaN 的结果是 false（特殊记忆！）

3. 逻辑运算符

js 复制代码

// &&（与）：两个条件都为真
if (age > 18 && hasLicense) { /* 允许驾驶 */ }

// ||（或）：任意条件为真
if (isRainy || isSnowy) { /* 带伞 */ }

// !（非）：取反
console.log(!true);  // false

二、流程控制：代码的"红绿灯"

1. 条件分支：if/else

js 复制代码

// 基本结构
const score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 60) {
  console.log("B");
} else {
  console.log("C");
}

2. 开关语句：switch

js 复制代码

// 适合多条件精确匹配
const fruit = "苹果";
switch (fruit) {
  case "香蕉":
    console.log("黄色");
    break;  // 必须break！
  case "苹果":
    console.log("红色");
    break;
  default:
    console.log("未知水果");
}

3. 循环结构

for 循环

js 复制代码

// 打印1-5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

如果把 for 循环里面的 let 变成 const，打印结果会一样吗？为什么？

js 复制代码

for (const i = 1; i <= 5; i++) {
  console.log(i);
}

while 循环

js 复制代码

// 适合未知循环次数
let count = 3;
while (count > 0) {
  console.log(`剩余次数：${count}`);
  count--;
}

do...while 循环

js 复制代码

// 适合未知循环次数
let num = 3;
do {
console.log(`剩余次数：${num}`);
num--;
} while (num > 0);

循环控制

break：立刻终止整个循环
continue：跳过本次循环，继续下一次

三、实战：9 行代码生成九九乘法表

1. 完整代码

js 复制代码

for (let i = 1; i <= 9; i++) {       // 外层控制行数
  let line = "";
  for (let j = 1; j <= i; j++) {     // 内层控制每行公式
    line += `${j}x${i}=${i*j}\t`;    // \t 制表符对齐
  }
  console.log(line);
}

1. 效果演示

3. 代码解析

双重循环：外层遍历行数，内层遍历每行公式
字符串拼接：用模板字符串动态生成公式
转义字符：\t 实现控制台输出对齐

4.高颜值九九乘法表

下节预告

第 4 课：函数基础------JS 的"魔法咒语"

如何封装可复用的代码块？
箭头函数 vs 普通函数
实战：开发"随机抽奖器"！

关注公众号，回复【JS】获取本课源码+工具包！