流程控制

约 1649 字大约 6 分钟

2026-03-18

手写笔记

一、流程控制基础

1.1 流程图

用于直观描述代码执行顺序的图形化工具。

1.2 `if` 判断语句

if (条件1) {
  // 条件1满足时执行
} else if (条件2) {
  // 条件1不满足、条件2满足时执行
} else {
  // 所有条件都不满足时执行
}

核心规则：
1. 某个条件满足后，直接忽略后面所有条件；
2. else if 可以有多个（包含 0 个），else 只能有 1 个或 0 个；
3. else if 可以换行，也可以不换行；
4. 如果代码块只有一条语句，大括号可以省略（不推荐）；
5. 整个 if 结构中，判断只会出现一次。

1.3 `switch` 开关语句

switch (表达式) {
  case 数据1:
    代码块1
    break;
  case 数据2:
    代码块2
    break;
  // ...
  default:
    代码块n
}

执行逻辑：
1. 计算表达式返回值，依次和 case 后的数据进行 严格相等（===） 比较；
2. 匹配到某个 case 后，停止比较，执行该 case 后的代码，直到遇到 break 或 switch 结束；
3. default 表示前面所有 case 都不匹配时执行，可省略。
注意：case 内部必须加 break，否则会“穿透”到下一个 case,无论 case 是否匹配，都一律执行。

1.4 循环语句

（1）`while` 循环

while (条件) {
  // 循环体：条件为 true 时重复执行
}

先判断条件，再执行循环体；条件为 false 时，循环体可能一次都不执行。

（2）`do-while` 循环

do {
  // 循环体
} while (条件);

先执行一次循环体，再判断条件；循环体至少执行一次。

（3）`for` 循环

for (初始化表达式; 条件; 条件改变表达式) {
  // 循环体
}

执行顺序：初始化 → 条件判断 → 循环体 → 条件改变 → 条件判断 → ...
适合已知循环次数的场景。

1.5 循环关键字

break：跳出当前整个循环，循环立即终止；
continue：跳过当前循环迭代，进入下一次循环。

二、数组基础

2.1 数组创建

方式 1：构造函数创建

let arr = new Array(长度); // 创建指定长度的空数组

方式 2：字面量创建（推荐）

let arr = [数据1, 数据2, ...]; // 直接初始化数组元素

2.2 数组本质与核心属性

本质：数组是对象，由键值对组成，键是下标（索引），值是数组元素；
length 属性：数组长度，会自动变化（添加/删除元素时更新）； ⚠️ 实际开发中不要手动给 length 赋值，会破坏数组结构。

2.3 稀疏数组

定义：下标不连续的数组（比如跳过某些下标赋值）；
本质：数组对象中某些下标属性不存在。

三、数组常用操作（含返回值+原数组影响）

操作方法	语法示例	返回值	是否影响原数组	补充说明
添加数组项
`push()`	`arr.push(数据1, 数据2...)`	新数组的长度	✅ 是	向数组末尾添加一个/多个数据
`unshift()`	`arr.unshift(数据1, 数据2...)`	新数组的长度	✅ 是	向数组开头添加一个/多个数据
`splice()`（添加）	`arr.splice(下标, 0, 数据1, 数据2...)`	空数组（`[]`）	✅ 是	从指定下标插入数据，第二个参数为 0 表示不删除
删除数组项
`delete` 运算符	`delete arr[下标]`	`true`（删除成功）	✅ 是（但长度不变）	仅删除值，保留下标，生成稀疏数组（不推荐）
`pop()`	`arr.pop()`	被删除的最后一项	✅ 是	删除数组最后一项，数组为空时返回 `undefined`
`shift()`	`arr.shift()`	被删除的第一项	✅ 是	删除数组第一项，数组为空时返回 `undefined`
`splice()`（删除）	`arr.splice(下标, 个数)`	被删除元素组成的新数组	✅ 是	从指定下标删除指定个数的元素
剪切/提取数组
`slice()`	`arr.slice(起始下标, 结束下标)`	提取出的新数组（左闭右开）	❌ 否	下标可为负数（-1 表示最后一项），省略结束下标则提取到末尾
数组清空
`splice()`（清空）	`arr.splice(0, arr.length)`	包含所有被删除元素的数组	✅ 是	清空数组，返回原数组所有元素
`length` 赋值清空	`arr.length = 0`	`0`（赋值的结果）	✅ 是	直接清空数组，无返回值（赋值表达式返回赋值的数）
查找下标
`indexOf()`	`arr.indexOf(数据, 起始下标)`	数据第一次出现的下标，找不到返回 `-1`	❌ 否	从前往后查找，第二个参数可选（指定起始查找位置）
`lastIndexOf()`	`arr.lastIndexOf(数据, 起始下标)`	数据最后一次出现的下标，找不到返回 `-1`	❌ 否	从后往前查找，第二个参数可选
填充数组
`fill()`	`arr.fill(数据, 开始下标, 结束下标)`	填充后的原数组	✅ 是	左闭右开区间填充，省略下标则填充所有项

补充说明

splice() 是多功能方法：
- 语法：arr.splice(起始下标, 删除个数, 插入数据1, 插入数据2...)
- 核心：第二个参数控制删除行为，后续参数控制插入行为
slice() 特殊用法：
- arr.slice() / arr.slice(0)：创建原数组的浅拷贝，返回新数组，不影响原数组

四、语法补充

4.1 `in` 关键字

作用：判断某个属性（下标）在对象/数组中是否存在

let arr = [1, 2, 23];
"1" in arr; // true（下标 1 存在）
7 in arr;   // false（下标 7 不存在）

返回值：boolean（true/false）
是否影响原数组：❌ 否

4.2 `for-in` 循环

遍历对象的可枚举属性（数组的下标）

for (let k in arr) {
  console.log(k); // 遍历数组下标："0", "1", "2"...
}

返回值：无（循环语句无返回值）
是否影响原数组：❌ 否

五、核心总结

流程控制：if/switch 实现分支，while/do-while/for 实现循环，break/continue 控制循环流程；
数组操作核心规则：
- 增删类方法（push/pop/unshift/shift/splice）均修改原数组，slice/indexOf 不修改原数组；
- splice 返回被删除元素数组（无删除则返回空数组），push/unshift 返回新长度，pop/shift 返回被删元素；
- delete 仅删值不删下标，会生成稀疏数组，开发中优先用 splice/pop/shift 删除元素；
数组遍历与判断：for-in 遍历下标，in 判断属性存在，indexOf 查找元素位置（找不到返回 -1）。