JavaScript手录04-【if-else&switch】语句

一、表达式、语句和函数

语句（Statements）

语句是 JavaScript 执行的基本单位，用于完成特定操作（如判断、循环、赋值等）。

语句通常以分号 ; 结束（某些情况下可省略），多个语句可以组成代码块（用 {} 包裹）。

特点：

• 语句的执行会产生某种行为（如改变变量值、控制流程）
• 语句本身没有返回值（或返回值为 undefined）

常见语句：if-else、for、while、return、break 等。

函数（Functions）

函数是封装了一段可重复执行的代码块，用于完成特定功能。函数可以接收输入（参数），并返回输出（返回值）。

特点：

• 实现代码复用，避免重复编写
• 使代码结构更清晰，便于维护
• 可以作为值传递（JavaScript 中函数是一等公民）

表达式（Expressions）

表达式是可以计算出一个值的代码片段，有返回值。

通常可以认为表达式与值是等效的。

常见表达式：

1 + 2; // 算术表达式，返回 3
"Hello" + " World"; // 字符串表达式，返回 "Hello World"
add(2, 3); // 函数调用表达式，返回 5
x > 5; // 比较表达式，返回布尔值

二、if-else 语句

if-else 是条件判断语句，用于根据条件执行不同的代码块。

基本语法

// 单条件判断
if (条件表达式) {
  // 条件为 true 时执行
} else {
  // 条件为 false 时执行（可选）
}

// 多条件判断
if (条件1) {
  // 条件1 为 true 时执行
} else if (条件2) {
  // 条件1 为 false 且条件2 为 true 时执行
} else {
  // 所有条件都为 false 时执行（可选）
}

示例

const score = 85;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}
// 输出：及格

注意点

• 条件表达式会被自动转换为布尔值（参考“假值”判断规则）
• 若代码块只有一行语句，可省略 {}，但建议始终保留以提高可读性

:::info
注：在这里回忆一下标准假值

:::

值	逻辑值
false	false
0, +0, -0	false
""	false
null	false
undefined	false
NaN	false
其他情况	true

三、switch语句

switch 语句是 JavaScript 中用于多条件判断的流程控制语句，适合当一个变量或表达式有多个可能的值，且需要针对每个值执行不同操作的场景（类似于多个 if-else 的组合，但结构更清晰）。

基本语法

switch(表达式) {
  case 值1:
    // 当表达式结果等于值1时执行的代码
    break;
  case 值2:
    // 当表达式结果等于值2时执行的代码
    break;
  // ... 更多case
  default:
    // 当表达式结果与所有case值都不匹配时执行的代码（可选）
}

核心要素：

• 表达式：需要判断的值（如变量、计算结果等），会与每个 case 后的值比较。
• case 值：与表达式结果比较的值（类型严格匹配，即 ===）。
• break：跳出 switch 语句（若省略，会继续执行下一个 case 的代码，称为“穿透”）。
• default：所有 case 都不匹配时执行的默认分支（可选，通常放最后）。

工作原理

1. 计算 switch 后的表达式的值。
2. 依次与每个 case 后的“值”进行严格相等比较（===）：
   • 若匹配，执行该 case 下的代码，直到遇到 break 则跳出整个 switch。
   • 若不匹配，继续检查下一个 case。
3. 若所有 case 都不匹配，执行 default 下的代码（若有）。

示例1：基本用法（根据星期几输出对应内容）

const day = 3; // 假设1=周一，2=周二...7=周日

switch(day) {
  case 1:
    console.log("今天是周一，打起精神！");
    break;
  case 2:
    console.log("今天是周二，继续努力！");
    break;
  case 3:
    console.log("今天是周三，中期冲刺！");
    break; // 匹配后执行到break，跳出switch
  case 4:
    console.log("今天是周四，坚持住！");
    break;
  case 5:
    console.log("今天是周五，即将解放！");
    break;
  case 6:
  case 7: // case 6和7共享同一套代码（利用穿透）
    console.log("今天是周末，好好休息！");
    break;
  default:
    console.log("输入错误，星期应为1-7");
}

// 输出：今天是周三，中期冲刺！

示例2：省略break的“穿透”效果

const num = 2;

switch(num) {
  case 1:
    console.log("执行case 1");
  case 2:
    console.log("执行case 2");
  case 3:
    console.log("执行case 3");
  default:
    console.log("执行default");
}

// 输出：
// 执行case 2
// 执行case 3
// 执行default

原因：num 匹配 case 2 后，由于没有 break，会继续执行 case 3 和 default 的代码（穿透现象）。

注意事项

1. 严格相等比较（===）：
   case 比较时会检查值和类型是否都相同，例如 case "2" 与 switch(2) 不匹配（字符串 vs 数字）。

switch(2) {
  case "2": 
    console.log("匹配"); // 不会执行（类型不同）
    break;
  default:
    console.log("不匹配"); // 输出：不匹配
}

2. break** 的必要性**：
   若不需要穿透效果，每个 case 后必须加 break，否则会继续执行下一个分支。
3. default** 的位置**：
   default 可以放在任何位置（不一定在最后），但通常建议放最后，且后面可省略 break（因为已是最后分支）。
4. 与 if-else 的选择：
   • 当条件是具体值匹配（如变量等于A、B、C等），switch 更清晰。
   • 当条件是范围判断（如大于、小于、区间），if-else 更合适。

适用场景

• 处理固定值的多分支判断（如状态码、类型标识、选项选择等）。
• 减少多个 if-else 嵌套带来的代码冗余。

四、函数（方法）

函数的定义（声明）

JavaScript 有多种定义函数的方式：

（1）函数声明（Function Declaration）

// 语法：function 函数名(参数1, 参数2, ...) { 函数体 }
function add(a, b) {
  return a + b; // return 用于返回结果，结束函数执行
}

**特点：**存在“函数提升”（可以在声明前调用）。

（2）函数表达式（Function Expression）

// 语法：const 变量名 = function(参数1, 参数2, ...) { 函数体 }
const multiply = function(a, b) {
  return a * b;
};

**特点：**赋值给变量，需在声明后调用，无函数提升。

（3）箭头函数（Arrow Function）

// 语法：const 变量名 = (参数1, 参数2, ...) => { 函数体 }
const subtract = (a, b) => {
  return a - b;
};

// 简化写法（单表达式可省略 {} 和 return）
const divide = (a, b) => a / b;

**特点：**无自己的 this，无法用作构造函数，适合简短逻辑。

函数的调用

通过 函数名(参数1, 参数2, ...) 调用函数，获取返回值。

// 调用 add 函数
const result = add(2, 3);
console.log(result); // 输出：5

// 调用无参数函数
function sayHello() {
  console.log("Hello");
}
sayHello(); // 输出：Hello

函数的封装

封装是将一段逻辑包裹在函数中，实现“黑箱操作”（只暴露输入输出，隐藏内部细节）。

**示例：**封装一个计算圆面积的函数

// 封装：内部细节（公式）被隐藏
function calculateCircleArea(radius) {
  const PI = 3.14159; // 内部变量，外部无法访问
  return PI * radius * radius;
}

// 使用：只需传入半径，无需关心内部计算
console.log(calculateCircleArea(5)); // 输出：78.53975

函数的返回值

函数是一个纯过程，没有任何结果。

如果函数的执行需要一个结果，可以使用 return关键字。

return关键字可以用于返回函数执行的结果，也可以用于退出函数运行。

// 封装：内部细节（公式）被隐藏
function calculateCircleArea(radius) {
  const PI = 3.14159; // 内部变量，外部无法访问
  // return 关键字，返回函数的执行结果
  return PI * radius * radius;
}
let res = calculateCircleArea(5)
// 使用：只需传入半径，无需关心内部计算
console.log(res); // 输出：78.53975

五、变量的作用域

变量的作用域指变量可被访问的范围，分为以下几种：

1. 全局作用域

• 在函数外部声明的变量，整个脚本都能访问
• 未声明直接赋值的变量（隐式全局变量）

const globalVar = "我是全局变量";

function test() {
  console.log(globalVar); // 可访问全局变量
}
test(); // 输出：我是全局变量

2. 函数作用域

• 在函数内部声明的变量（包括参数），仅在函数内部可访问

function test() {
  const funcVar = "我是函数内变量";
  console.log(funcVar); // 可访问
}

test();
console.log(funcVar); // 报错：funcVar 未定义

3. 块级作用域（ES6+）

• 用 let、const 在代码块（{}）中声明的变量，仅在块内可访问
• 常见于 if、for、while 等语句的代码块

if (true) {
  let blockVar = "我是块级变量";
  console.log(blockVar); // 可访问
}

console.log(blockVar); // 报错：blockVar 未定义

作用域链

当访问变量时，JavaScript 会先在当前作用域查找，找不到则向上级作用域查找，直到全局作用域（若仍找不到则报错）。

const global = "全局";

function outer() {
  const outerVar = "外层";
  
  function inner() {
    const innerVar = "内层";
    // 访问各级变量
    console.log(innerVar); // 内层
    console.log(outerVar); // 外层
    console.log(global);   // 全局
  }
  
  inner();
}

outer();

总结

• 语句控制程序流程，完成具体操作（如 if-else 实现分支）
• 函数封装可复用代码，通过参数和返回值实现输入输出
• 作用域决定变量的可访问范围，影响代码安全性和灵活性
• 表达式产生值，语句执行操作，两者共同构成 JavaScript 代码逻辑

练习

练习1：if-else 语句判断

题目：写出以下代码的输出结果

const num = 0;
if (num) {
  console.log("A");
} else if (num === 0) {
  console.log("B");
} else {
  console.log("C");
}

提示：回忆“假值”判断规则，0 是否属于假值

练习2：函数调用与返回值

题目：补全函数 getDiscount，使其根据购买金额返回折扣后价格

• 金额 ≥ 1000 元，打 8 折
• 金额 ≥ 500 元，打 9 折
• 其他情况不打折

function getDiscount(price) {
  // 补全代码
}

console.log(getDiscount(1200)); // 应输出 960
console.log(getDiscount(600));  // 应输出 540
console.log(getDiscount(300));  // 应输出 300

提示：使用 if-else 分支和 return 语句

练习3：函数声明方式对比

题目：判断以下代码是否会报错，为什么？

// 情况1
func1();
function func1() {
  console.log("func1");
}

// 情况2
func2();
const func2 = function() {
  console.log("func2");
};

提示：区分函数声明和函数表达式的“提升”特性

练习4：变量作用域判断

题目：写出以下代码的输出结果

const globalVar = "全局";

function outer() {
  const outerVar = "外层";
  if (true) {
    const blockVar = "块级";
    console.log(outerVar); // 输出？
  }
  console.log(blockVar); // 输出？
}

outer();
console.log(outerVar); // 输出？

提示：区分全局作用域、函数作用域、块级作用域的访问范围

练习5：表达式与语句区分

题目：判断下列代码中哪些是表达式，哪些是语句？

1. let x = 10;
2. x + 5;
3. function add(a, b) { return a + b; }
4. add(3, 4);
5. if (x > 0) {}

提示：表达式有返回值，语句执行操作

练习6：综合应用（函数封装）

题目：封装一个函数 checkPassword，判断密码是否符合规则：

• 长度 ≥ 8
• 包含至少一个数字

function checkPassword(password) {
  // 补全代码（返回 true/false）
}

console.log(checkPassword("1234567"));    // false（长度不足）
console.log(checkPassword("abcdefgh"));   // false（无数字）
console.log(checkPassword("abc123456"));  // true

提示：使用字符串 length 属性和正则表达式（如 /\d/ 匹配数字）

练习7：switch

题目：将下列代码重写为switch实现

let flag = prompt('请输入','')
if(flag == 1){
  alert('测试通过！')
}else if(flag == 2){
  alert('很不错！')
}else if(flag == 3){
  alert('非常好！')
}else {
  alert('测试不通过！')
}

参考答案（可先自行思考再对照）

1. 输出 B（0 是假值，进入第二个分支）
2. 补全代码：

function getDiscount(price) {
  if (price >= 1000) {
    return price * 0.8;
  } else if (price >= 500) {
    return price * 0.9;
  } else {
    return price;
  }
}

3. 情况1正常执行（函数声明提升），情况2报错（函数表达式无提升，调用时未定义）
4. 依次输出：外层、报错（blockVar 是块级变量）、报错（outerVar 是函数内变量）
5. 表达式：2、4；语句：1、3、5
6. 补全代码：

function checkPassword(password) {
  return password.length >= 8 && /\d/.test(password);
}

7. switch

let flag = prompt('请输入！','')
switch (+flag) {
  case 1:
    alert('测试通过！'); break;
  case 2:
    alert('很不错！'); break;
  case 3:
    alert('非常好！'); break;
  default:alert('测试不通过！');
}