1-6JavaScript分支语句

本页对应 第一章JavaScript基础，共 8 段视频，约 1 小时 19 分。

学习目标

• 能区分表达式与语句，并分别举例说明其是否可求值、是否表示执行行为。
• 能根据条件使用 if、if...else、else if 多分支语句编写代码，并说明其执行流程。
• 能识别 if 条件中的隐式类型转换，并在比较前主动统一数据类型。
• 能使用三元运算符简化简单双分支，并完成数字补 0 案例。
• 能使用 switch...case 编写等值判断分支，正确使用 break、default 并说明全等匹配要求。
• 能使用 Chrome 开发者工具打断点、单步执行，观察变量值和分支执行路径以排查问题。

知识点

为什么需要类型转换

为什么需要： 表单、prompt 取回来的数据默认是字符串类型。比如用户输入两个工资，直接相加会变成字符串拼接，而不是数学加法。
怎么想： 先判断数据来源和当前类型，再决定是手动转换，还是利用运算符自动转换。笔记把转换分为“显式转换”（笔记写作“显示转换”）和“隐式转换”。
怎么做： 显式转换是程序员明确写出 Number()、String()、Boolean() 等；隐式转换是运算符执行时系统自动转换。
易错点： 不要把“显示转换”理解成页面显示，它强调的是程序员主动、明确地转换类型。

显式转换为数字型

为什么需要： prompt 得到的是字符串，做加法前要转成数字，否则 '1' + '2' 会得到 '12'。
怎么想： 优先用 Number()；如果字符串以数字开头、后面带单位，如 100px，就用 parseInt() 或 parseFloat()。
怎么做： 看下面代码，先体验 prompt 相加，再分别验证 Number()、parseInt()、parseFloat()。
易错点： Number('abcd') 返回 NaN；Number(undefined) 也是 NaN；parseInt('100.5px') 只保留整数 100。

// 第一个数字
let num1 = prompt('请输入第一个月工资:')
// 第二个数字
let num2 = prompt('请输入第二个月工资:')
//  输出结果
alert(Number(num1) + Number(num2))

// 通过显示转换的方式把其他类型转换为数字型
// 1. Number() 最常用的一种方式 推荐 
// 1.1 把字符串转换为数字型
console.log(typeof Number('1')) // 1   number
console.log(Number('abcd')) // NaN 如果无法完成转换则返回NaN 

// 1.2 把布尔值转换为数字型 true false 
console.log(Number(true))  // 1
console.log(Number(false)) // 0

// 1.3 把 null undefined 转换为数字型
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN

// 2. parseInt() 和 parseFloat() 固定使用场景的   100px 只要100 不要px 
// 使用场景：把以数字开头的字符串，只保留数字这种情况下就可以使用 
console.log(parseInt('100px'))  // 100
console.log(parseInt('100.5px'))  // 100  parseInt() 只保留整数
console.log(parseFloat('100.5px'))  // 100.5 parseFloat() 可以返回小数

显式转换为字符串和布尔型

为什么需要： 有时需要把数字、布尔值变成字符串；分支语句又常需要布尔值，所以要掌握 String()、toString()、Boolean()。
怎么想： 转字符串开发中提倡 String(数据)；转布尔要记住 6 种假值：false、0、''、null、undefined、NaN，其余为真。
怎么做： 用 typeof 验证结果类型；toString(进制) 可把数字按进制转成字符串。
易错点： Boolean('0') 是 true，因为非空字符串为真；Boolean(0) 才是 false。转写稿中在 if 小括号里写 'pink' 会隐式转布尔为 true，只有空字符串等假值不执行。

// 1. 转换为字符串类型 
// 1.1 String(数据) 开发中提倡使用这种方式 
console.log(typeof String(1)) // '1'     string
console.log(String(true)) // 'true'     string

// 1.2 变量.toString(进制)
let num = 10
console.log(typeof num.toString()) //  string 
console.log(num.toString(10)) //  string   '10'
console.log(num.toString(8)) //  string   '12'

// 2. 转换为布尔型 Boolean  (重点) 因为接下来我们要学习分支语句需要用到
// 2.1 有6种情况为false： false 0 '' null undefined NaN (无，没有)
// 2.2 其余的都为true 
console.log(Boolean(false))  // false 
console.log(Boolean(0))  // false 
console.log(Boolean(1))  // true
console.log(Boolean(''))  // false
console.log(Boolean(null))  // false
console.log(Boolean(undefined))  // false
console.log(Boolean(NaN))  // false

隐式转换

为什么需要： 有些运算会自动转换类型，理解它才能解释“为什么结果和想象不一样”。
怎么想： -、*、/、比较运算符常把数据往数字型转；+ 只要有一侧是字符串就倾向拼接；! 会把值转成布尔再取反。
怎么做： 用 +prompt(...) 把输入转数字，比依赖比较时隐式转换更严谨。转写稿中高考成绩案例就强调：prompt 得到字符串，与 700 比较虽会隐式转数字，但最好在 prompt 前加正号统一类型。
易错点： 'pink' + 18 是字符串拼接；+'123' 才是数字 123；补零案例中 0 + number 仍是加法，必须写成 '0' + number 才是拼接出 09。可用断点调试：F12 打开源代码，在赋值和判断行打断点，刷新后点“下一步”，观察变量值来验证转换结果。

// // 第一个数字
// let num1 = +prompt('请输入第一个月工资:')
// // 第二个数字
// let num2 = +prompt('请输入第二个月工资:')
// //  输出结果
// alert(num1 + num2)

// 1. 隐式转换为数字型的运算符
// 1.1 算术运算符 - *  /   比较运算符  >   ==
console.log(8 - '3') // 5
console.log('1999' * '2') //  3998
console.log(3 > '1')   // true
console.log(3 == '3')  // true

// 1.2 + 正号使用的时候，也会把字符串转换为 数字型
console.log('123')  // '123'
console.log(+'123')  // 123
console.log(typeof +'123')  // number

// 2. 隐式转换为字符串型的运算符   + 拼接字符串 两侧只要有一个是字符串，结果就是字符串
console.log('pink' + 18)
console.log('' + 18)  // '18'

// 3. 隐式转换为布尔型的运算符  ！逻辑非
console.log(!true)  // false 
console.log(!0)  // true
console.log(!'')  // true
console.log(!null) // true
console.log(!undefined)  // true
console.log(!NaN)  // true
console.log(!false)  // true
console.log(!'pink') // false

小结与调试提醒

类型转换的核心是“先看类型，再决定运算”。显式转换让代码更明确，隐式转换要能读懂规则。调试时可在浏览器开发者工具“源代码”中给关键行打断点，刷新页面后单步执行，观察变量里到底是字符串还是数字；转写稿中的 if、补零、switch 全等判断都说明：类型不统一时，结果可能和预期不同。

表达式和语句

为什么需要：写程序要先分清“能算出结果”和“执行动作”的代码。怎么想：表达式可被求值并得到结果，如 3 + 4；语句是一段可执行代码，是一个行为，如循环打印。怎么做：程序有三大流程控制语句——顺序结构从上往下执行；分支结构按条件选择性执行；循环结构重复执行某段代码。易错点：表达式有返回值，语句不一定有；前面写的代码多是顺序结构，后面才学分支和循环。

分支语句总览

为什么需要：代码不能总是从上往下全执行，登录成功/失败就要二选一。怎么想：根据条件真假，选择性执行想要的代码。怎么做：分支包含 if 分支语句（重点）、三元运算符、switch 语句。易错点：if 最常用；switch 先了解；不要把所有分支都写成顺序执行。

if 单分支语句

为什么需要：只有满足条件时才执行某段代码。怎么想：小括号内条件结果为布尔值，true 进入大括号，false 不执行；若不是布尔类型，会像 Boolean() 一样转换。怎么做：

let score = +prompt('请您输入高考成绩:')
if (score >= 700) {
  alert('恭喜您考入黑马程序员')
}

易错点：大括号只有一句时可省略，但不提倡；prompt 取回字符串，比较前加 + 转数字更严谨；空字符串、0 等转布尔为 false。

if 双分支语句

为什么需要：有两个互斥结果时，需要一个“否则”。怎么想：条件真执行 if，假执行 else，二者只执行一个。怎么做：

let uname = prompt('请您输入用户名:')
let pwd = prompt('请您输入密码:')
if (uname === '刘德华' && pwd === '123456') {
  alert('登录成功，欢迎回来~')
} else {
  alert('登录失败，您输入的用户名和密码错误~')
}

易错点：判断相等用 ===，不要用 = 赋值；密码、身份证、电话更像字符串；两个条件同时满足用 &&。

if 多分支语句

为什么需要：多个条件区间判断，如成绩评语。怎么想：从上往下判断，满足一个就执行并退出整个多分支。怎么做：

let score = +prompt('请您输入考试成绩:')
if (score >= 90) {
  alert('优秀，棒棒棒~')
} else if (score >= 70) {
  alert('良好，棒棒~')
} else if (score >= 60) {
  alert('及格，棒~')
} else {
  alert('不及格，好好加油，你可以的~')
}

易错点：用 >= 时成绩要从大往小写；else if 可任意多个；else 不是必须的；后面的条件可省略上界，因为前面的条件已经筛走。

三元运算符

为什么需要：简单双分支用 if else 较长。怎么想：条件 ? 表达式1 : 表达式2，条件真执行表达式1，假执行表达式2，并返回一个值。怎么做：

let x = 100
let y = 20
console.log(x > y ? x : y)

let number = +prompt('请你输入一个数字')
number = number < 10 ? '0' + number : number
alert(number)

易错点：两个表达式只执行一个；补 0 要用字符串 '0' + number，数字 0 + 9 还是 9；复杂逻辑仍用 if else。

switch 语句

为什么需要：多个等值判断可用 switch。怎么想：拿表达式值和 case 值全等比较，匹配后执行，遇 break 退出，都不匹配执行 default。怎么做：

let fruits = '苹果'
switch (fruits) {
  case '香蕉':
    alert('香蕉的价格是: 3元/斤')
    break
  case '苹果':
    alert('苹果的价格是: 4元/斤')
    break
  case '橘子':
    alert('橘子的价格是: 2元/斤')
    break
  default:
    alert('没有查到此水果')
}

易错点：switch 适合等值判断，if 适合区间判断；匹配要求全等 ===；漏写 break 会 case 穿透，继续往下执行；开发中 if 多分支更常用。

断点调试

为什么需要：理解代码运行、快速找 bug。怎么想：在行号上打标记，程序运行到该行暂停，再一步步看变量和分支走向。怎么做：F12 打开开发者工具，点 Sources（源代码），选代码文件，在行号上点断点，刷新页面；按 F10 下一步，观察变量。转写稿中验证了：if 双分支条件真会跳到 alert，假会跳到 else；多分支会一层层判断；switch 会直接拿值匹配 case。易错点：打完断点要刷新页面；调试完取消断点；断点是暂停，不是删除代码。

循环语句：while 与 for

为什么需要：重复执行指定代码，如输出 10 次。怎么想：循环三要素是初始值、循环条件、变量计数。怎么做：

let i = 1
while (i <= 3) {
  document.write('月薪过万不是梦，毕业时候见英雄~<br>')
  i++
}

for (let i = 1; i <= 3; i++) {
  document.write('键盘敲烂要行动，前端行业一览众~ <br>')
}

易错点：while 忘记 i++ 会死循环；for 把三要素写在一起，最常用。

中止循环与无限循环

为什么需要：结果已得到时提前结束，或跳过某次。怎么想：break 中止整个循环，continue 中止本次循环；while(true)、for(;;) 构造无限循环，必须用 break 退出。怎么做：

for (let i = 1; i <= 6; i++) {
  if (i === 3) {
    continue
  }
  document.write(`第\${i}个孩子可以进入电影院<br>`)
}

for (; ;) {
  let love = prompt('你爱我吗?')
  if (love === '爱') {
    break
  }
}

易错点：continue 不结束整个循环；break 才退出；无限循环一定要有退出条件，否则页面一直弹窗。

课件图示

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>类型转换</title>
</head>
<body>
<script>
  // ===== 1. 显示转换：Number() 最常用，推荐 =====
  let num1 = prompt('请输入第一个月工资:')
  let num2 = prompt('请输入第二个月工资:')
  alert(Number(num1) + Number(num2))   // 不转就是字符串拼接

  console.log(typeof Number('1'))    // number
  console.log(Number('abcd'))        // NaN 转换失败
  console.log(Number(true))          // 1
  console.log(Number(false))         // 0
  console.log(Number(null))          // 0
  console.log(Number(undefined))     // NaN

  // ===== 2. parseInt / parseFloat：数字开头的字符串 =====
  console.log(parseInt('100px'))     // 100
  console.log(parseInt('100.5px'))   // 100  只保留整数
  console.log(parseFloat('100.5px')) // 100.5 可以保留小数

  // ===== 3. 转换为字符串 =====
  console.log(typeof String(1))      // string
  let num = 10
  console.log(typeof num.toString()) // string
  console.log(num.toString(8))       // '12'  按 8 进制输出

  // ===== 4. 转换为布尔型：只有 6 种情况为 false =====
  console.log(Boolean(false))     // false
  console.log(Boolean(0))         // false
  console.log(Boolean(''))        // false
  console.log(Boolean(null))      // false
  console.log(Boolean(undefined)) // false
  console.log(Boolean(NaN))       // false
  console.log(Boolean('pink'))    // true
  console.log(Boolean(1))         // true

  // ===== 5. 隐式转换 =====
  console.log(8 - '3')       // 5
  console.log('1999' * '2')  // 3998
  console.log(3 > '1')       // true
  console.log(3 == '3')      // true
  console.log(+'123')        // 123  正号也能转数字
  console.log(typeof +'123') // number
  console.log('pink' + 18)   // 'pink18'
  console.log('' + 18)       // '18'
  console.log(!0)            // true
  console.log(!'pink')       // false
</script>
</body>
</html>

要点解释：

• prompt 拿到的永远是字符串，两个字符串相加是拼接，所以必须 Number(num1) + Number(num2)。
• Number() 转换失败返回 NaN；Number(null) 是 0，Number(undefined) 是 NaN，这两个最容易记混。
• parseInt 只保留整数，parseFloat 保留小数；它们只适合“数字开头的字符串”（如 100px），parseInt('abc') 也是 NaN。
• toString(进制) 括号里可以写进制，num.toString(8) 得到 '12'，注意 null / undefined 不能调 toString。
• 布尔转换只记 6 个假值：false 0 '' null undefined NaN，其余全为 true（包括 '0' 这个非空字符串）。
• 隐式转换只记：- * / > == 会把数据转成数字；+ 两侧只要有一个字符串就是拼接；! 会转布尔并取反。

---

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>if 分支与三元运算符</title>
</head>
<body>
<script>
  // ===== 1. if 单分支：只有满足条件才执行 =====
  let score = +prompt('请您输入高考成绩:')
  if (score >= 700) {
    alert('恭喜您考入黑马程序员')
  }

  // ===== 2. if 双分支：用户登录 =====
  let uname = prompt('请您输入用户名:')
  let pwd = prompt('请您输入密码:')
  if (uname === '刘德华' && pwd === '123456') {
    alert('登录成功，欢迎回来~')
  } else {
    alert('登录失败，您输入的用户名和密码错误~')
  }

  // ===== 3. if 多分支：成绩评语，从大往小写 =====
  let score2 = +prompt('请您输入考试成绩:')
  if (score2 >= 90) {
    alert('优秀，棒棒棒~')
  } else if (score2 >= 70) {
    alert('良好，棒棒~')
  } else if (score2 >= 60) {
    alert('及格，棒~')
  } else {
    alert('不及格，好好加油，你可以的~')
  }

  // ===== 4. 三元运算符：求两个数字的最大值 =====
  let x = 100
  let y = 20
  console.log(x > y ? x : y) // 100

  // ===== 5. 三元运算符：数字补 0 案例 =====
  let number = +prompt('请你输入一个数字:')
  number = number < 10 ? '0' + number : number
  alert(number)
</script>
</body>
</html>

要点解释：

• +prompt(...) 把字符串隐式转成数字，让两边数据类型统一，比依赖 >= 的隐式转换更严谨。
• 登录案例用的是 === 全等，且密码 '123456' 必须写成字符串，因为 prompt 取回来是字符串，写成数字 123456 永远不相等。
• 多分支的判断顺序必须从大往小写（90 → 70 → 60），因为 else if 只有在前面条件不成立时才会走到，写反了 66 分会先命中 60 那一条。
• 三元运算符格式：条件 ? 表达式1 : 表达式2，条件为真取表达式1，为假取表达式2，两者只会执行一个。
• 补 0 时 '0' + number 里的 0 必须加引号，写成 0 + 9 结果是数字 9，补零就失效了。
• number = number < 10 ? '0' + number : number 是先把右侧算完再赋值给左边，所以变量里存的是“处理后的结果”，方便后面多次使用。

---

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>switch 与循环</title>
</head>
<body>
<script>
  // ===== 1. switch：等值判断，查水果价格 =====
  let fruits = '苹果'
  switch (fruits) {
    case '香蕉':
      alert('香蕉的价格是: 3元/斤')
      break
    case '苹果':
      alert('苹果的价格是: 4元/斤')
      break
    case '橘子':
      alert('橘子的价格是: 2元/斤')
      break
    default:
      alert('没有查到此水果')
  }

  // ===== 2. while 循环：三要素 =====
  let i = 1
  while (i <= 3) {
    document.write('月薪过万不是梦，毕业时候见英雄~<br>')
    i++ // 忘了自增就是死循环
  }

  // ===== 3. for 循环 + continue：跳过 3 号 =====
  for (let j = 1; j <= 6; j++) {
    if (j === 3) {
      continue // 中止本次循环，继续下一次
    }
    document.write(`第${j}个孩子可以进入电影院<br>`)
  }

  // ===== 4. for 循环 + break：得到结果就停 =====
  for (let k = 1; k <= 6; k++) {
    document.write(`我是第${k}个孩子 <br>`)
    if (k === 3) {
      break // 中止整个循环
    }
  }

  // ===== 5. 无限循环 + break 退出 =====
  for (;;) {
    let love = prompt('你爱我吗?')
    if (love === '爱') {
      break
    }
  }
</script>
</body>
</html>

要点解释：

• switch 的匹配是全等 ===，switch('3') 不会命中 case 3，值和数据类型都要一致。
• case 后面的冒号、break 都不能漏；漏掉 break 会造成 case 穿透，会继续往下执行下一个 case 的代码，甚至一路漏到 default。
• default 是所有 case 都匹配不上时执行，放在最后，不需要 break。
• switch 适合等值判断，if 多分支适合区间判断（>=、<=），实际开发中 if 用得更 多。
• while 循环三要素：初始值、循环条件、变量计数，i++ 忘了写就是死循环。
• continue 只跳过本次，后续循环照常；break 直接结束整个循环，二者不要混用。
• for (;;) 和 while (true) 都能构造无限循环，必须配合 break 才有出口，否则页面会一直弹窗。

常见错误

1. prompt 取到的值直接参与加法

• 现象：输入 10 和 20，弹出 1020；做减法时却正常得到 30。
• 原因：prompt 返回字符串，+ 两侧只要有一个是字符串就执行拼接，不做隐式转数字；而 - * / 会隐式转数字，所以表现不一致。
• 修法：取数后立刻显式转换，let n = +prompt('...') 或 Number(prompt('...'))，并养成"先转换、再运算"的书写顺序。

2. 用 = 当比较、用 == 当严格比较

• 现象：if (uname = '刘德华') 无论输入什么都进入分支；switch('1') 配 case 1 永远不匹配。
• 原因：= 是赋值，赋值表达式的值就是被赋的值，非空字符串转布尔为 true；switch 内部用 === 匹配，值相等但类型不同就失败。
• 修法：比较一律写 ===；switch 前把表达式和 case 值统一成同一类型（如都转 Number 或都保持字符串）。

3. 多分支顺序写反

• 现象：输入 66 分，输出"优秀"。
• 原因：else if 自上而下短路匹配，写成 if (score >= 60) 在前，66 先命中 60 那一档就退出，后面的判断根本不执行。
• 修法：用 >= 判断时数字必须从大到小排列；或改成上下界都写的区间判断 score >= 60 && score < 70，此时顺序无所谓。

4. 把"有值"当"为真"来用

• 现象：if (score) 在成绩为 0 时被判为不通过；if ('0') 却进分支。
• 原因：布尔转换只有 false 0 '' null undefined NaN 六个假值，其余全真；'0' 是非空字符串，为真。
• 修法：判断数值是否有效要写明确比较 score !== 0 / score > 0，不要依赖变量本身做条件。

5. 循环变量忘记自增，或自增被 continue 跳过

• 现象：页面卡死；或 while 中加了 continue 后进入死循环。
• 原因：循环三要素缺"变量计数"，条件永远成立；continue 会跳过本次循环体剩余语句，若 i++ 写在 continue 之后就被永久跳过（for 的 i++ 写在头部所以不受影响）。
• 修法：写循环前先写全三要素；用 while + continue 时把自增放到 continue 之前，或直接改用 for。

6. break 与 continue 混用

• 现象：只想跳过第 3 个，结果第 4、5、6 个全没了。
• 原因：break 是终止整个循环，continue 才是跳过本次。
• 修法：问自己一句"后面的还要不要做"——要，用 continue；不要（结果已得到），用 break。

7. 省略大括号后多写了一行

• 现象：if 里的第二行代码无论条件真假都执行。
• 原因：无大括号时 if 只控制紧跟的第一条语句。
• 修法：初学阶段一律写完整大括号，等熟练后再考虑省略。

练习

练习 1｜工资合计（类型转换） 用两个 prompt 分别输入两个月工资，弹出合计值。要求：不允许出现 1020 这类拼接结果；再用 Number() 和 + 正号两种写法各实现一次，比较代码量。

练习 2｜两个数取大（双分支 vs 三元） 给定 x = 100、y = 20，分别用 if else 和三元表达式输出较大值。完成后回答：如果把三元结果 console.log 掉改成存进变量 max，写法要怎么调整？

练习 3｜数字补零（三元 + 变量回写） 输入一个数字，小于 10 时输出形如 09 的两位字符串，否则原样输出。要求结果先存回变量再 alert，并测试 8、10、0 三个输入。思考：为什么 0 + num 得不到 09？

练习 4｜成绩等级（多分支边界） 输入成绩，输出优秀（≥90）/良好（≥70）/及格（≥60）/不及格。必须测试 90、89、70、60、0 五个输入，验证边界值归属是否正确；再把判断顺序故意改成从小到大，观察 66 分的输出并说明原因。

练习 5｜水果价格（switch + 调试） 用 switch 实现水果价格查询，含 default 分支。故意删掉某个 case 的 break，观察输出并解释现象，然后修复。最后用 F12 → Sources 在 switch 那行打断点，按 F10 单步，记录"表达式的值"与"匹配到的 case"分别在哪一步产生。

原视频对照

#	视频	时长
1	表达式和语句	03:57
2	if分支语句	11:41
3	if双分支语句	11:56
4	多分支语句	12:43
5	三元运算符	08:16
6	数字补0案例	07:55
7	switch分支语句	11:57
8	断点调试	11:14

小结

1. 取数先转换：凡是 prompt、表单来的数据，默认当字符串处理，落地第一件事就是转成目标类型，别指望运算符帮你兜底。
2. + 是唯一会"叛变"的算术运算符：- * / > == 都隐式转数字，只有 + 遇字符串就拼接，这是大量 bug 的源头。
3. 假值只有六个：false 0 '' null undefined NaN。写条件前先问"这个变量是什么类型、可能是哪个假值"，比背结论更有用。
4. 分支选型看形状：单条件用 if；二选一优先三元（能返回值、可赋值）；多区间用 else if；等值多项用 switch，但 if 多分支才是开发主力。
5. 三元是表达式，if 是语句：表达式有结果、能赋值能传参，语句只是行为。需要"值"时用三元，需要"做一串事"时用 if。
6. 多分支的顺序就是优先级：>= 必须从大到小写，顺序错了逻辑全错，且编译器不会报错——只能靠边界值测试发现。
7. 循环先想"怎么停"：三要素（初值、条件、自增）先写全再写循环体；死循环 90% 是漏自增，或自增被 continue 跳过。
8. 调试不是救命稻草，是验证工具：断点 + F10 单步能看见变量的真实取值和真实的跳转路径，凡是"我觉得应该走这边"的地方，都值得打一个断点确认。