12.2 二维数组 - HTML / CSS / JavaScript 入门

二维数组可以表示表格、矩阵、棋盘或地图。它本质上是“数组中的数组”：第一个下标选择行，第二个下标选择该行里的列，两个下标都从 0 开始。

创建与访问

const grid = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];
console.log(grid[0][0]); // 1
console.log(grid[1][2]); // 7

点击矩阵中的一个值，观察第一个下标选中行、第二个下标选中列。

题目

grid[1][2] 中的第一个下标 1 表示什么？

行数与列数

本节使用每一行列数相同的矩形二维数组。grid.length 是行数，grid[0].length 是列数。

const triangle = [
    [1, 0, 0],
    [1, 2, 0],
    [1, 2, 3]
];
console.log(triangle.length);    // 3
console.log(triangle[0].length); // 3

题目

哪个表达式得到二维数组 matrix 的行数？

嵌套循环

外层循环控制行，内层循环控制列。使用 grid[row].length 作为内层边界，可以让列数始终与数组保持一致。

for (let row = 0; row < grid.length; row++) {
    for (let col = 0; col < grid[row].length; col++) {
        console.log(grid[row][col]);
    }
    console.log();
}

题目

遍历矩形二维数组时，内层循环上限最好写成什么？

矩阵加法

矩阵加减法要求形状相同。位置 i,j 的结果只和两个输入矩阵相同位置的元素有关。

C = A + B,\quad c_{ij} = a_{ij} + b_{ij}

let a = [[1, 3], [1, 0], [1, 2]];
let b = [[0, 0], [7, 5], [2, 1]];
const c = Array.from({ length: a.length }, () => Array(a[0].length).fill(0));
for (let i = 0; i < a.length; i++) {
    for (let j = 0; j < a[i].length; j++) {
        c[i][j] = a[i][j] + b[i][j];
    }
}

左侧保留两个输入矩阵，右侧结果矩阵从空白开始；每次点击“下一步”只计算并填入一个对应位置。

131012

007521

??????

当前坐标[0][0]

C[0][0] = 1 + 0 = 1

紫色格表示本次要读取和写入的位置。

题目

两个矩阵可以相加的前提是什么？

二维数组统计

统计前先确定范围：一行、一列，还是整个表格。JavaScript 除法会自然保留小数结果。

let row = 1;
let sum = 0;
for (let col = 0; col < grid[row].length; col++) {
    sum += grid[row][col];
}
const average = sum / grid[row].length;

创建两个 3×2 的 int 二维数组，使用嵌套循环生成结果矩阵，并按 3 行 2 列打印。不要手工写出每个和。

使用二维数组保存 A、B 和结果 C。
用两层循环访问相同的 row、col 坐标。
计算 C[row][col] = A[row][col] + B[row][col] 并按行输出。

使用二维数组 {{4,9,2},{7,1,8},{3,6,5}}。对每一行分别寻找最大值，最终输出 9 8 6。

外层循环逐行处理矩阵。
每行先用第一个元素初始化 rowMax。
内层循环比较剩余列，结束后输出当前行最大值。

二维数组可以表示表格、矩阵、棋盘或地图。它本质上是“数组中的数组”：第一个下标选择行，第二个下标选择该行里的列，两个下标都从 0 开始。

创建与访问

const grid = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
];
console.log(grid[0][0]); // 1
console.log(grid[1][2]); // 7

点击矩阵中的一个值，观察第一个下标选中行、第二个下标选中列。

题目

grid[1][2] 中的第一个下标 1 表示什么？

行数与列数

本节使用每一行列数相同的矩形二维数组。grid.length 是行数，grid[0].length 是列数。

const triangle = [
    [1, 0, 0],
    [1, 2, 0],
    [1, 2, 3]
];
console.log(triangle.length);    // 3
console.log(triangle[0].length); // 3

题目

哪个表达式得到二维数组 matrix 的行数？

嵌套循环

外层循环控制行，内层循环控制列。使用 grid[row].length 作为内层边界，可以让列数始终与数组保持一致。

for (let row = 0; row < grid.length; row++) {
    for (let col = 0; col < grid[row].length; col++) {
        console.log(grid[row][col]);
    }
    console.log();
}

题目

遍历矩形二维数组时，内层循环上限最好写成什么？

矩阵加法

矩阵加减法要求形状相同。位置 i,j 的结果只和两个输入矩阵相同位置的元素有关。

C = A + B,\quad c_{ij} = a_{ij} + b_{ij}

let a = [[1, 3], [1, 0], [1, 2]];
let b = [[0, 0], [7, 5], [2, 1]];
const c = Array.from({ length: a.length }, () => Array(a[0].length).fill(0));
for (let i = 0; i < a.length; i++) {
    for (let j = 0; j < a[i].length; j++) {
        c[i][j] = a[i][j] + b[i][j];
    }
}

左侧保留两个输入矩阵，右侧结果矩阵从空白开始；每次点击“下一步”只计算并填入一个对应位置。

131012

007521

??????

当前坐标[0][0]

C[0][0] = 1 + 0 = 1

紫色格表示本次要读取和写入的位置。

题目

两个矩阵可以相加的前提是什么？

二维数组统计

统计前先确定范围：一行、一列，还是整个表格。JavaScript 除法会自然保留小数结果。

let row = 1;
let sum = 0;
for (let col = 0; col < grid[row].length; col++) {
    sum += grid[row][col];
}
const average = sum / grid[row].length;

创建两个 3×2 的 int 二维数组，使用嵌套循环生成结果矩阵，并按 3 行 2 列打印。不要手工写出每个和。

使用二维数组保存 A、B 和结果 C。
用两层循环访问相同的 row、col 坐标。
计算 C[row][col] = A[row][col] + B[row][col] 并按行输出。

使用二维数组 {{4,9,2},{7,1,8},{3,6,5}}。对每一行分别寻找最大值，最终输出 9 8 6。

外层循环逐行处理矩阵。
每行先用第一个元素初始化 rowMax。
内层循环比较剩余列，结束后输出当前行最大值。

二维数组

创建与访问

行列坐标导航器

知识测验

行数与列数

知识测验

嵌套循环

知识测验

矩阵加法

逐格完成矩阵加法

知识测验

二维数组统计

实现两个矩阵相加

找出每一行的最大值

二维数组

创建与访问

行列坐标导航器

知识测验

行数与列数

知识测验

嵌套循环

知识测验

矩阵加法

逐格完成矩阵加法

知识测验

二维数组统计

实现两个矩阵相加

找出每一行的最大值