Switch语句与字符串模板 - 更优雅的代码表达 🎯

概念介绍

今天我们要学习两个让代码更优雅、更简洁的重要工具：

• Switch语句：处理多个固定选项的条件判断
• 字符串模板：让字符串处理变得更简单直观

Switch语句简介

什么是Switch语句？

Switch语句就像是餐厅的点菜单：

• 你有很多菜品选择（不同的选项值）
• 每个菜品对应不同的价格（不同的处理逻辑）
• 如果没有想要的菜品，有默认推荐（default分支）

Switch语句的语法结构

语法说明：

• switch：关键字，表示"根据...进行选择"
• 表达式：要进行比较的值（通常是变量）
• case：关键字，表示"如果等于这个值"
• break：关键字，表示"跳出switch语句"
• default：关键字，表示"默认情况"（类似于else）

Switch vs If-Else If-Else

让我们用同一个例子对比两种写法：

使用 if-else if-else

使用 switch

两种方式的对比：

特点	if-else if-else	switch
适用条件	可以处理各种复杂条件	主要处理精确相等比较
代码可读性	当条件很多时比较混乱	多选项时代码更清晰
性能	需要逐个检查条件	通常有更好的性能
灵活性	可以使用任意条件表达式	只能使用精确匹配

Switch语句的游戏应用

装备系统示例

游戏难度选择

++/-- 操作符 - 简化变量更新

在编程中，我们经常需要对变量进行加1或减1的操作。TypeScript 提供了两个简洁的操作符来完成这个任务。

++ 操作符 - 自增1

i++ 就是 i = i + 1 的简化写法：

-- 操作符 - 自减1

i-- 就是 i = i - 1 的简化写法：

在循环中使用操作符

操作符在循环中特别有用，可以简化循环变量的更新：

为什么要有操作符？

1. 更简洁：i++ 比 i = i + 1 更短
2. 更常用：在编程中，变量增减1的操作非常频繁
3. 更专业：这是程序员的标准写法

前缀 vs 后缀的区别

操作符可以放在变量前面（前缀）或后面（后缀）：

学习建议：

• 初学者：先用 i = i + 1 理解概念，再过渡到 i++
• 熟练后：使用 i++ 写简洁代码
• 团队开发：遵循团队的编码规范
• 避免混淆：在复杂表达式中优先使用 i = i + 1 避免前缀后缀的混淆

特殊基础类型：undefined 和 null

在我们继续学习之前，需要了解两个特殊的基础类型：undefined 和 null。

undefined 类型

undefined 表示"未定义"，当一个变量被声明但没有赋值时，它的默认值就是 undefined。

undefined 的常见场景：

• 变量声明但未赋值
• 函数没有返回值
• 访问对象不存在的属性（后面会学）
• 数组元素不存在时（后面会学）

null 类型

null 表示"空的值"或"无值"，是一个主动设置的空值。

null 的常见场景：

• 表示变量应该存在但目前没有值
• 清空变量内容
• 表示"无"或"空"的状态

undefined vs null 的区别

特点	undefined	null
含义	未定义，从未赋值	故意设置为空
触发方式	系统自动	程序员主动设置
类型检查	typeof x === "undefined"	x === null
常见用途	变量未初始化	表示"无值"状态

在字符串模板中处理 undefined 和 null

在 Switch 语句中处理特殊值

理解 undefined 和 null 对编写健壮的程序非常重要，它们帮助我们处理各种边界情况和异常状态！

字符串模板（Template Literals）

什么是字符串模板？

字符串模板是JavaScript中创建字符串的新方式，使用反引号（`）而不是普通引号（' 或 "）。

传统字符串拼接

使用字符串模板

字符串模板的语法特点

1. 基本语法：使用反引号

2. 插入变量：使用 ${变量名}

3. 插入表达式：使用 ${表达式}

4. 多行字符串：直接换行

字符串模板的实际应用

游戏状态显示

游戏事件日志

物品描述

综合练习：结合Switch和字符串模板

练习1：角色创建器

练习2：游戏商店系统

练习3：状态报告生成器

总结

今天我们学习了两个重要的编程工具：

Switch语句

• 适用场景：处理多个固定选项的条件判断
• 语法简洁：多选项时比if-else if-else更清晰
• 性能优秀：通常有更好的执行效率
• 注意事项：记得使用break语句

字符串模板

• 语法简单：使用反引号（`）
• 插值方便：$\{变量名\}或$\{表达式\}
• 多行支持：直接换行，不需要特殊字符
• 代码更清晰：避免了复杂的字符串拼接

这两个工具结合起来，可以让你的代码既优雅又易读，特别是在处理游戏状态、用户界面文本和配置信息时非常有用！

扩展运算符 (...) - 现代JavaScript的强大工具

什么是扩展运算符？

扩展运算符（Spread Operator） 使用三个点 ... 语法，能够"展开"数组或对象中的所有元素。这是现代JavaScript/TypeScript中非常重要且常用的语法。

数组的扩展运算符应用

1. 数组复制：创建独立副本

2. 数组合并：连接多个数组

3. 在数组任意位置添加元素

对象的扩展运算符应用

1. 对象复制：创建独立副本

2. 对象部分更新：只修改指定属性

3. 对象合并：组合多个对象

4. 动态对象构造：基于变量创建对象

扩展运算符的优势

1. 语法简洁易读

传统方式 vs 扩展运算符：

2. 不可变数据更新

扩展运算符总是创建新的数组/对象，符合函数式编程的不可变性原则：

3. 灵活的位置操作

可以在数组的任意位置插入元素：

扩展运算符 vs 传统方法的对比

操作	传统方法	扩展运算符	优势
数组复制	array.slice()	[...array]	语法更简洁
数组合并	array1.concat(array2)	[...array1, ...array2]	更直观，可多位置合并
对象复制	Object.assign({}, obj)	{...obj}	语法简单，不需要额外方法
对象合并	Object.assign(obj1, obj2)	{...obj1, ...obj2}	语法一致，更易记
不可变更新	需要手动复制属性	{...obj, prop: value}	一行代码完成

实际应用场景

1. 游戏状态管理

2. 配置管理

3. 购物车管理

学习建议

1. 从简单开始：先学会数组复制和合并
2. 理解不可变性：掌握扩展运算符创建新数据而不是修改原数据
3. 逐步掌握对象：在熟悉数组扩展后学习对象扩展
4. 实际应用：在项目中多使用，形成肌肉记忆

扩展运算符是现代JavaScript/TypeScript开发中不可或缺的工具，掌握它将大大提升你的编码效率！

变量命名风格

在编程中，有几种常见的命名风格，了解这些风格有助于写出更专业、更易读的代码。

1. camelCase（驼峰命名法）

• 特点：第一个单词小写，后面每个单词首字母大写
• 用途：主要用于变量名和函数名
• 例子：
  加载代码编辑器...

2. PascalCase（帕斯卡命名法）

• 特点：每个单词的首字母都大写
• 用途：主要用于类名和类型名（我们会在后面的课程中学习）
• 例子：
  加载代码编辑器...

3. snake_case（蛇形命名法）

• 特点：单词之间用下划线 _ 连接，所有字母小写
• 用途：在 C/C++、Python 等语言中使用较多，但在 TypeScript 中不推荐用于变量名
• 例子：
  加载代码编辑器...

推荐的命名规则

对于我们的课程，推荐遵循以下规则：

1. 使用 camelCase（驼峰命名法）用于变量和函数
2. 使用英文单词命名变量名
3. 特殊说明：在我们的课程里面有极个别地方会使用中文变量名，主要是为了方便理解概念

基本命名规则（在变量章节中已详细学习）：

• 只能包含字母、数字、下划线和美元符号
• 不能以数字开头
• 不能使用空格
• 区分大小写

Switch语句中的变量命名最佳实践

在使用 Switch 语句时，好的变量命名能让代码更加清晰：

练习：修正变量名错误

练习1：修正数字开头的变量名

提示：变量名不能以数字开头

练习2：修正包含空格的变量名

提示：变量名不能包含空格

练习3：修正包含连字符的变量名

提示：变量名不能包含连字符（虽然 snake_case 使用下划线，但连字符在 TypeScript 中是不允许的）