JavaScript旋转二维数组的方法

在编程中，旋转二维数组是一个常见的操作，尤其是在处理图像、矩阵变换等场景时。本文将详细介绍如何使用JavaScript来实现二维数组的旋转操作，包括顺时针旋转90度、180度和270度，以及逆时针旋转90度。

1. 二维数组的基本概念

二维数组是一个数组的数组，通常用于表示矩阵或表格数据。例如，一个3x3的二维数组可以表示为：

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

在这个数组中，matrix[0]表示第一行，matrix[0][0]表示第一行第一列的元素。

2. 顺时针旋转90度

顺时针旋转90度意味着将数组的行变为列，并且列的顺序反转。例如，将上面的3x3数组顺时针旋转90度后，结果应该是：

[
  [7, 4, 1],
  [8, 5, 2],
  [9, 6, 3]
]

实现方法

我们可以通过以下步骤来实现顺时针旋转90度：

1. 将数组的行变为列。
2. 反转每一列的顺序。

具体实现代码如下：

function rotate90Clockwise(matrix) {
  const n = matrix.length;
  const rotated = new Array(n).fill().map(() => new Array(n).fill(0));

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      rotated[j][n - 1 - i] = matrix[i][j];
    }
  }

  return rotated;
}

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

console.log(rotate90Clockwise(matrix));

解释

• new Array(n).fill().map(() => new Array(n).fill(0))：创建一个新的n x n的二维数组，初始值为0。
• rotated[j][n - 1 - i] = matrix[i][j]：将原数组的第i行第j列的元素放到新数组的第j行第n-1-i列。

3. 逆时针旋转90度

逆时针旋转90度与顺时针旋转90度类似，但方向相反。例如，将上面的3x3数组逆时针旋转90度后，结果应该是：

[
  [3, 6, 9],
  [2, 5, 8],
  [1, 4, 7]
]

实现方法

我们可以通过以下步骤来实现逆时针旋转90度：

1. 将数组的行变为列。
2. 反转每一行的顺序。

具体实现代码如下：

function rotate90CounterClockwise(matrix) {
  const n = matrix.length;
  const rotated = new Array(n).fill().map(() => new Array(n).fill(0));

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      rotated[n - 1 - j][i] = matrix[i][j];
    }
  }

  return rotated;
}

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

console.log(rotate90CounterClockwise(matrix));

解释

• rotated[n - 1 - j][i] = matrix[i][j]：将原数组的第i行第j列的元素放到新数组的第n-1-j行第i列。

4. 旋转180度

旋转180度意味着将数组的行和列都反转。例如，将上面的3x3数组旋转180度后，结果应该是：

[
  [9, 8, 7],
  [6, 5, 4],
  [3, 2, 1]
]

实现方法

我们可以通过以下步骤来实现旋转180度：

1. 反转每一行的顺序。
2. 反转整个数组的顺序。

具体实现代码如下：

function rotate180(matrix) {
  const n = matrix.length;
  const rotated = new Array(n).fill().map(() => new Array(n).fill(0));

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      rotated[n - 1 - i][n - 1 - j] = matrix[i][j];
    }
  }

  return rotated;
}

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

console.log(rotate180(matrix));

解释

• rotated[n - 1 - i][n - 1 - j] = matrix[i][j]：将原数组的第i行第j列的元素放到新数组的第n-1-i行第n-1-j列。

5. 旋转270度

旋转270度相当于顺时针旋转90度的逆操作。例如，将上面的3x3数组旋转270度后，结果应该是：

[
  [3, 6, 9],
  [2, 5, 8],
  [1, 4, 7]
]

实现方法

我们可以通过以下步骤来实现旋转270度：

1. 将数组的行变为列。
2. 反转每一列的顺序。

具体实现代码如下：

function rotate270(matrix) {
  const n = matrix.length;
  const rotated = new Array(n).fill().map(() => new Array(n).fill(0));

  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      rotated[n - 1 - j][i] = matrix[i][j];
    }
  }

  return rotated;
}

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

console.log(rotate270(matrix));

解释

• rotated[n - 1 - j][i] = matrix[i][j]：将原数组的第i行第j列的元素放到新数组的第n-1-j行第i列。

6. 总结

本文详细介绍了如何使用JavaScript来实现二维数组的旋转操作，包括顺时针旋转90度、180度和270度，以及逆时针旋转90度。通过这些方法，我们可以轻松地处理各种矩阵变换问题。希望本文对你有所帮助！