JavaScript 流程控制与数组操作全解析：从条件判断到数据高效处理

引言

本文系统梳理 JavaScript 中的条件判断、循环结构以及数组的常见操作，通过代码示例帮助开发者夯实基础。流程控制是编程中的核心概念，它决定了代码的执行路径，而数组则是存储和处理数据集合的重要工具。掌握这些基础知识对于编写高效、可维护的 JavaScript 代码至关重要。

一、条件判断：if 与 switch

1. if 判断结构

if 结构是编程中最基本的条件判断语句，用于根据不同条件执行不同的代码块。它的基本语法如下：

if (条件1) {
  // 条件1满足时执行
} else if (条件2) {
  // 条件2满足时执行
} else if (条件3) {
  // 条件3满足时执行
} else {
  // 以上条件都不满足时执行
}

使用注意事项：

• 条件检查顺序：一旦某个条件满足，后续的条件检查将被跳过，这意味着条件的顺序很重要；
• else if 灵活性：else if 分支可以根据需要添加多个或完全省略；
• else 可选性：else 分支是可选的，当所有条件都不满足时，如果存在 else 分支则执行它；
• 代码块规范：虽然单条语句可以省略花括号，但为了代码清晰性和避免潜在错误，建议始终使用花括号；
• 结构唯一性：一个 if 结构只能有一个 if 开始，但可以有多个 else if 和一个 else。

示例：用户输入判断

let input = prompt("请输入一个数字：");
if (input === null) {
  console.log("用户取消了输入");
} else {
  let num = +input; // 使用一元加号操作符将字符串转换为数字
  if (num > 0) {
    console.log("正数");
  } else if (num < 0) {
    console.log("负数");
  } else {
    console.log("零");
  }
}

这个示例展示了如何根据用户输入的不同情况执行不同的代码路径，包括处理用户取消输入的情况。

2. switch 开关结构

switch 语句适用于需要对同一个变量或表达式进行多个固定值比较的场景。虽然完全可以用 if 语句替代，但 switch 结构在多个条件判断时更加清晰和简洁：

switch (表达式) {
  case 值1:
    // 匹配值1时执行
    break;
  case 值2:
    // 匹配值2时执行
    break;
  default:
    // 无匹配时执行
}

关键注意事项：

• break 语句的重要性：每个 case 分支通常以 break 语句结束，用于跳出整个 switch 结构。如果省略 break，程序会继续执行后续的 case 分支，这被称为"穿透"（fall-through）效果；
• default 分支：default 分支是可选的，用于处理所有 case 都不匹配的情况；
• 严格比较：switch 语句使用严格相等（===）进行比较，要求值和类型都匹配。

示例：星期判断

let day = new Date().getDay(); // 获取当前星期几（0代表周日，6代表周六）
switch (day) {
  case 0:
    console.log("周日");
    break;
  case 6:
    console.log("周六");
    break;
  default:
    console.log("工作日");
}

这个示例根据当前日期判断是周末还是工作日，展示了 switch 语句处理多个固定值比较的优势。

---

二、循环结构：重复执行的利器

循环结构允许我们重复执行一段代码多次，是处理重复性任务的核心工具。JavaScript 提供了多种循环结构以适应不同的场景需求。

1. while 循环

while 循环是一种基本的循环结构，它在每次迭代前检查条件表达式，只有当条件为真时才执行循环体：

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

这种循环适用于不确定循环次数但知道循环条件的场景。

2. do-while 循环

do-while 循环与 while 循环类似，但它在每次迭代后检查条件，这意味着循环体至少会执行一次：

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

这种循环适用于需要至少执行一次循环体的情况，例如菜单显示和用户交互。

3. for 循环

for 循环是最常用的循环结构，特别适用于已知循环次数的场景。它将循环控制集中在一行代码中，使逻辑更加清晰：

for (初始化; 条件; 步进) {
  // 循环体
}

示例：1~100 累加

let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log(sum); // 5050

这个经典的累加示例展示了 for 循环在处理确定次数重复任务时的简洁性和高效性。

4. 循环控制语句

循环控制语句允许我们更精细地控制循环的执行流程：

• break：立即终止整个循环，跳出循环结构；
• continue：跳过当前迭代的剩余代码，直接进入下一次循环。

合理使用这些控制语句可以使循环逻辑更加清晰和高效。

---

三、数组：存储多个数据的容器

数组是 JavaScript 中最常用的数据结构之一，用于存储有序的数据集合。掌握数组的操作对于处理数据集合至关重要。

1. 创建数组

JavaScript 提供了两种创建数组的主要方式：

// 方式1：构造函数
let arr1 = new Array(3); // 创建长度为3的空数组
let arr2 = new Array(1, 2, 3); // 创建包含元素1, 2, 3的数组

// 方式2：字面量（推荐）
let arr3 = [1, 2, 3]; // 简洁直观的创建方式

数组字面量方式是更常用和推荐的方法，因为它更简洁直观。

2. 数组的本质

在 JavaScript 中，数组是一种特殊的对象，具有以下特点：

• 拥有 length 属性，表示数组中元素的数量；
• 使用数字作为下标（索引），从 0 开始；
• 可以存储不同类型的元素。

重要提醒：不要直接修改 length 属性，因为这可能导致数据丢失或数组行为异常。

3. 常见操作

添加数据

向数组中添加元素是常见的操作，JavaScript 提供了多种方法：

let arr = [1, 2];
arr.push(3);        // 在末尾添加元素 → [1, 2, 3]
arr.unshift(0);     // 在开头添加元素 → [0, 1, 2, 3]
arr.splice(1, 0, 99); // 在下标1处插入99 → [0, 99, 1, 2, 3]

删除数据

从数组中删除元素同样有多种方法：

let arr = [1, 2, 3, 4];
arr.pop();          // 删除末尾元素 → [1, 2, 3]
arr.shift();        // 删除开头元素 → [2, 3]
arr.splice(1, 1);   // 删除下标1的元素 → [2]

其他常用操作

数组提供了丰富的操作方法以满足各种需求：

// 切片：获取数组的子集
let arr = [1, 2, 3, 4];
let subArr = arr.slice(1, 3); // 提取下标1到3（不含）的元素 → [2, 3]

// 清空数组
arr.length = 0; // 或 arr.splice(0, arr.length);

// 查找元素下标
let idx = arr.indexOf(3); // 查找元素3的下标 → 2

// 填充数组
arr.fill(0, 1, 3); // 从下标1到3（不含）填充为0

4. 遍历数组

遍历数组是处理数组数据的核心操作，JavaScript 提供了多种遍历方法：

// for-in 循环（不推荐用于数组遍历）
for (let idx in arr) {
  console.log(arr[idx]); // 会遍历所有可枚举属性，包括原型链上的属性
}

// 推荐方法：for-of 循环
for (let val of arr) {
  console.log(val); // 直接获取元素值，更简洁
}

// 推荐方法：forEach 方法
arr.forEach((val, idx) => {
  console.log(idx, val); // 同时获取索引和值
});

for-of 循环和 forEach 方法是更现代和安全的数组遍历方式，避免了 for-in 循环可能带来的问题。

---

四、实际应用场景

1. 累计求和

累加是编程中的常见任务，展示了循环的基本应用：

let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log("1到100的和是：" + sum);

这个例子不仅展示了循环的使用，还体现了算法思维------通过循环避免手动计算。

2. 查找满足条件的元素

在实际开发中，经常需要查找满足特定条件的元素：

let found = false;
for (let i = 135; i <= 145; i++) {
  if (i % 26 === 0) {
    found = true;
    break; // 找到后立即退出循环，提高效率
  }
}
console.log("在135到145之间是否存在26的倍数：" + found);

这个例子展示了如何结合条件判断和循环控制来高效解决问题。

3. 嵌套循环：打印九九乘法表

嵌套循环是处理多维数据或复杂模式的重要工具：

for (let i = 1; i <= 9; i++) {
  let line = "";
  for (let j = 1; j <= i; j++) {
    line += `${j}×${i}=${i * j} `;
  }
  console.log(line);
}

九九乘法表示例展示了外层循环控制行、内层循环控制列的典型嵌套循环模式，这种模式在数据处理和界面渲染中非常常见。

---

总结

JavaScript 的流程控制（if、switch、循环）和数组操作是日常开发中最常用的基础语法。if 和 switch 提供了代码分支的能力，使程序能够根据不同条件执行不同的逻辑；各种循环结构则允许我们高效处理重复性任务；而数组作为最重要的数据结构之一，提供了丰富的方法来存储和操作数据集合。

熟练掌握这些内容，能帮助我们更高效地处理数据和逻辑，编写出更加清晰、健壮的代码。建议多动手练习，结合实际场景灵活运用，将这些基础知识内化为编程本能。随着经验的积累，你会发现在更复杂的项目中，这些基础概念仍然是构建解决方案的基石。