Javascript 零基础教程

JavaScript 数组遍历

遍历数组是 JavaScript 中的一项基本技能。可以让我们访问和操作数组中的每个元素，为数据处理、转换等操作打开了大门。

本章将建立在你对基本循环结构的理解之上，涵盖 JavaScript 中遍历数组最常用和最有用的方法。

1. for 循环：经典且可控

当你需要对迭代过程进行精确控制时，标准的 for 循环是一个多功能的工具。当你需要知道每个元素的索引 (index) 时，它特别有用。

1.1 基本 for 循环结构

for 循环的结构由三部分组成：

  1. 初始化 (Initialization): 声明并初始化计数器变量（通常是 i）。
  2. 条件 (Condition): 一个布尔表达式，决定循环是否继续。只要条件为真，循环就会继续。
  3. 增量/减量 (Increment/Decrement): 每次迭代后更新计数器变量。

以下是如何使用 for 循环遍历数组：

const myArray = ["apple", "banana", "cherry"];

for (let i = 0; i < myArray.length; i++) {
  // i 是当前元素的索引
  console.log("索引 " + i + " 处的元素是: " + myArray[i]);
}

在这个例子中：

  • let i = 0; 将计数器 i 初始化为 0，这是数组第一个元素的索引。
  • i < myArray.length; 是检查 i 是否小于数组长度的条件。
  • i++ 在每次迭代后将 i 增加 1。
  • myArray[i] 访问当前索引 i 处的元素。

1.2 示例：使用 for 循环修改数组元素

你也可以使用 for 循环来修改数组中的元素：

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  numbers[i] = numbers[i] * 2; // 将每个元素乘以 2
}

console.log(numbers); // 输出: [2, 4, 6, 8, 10]

1.3 示例：反向遍历

你可以使用 for 循环以相反的顺序遍历数组：

const myArray = ["apple", "banana", "cherry"];

for (let i = myArray.length - 1; i >= 0; i--) {
  console.log("索引 " + i + " 处的元素是: " + myArray[i]);
}

这里，循环从数组的最后一个元素 (myArray.length - 1) 开始，递减 i 直到它变为 0。

2. for...of 循环：简洁且现代

for...of 循环提供了一种更简洁、更易读的方式来遍历可迭代对象（如数组）的值。它简化了访问每个元素的过程，而无需管理索引。

2.1 基本 for...of 结构

const myArray = ["apple", "banana", "cherry"];

for (const element of myArray) {
  console.log(element);
}

在这个例子中：

  • const element of myArray 遍历 myArray 中的每个元素。
  • 在每次迭代中，当前元素的值被赋值给 element 变量。

2.2 示例：结合条件语句

你可以将 for...of 循环与条件语句结合使用，根据每个元素的值执行特定操作：

const numbers = [1, 2, 3, 4, 5, 6];

for (const number of numbers) {
  if (number % 2 === 0) {
    console.log(number + " 是偶数");
  } else {
    console.log(number + " 是奇数");
  }
}

3. for...in 循环（谨慎用于数组）

for...in 循环设计用于遍历对象的可枚举属性。虽然它可以用于数组，但在遍历数组时通常不推荐使用它。

这是因为 for...in 遍历的是数组的键 (Keys)（即索引），而不是值本身，而且它还可能包括继承的属性，这会导致意外行为。

3.1 for...in 结构（以及为什么要避免用它遍历数组）

const myArray = ["apple", "banana", "cherry"];

for (const index in myArray) {
  console.log("索引: " + index + ", 值: " + myArray[index]);
}

虽然这看起来像普通的循环，但它有几个缺点：

  1. 遍历的是属性，而不是值： 它遍历的是索引（"0", "1", "2"），这些索引是字符串类型，而不是数字。这可能会导致数学运算中的意外行为。
  2. 包含继承属性： 如果你在 Array.prototype 上添加了自定义属性，for...in 循环也会遍历这些属性。
  3. 顺序不保证： 属性被遍历的顺序并不保证与它们定义的顺序相同（虽然在现代浏览器中通常相同，但标准不保证）。

总结： 尽量避免使用 for...in 循环来遍历数组。请使用 for 或 for...of。

3.2 何时 for...in 是有用的（对象）

for...in 循环主要用于遍历对象 (Objects) 的属性：

const myObject = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const key in myObject) {
  console.log("键: " + key + ", 值: " + myObject[key]);
}

在这种情况下，for...in 遍历 myObject 的键 "name"、"age" 和 "city"。

4. 控制循环：break 和 continue

我们在之前的课程中学到的 break 和 continue 语句在数组循环中同样非常有用。

4.1 break 语句

break 语句完全终止循环。这在“搜索”场景中非常有用——一旦找到了你要找的东西，就停止循环。

const numbers = [1, 2, 3, 4, 5, 6];

for (const number of numbers) {
  if (number > 3) {
    break; // 当数字大于 3 时退出循环
  }
  console.log(number);
}
// 输出:
// 1
// 2
// 3

4.2 continue 语句

continue 语句跳过当前迭代的剩余部分，直接进入下一次迭代。这在“过滤”场景中非常有用。

const numbers = [1, 2, 3, 4, 5, 6];

for (const number of numbers) {
  if (number % 2 === 0) {
    continue; // 跳过偶数
  }
  console.log(number);
}
// 输出:
// 1
// 3
// 5