3. for 遍历与二维数组

遍历就是从头到尾把每个箱子看一遍。二维数组就是"数组里套数组"，表格行 × 列。

核心三步：
① for 循环遍历——for(i=0; i② 二维数组——arr[i][j]，外层 i 走行、内层 j 走列
③ 嵌套循环——两层 for 把表格每个格子都走一遍

坑：内层循环别用同一个变量名、i 从 0 开始不是 1、二维数组要两层循环。

3.1 互动演示（遍历高亮 + 二维表格）

3.2 知识点逐条讲解（配合代码）

① 遍历是什么？for 循环三要素怎么套到数组上

「遍历」第一次出现：就是从头到尾把每个格子挨个看一遍。普通 for 循环三件套，搬到货架上正好对上：从编号0开始（i=0）、只要没看完就继续（i < 格子数）、每看完一个往后挪一格（i++）。

如果你把条件写成 i <= arr.length，就会多看一格。因为编号最大是 格子数-1（3个东西是0/1/2）。写 <= 会多摸一次不存在的第3号，拿到 undefined。所以条件写 <，别写 <=。

// 循环三要素：从0开始、没看完就继续、每步往后挪一格
let arr = ["苹果", "香蕉", "葡萄"];

// i 是当前编号，arr[i] 是这一格里的东西
for (let i = 0; i < arr.length; i++) {
  // 挨个报：编号 里装的啥
  console.log(i, arr[i]);
// 跑出来就是：0 苹果 / 1 香蕉 / 2 葡萄
}

② 二维数组：格子里再放一排格子（像 Excel 表格）

要存「几行几列」的数据（比如成绩单：每人有语数英三科），就用二维数组：数组里每个格子，又装着一排小格子。取的时候报两次坐标：table[第几行][第几列]。

// 3 行，每行又是一个小格子排（像成绩单）
let table = [
  [11, 12, 13],
  [21, 22, 23],
  [31, 32, 33]
];

// 第0行第1列 → 12
console.log(table[0][1]);

// 第2行第0列 → 31
console.log(table[2][0]);

// 两层循环：外层 i 走行，内层 j 走列
// ① 取下一行
for (let i = 0; i < table.length; i++) {
  // ② 这行里一列列看
  for (let j = 0; j < table[i].length; j++) {
    // 报出 table[第几行][第几列]
    console.log(table[i][j]);
  }
}

如果你搞不清两层循环谁管行谁管列，就记住：外层 i 管「行」，内层 j 管「列」。点下面「遍历一维」「遍历二维」按钮，会一格格亮给你看，看完就懂两层是怎么转圈的。

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：遍历商品渲染列表、遍历成绩单算总分、二维表格渲染日历/成绩单。

② 常见坑：循环条件写成 i <= arr.length 多取一个 undefined；二维坐标行列写反。

③ 怎么解决：条件固定写 i < arr.length；二维外层 i 管行、内层 j 管列，画一遍高亮就清楚。

本页重点

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

let x = arr[0];

let x = grid[0][1];  // 第0行第1列