← 返回目录

3. for 遍历与二维数组

货架会摆会改了，现在学「把每个格子都挨个看一遍」——这就是「遍历」（读作：挨个看一遍）。再升级成表格柜（一行行、一列列地看）：外面那层循环管行、里面那层循环管列。这是后面排序、算总和的基本功。

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

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

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

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

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

let arr = ["苹果", "香蕉", "葡萄"];
// 循环三要素：从0开始、没看完就继续、每步往后挪一格
for (let i = 0; i < arr.length; i++) {
    // i 是当前编号，arr[i] 是这一格里的东西
    console.log(i, arr[i]);   // 挨个报：编号 里装的啥
}
// 跑出来就是：0 苹果 / 1 香蕉 / 2 葡萄

	

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

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

// 3 行，每行又是一个小格子排（像成绩单）
let table = [[11,12,13], [21,22,23], [31,32,33]];
console.log(table[0][1]);  // 第0行第1列 → 12
console.log(table[2][0]);  // 第2行第0列 → 31

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

	

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

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

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

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

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