跳到主要内容

JavaScript 多维数组

什么是多维数组？​

在JavaScript中，多维数组是指"数组的数组"，即数组的元素也是数组。最常见的多维数组是二维数组，类似于表格结构，有行和列。然而，JavaScript原生并不支持真正意义上的多维数组，而是通过数组嵌套来实现的。

提示

虽然我们称之为"多维数组"，但在JavaScript中实际上是嵌套数组结构，每个数组元素又包含一个数组。

创建二维数组​

直接初始化法​

最直观的方式是直接在声明时初始化：

javascript
// 创建一个3x3的二维数组
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix);
// 输出:
// [
//   [1, 2, 3],
//   [4, 5, 6], 
//   [7, 8, 9]
// ]

使用循环创建​

如果需要创建较大的二维数组，可以使用循环：

javascript
// 创建一个3x3的空二维数组
const matrix = [];
for (let i = 0; i < 3; i++) {
  matrix[i] = []; // 创建内部数组
  for (let j = 0; j < 3; j++) {
    matrix[i][j] = 0; // 填充默认值
  }
}

console.log(matrix);
// 输出: [[0, 0, 0], [0, 0, 0], [0, 0, 0]]

使用Array.from()方法​

利用ES6的Array.from()方法可以更简洁地创建二维数组：

javascript
// 创建一个3x3的二维数组
const rows = 3;
const cols = 3;
const matrix = Array.from({ length: rows }, () => 
  Array.from({ length: cols }, () => 0)
);

console.log(matrix);
// 输出: [[0, 0, 0], [0, 0, 0], [0, 0, 0]]

访问多维数组元素​

要访问多维数组中的元素，我们需要使用多个索引：

javascript
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 访问第2行第3列的元素（值为6）
const element = matrix[1][2];
console.log(element); // 输出: 6

// 修改第1行第1列的元素
matrix[0][0] = 10;
console.log(matrix);
// 输出:
// [
//   [10, 2, 3],
//   [4, 5, 6],
//   [7, 8, 9]
// ]

遍历多维数组​

使用嵌套for循环​

javascript
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 使用嵌套for循环遍历
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(`位置 (${i},${j}) 的值是: ${matrix[i][j]}`);
  }
}

使用forEach()方法​

javascript
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 使用forEach遍历
matrix.forEach((row, i) => {
  row.forEach((value, j) => {
    console.log(`位置 (${i},${j}) 的值是: ${value}`);
  });
});

使用for...of循环​

javascript
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 使用for...of循环（更简洁，但无索引）
for (const row of matrix) {
  for (const value of row) {
    console.log(value);
  }
}

多维数组的操作​

添加新行​

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

// 添加新行
matrix.push([7, 8, 9]);
console.log(matrix);
// 输出:
// [
//   [1, 2, 3],
//   [4, 5, 6],
//   [7, 8, 9]
// ]

添加新列​

由于JavaScript没有真正的二维数组，添加新列需要遍历每一行：

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

// 给每一行添加新元素（相当于添加新列）
for (let i = 0; i < matrix.length; i++) {
  matrix[i].push(matrix[i][0] + matrix[i][1]);
}

console.log(matrix);
// 输出:
// [
//   [1, 2, 3],
//   [3, 4, 7],
//   [5, 6, 11]
// ]

删除行或列​

javascript
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 删除第二行
matrix.splice(1, 1);
console.log(matrix);
// 输出: [[1, 2, 3], [7, 8, 9]]

// 删除所有行的第一列
for (let i = 0; i < matrix.length; i++) {
  matrix[i].splice(0, 1);
}
console.log(matrix);
// 输出: [[2, 3], [8, 9]]

不规则多维数组​

JavaScript允许创建每行长度不同的多维数组：

javascript
const jaggedArray = [
  [1, 2, 3],
  [4, 5],
  [6, 7, 8, 9]
];

console.log(jaggedArray);
// 输出:
// [
//   [1, 2, 3],
//   [4, 5],
//   [6, 7, 8, 9]
// ]

三维及更高维度数组​

我们也可以创建三维或更高维度的数组：

javascript
// 创建一个2x2x3的三维数组
const cube = [
  [
    [1, 2, 3],
    [4, 5, 6]
  ],
  [
    [7, 8, 9],
    [10, 11, 12]
  ]
];

// 访问元素
console.log(cube[1][0][1]); // 输出: 8

实际应用案例​

1. 棋盘游戏​

多维数组非常适合表示棋盘游戏（如井字游戏）的状态：

javascript
// 井字游戏棋盘表示
const ticTacToe = [
  ['X', 'O', 'X'],
  ['O', 'X', 'O'],
  ['O', 'X', 'X']
];

// 检查行胜利
function checkRowWin(board, player) {
  for (let i = 0; i < 3; i++) {
    if (board[i][0] === player && 
        board[i][1] === player && 
        board[i][2] === player) {
      return true;
    }
  }
  return false;
}

console.log(checkRowWin(ticTacToe, 'X')); // 输出: false

2. 图片处理​

二维数组可以用来表示像素矩阵，处理图像：

javascript
// 简化的黑白图像表示（0代表黑色，1代表白色）
const image = [
  [0, 0, 1, 0, 0],
  [0, 1, 1, 1, 0],
  [1, 1, 1, 1, 1],
  [0, 1, 1, 1, 0],
  [0, 0, 1, 0, 0]
];

// 反转图像颜色
function invertImage(img) {
  const result = [];
  for (let i = 0; i < img.length; i++) {
    result[i] = [];
    for (let j = 0; j < img[i].length; j++) {
      result[i][j] = img[i][j] === 0 ? 1 : 0;
    }
  }
  return result;
}

const invertedImage = invertImage(image);
console.log(invertedImage[2]); // 输出: [0, 0, 0, 0, 0]

3. 数据分析​

多维数组可以用于数据分析和处理表格数据：

javascript
// 学生成绩表（姓名, 数学, 英语, 科学）
const grades = [
  ["Alice", 85, 90, 92],
  ["Bob", 75, 80, 85],
  ["Charlie", 90, 95, 85],
  ["Diana", 95, 85, 90]
];

// 计算每个学生的平均分
function calculateAverages(gradeData) {
  return gradeData.map(student => {
    const name = student[0];
    const scores = student.slice(1);
    const average = scores.reduce((sum, score) => sum + score, 0) / scores.length;
    return [name, average.toFixed(1)];
  });
}

const averages = calculateAverages(grades);
console.log(averages);
// 输出: [["Alice", "89.0"], ["Bob", "80.0"], ["Charlie", "90.0"], ["Diana", "90.0"]]

多维数组的性能考虑​

当处理大型多维数组时，需要注意以下几点：

  1. 内存占用 - 大型多维数组会占用大量内存
  2. 访问速度 - 深层嵌套的多维数组访问效率较低
  3. 数据结构选择 - 有些情况下，对象或Map可能比多维数组更合适
警告

处理大型多维数组时，请注意内存使用情况，特别是在浏览器环境中。

总结​

JavaScript多维数组是通过数组嵌套实现的数据结构，最常见的是二维数组。主要特点包括：

  1. 创建方式多样，包括直接初始化、循环创建和使用Array.from()方法
  2. 访问和修改元素需要使用多个索引
  3. 可以通过多种方法遍历，如嵌套循环、forEach()和for...of
  4. 支持不规则数组（每行长度不一致）
  5. 可扩展到三维及更高维度
  6. 在游戏开发、图像处理和数据分析等领域有广泛应用

随着你对JavaScript的深入学习，你会发现多维数组在各种复杂算法和应用场景中都非常有用。

练习题​

  1. 创建一个5x5的二维数组，并用1-25的数字按顺序填充。
  2. 编写一个函数，将二维数组转置（行变列，列变行）。
  3. 实现一个函数，判断某个数字是否存在于给定的二维数组中。
  4. 编写一个函数，计算二维数组中所有元素的总和。
  5. 模拟一个简单的迷宫，使用二维数组表示墙壁和通道，并尝试找出从入口到出口的路径。

进一步学习资源​

  • MDN Web文档关于数组的详细介绍
  • JavaScript数据结构与算法书籍
  • 在线编程平台上的数组相关练习（如LeetCode、HackerRank）