为更好地管理数据，我们来学学 JavaScript 中创建和使用二维数组的方法！

2023-11-25 14:54:33

1. 走进二维数组的世界

1.1 什么是二维数组？

二维数组是一种数据结构，它可以将元素组织成行和列，就像一张电子表格。二维数组允许您使用单个变量来存储多个相关元素，从而使数据存储和管理更加方便。

1.2 JavaScript 中的二维数组

在 JavaScript 中，二维数组可以用两种方式创建：使用嵌套数组或使用 Array() 构造函数。

1.2.1 使用嵌套数组创建二维数组

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

1.2.2 使用 Array() 构造函数创建二维数组

const myArray = new Array(3);
myArray[0] = [1, 2, 3];
myArray[1] = [4, 5, 6];
myArray[2] = [7, 8, 9];

2. 灵活遍历二维数组

2.1 使用 for 循环遍历二维数组

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

2.2 使用 for...in 循环遍历二维数组

for (let i in myArray) {
  for (let j in myArray[i]) {
    console.log(myArray[i][j]);
  }
}

3. 扩展阅读：二维数组的妙用

3.1 表格的构建

二维数组可以用来创建一个 HTML 表格。

const tableData = [
  ['Name', 'Age', 'Occupation'],
  ['John', 25, 'Software Engineer'],
  ['Jane', 30, 'Teacher'],
  ['Bob', 40, 'Doctor']
];

function createTable(data) {
  const table = document.createElement('table');

  for (let i = 0; i < data.length; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < data[i].length; j++) {
      const cell = document.createElement('td');
      cell.textContent = data[i][j];
      row.appendChild(cell);
    }

    table.appendChild(row);
  }

  return table;
}

const myTable = createTable(tableData);
document.body.appendChild(myTable);

3.2 象棋棋盘的模拟

二维数组可以用来模拟一个象棋棋盘。

const chessBoard = new Array(8);
for (let i = 0; i < chessBoard.length; i++) {
  chessBoard[i] = new Array(8);
}

// 设置棋盘上的棋子
chessBoard[0][0] = 'r'; // 黑车
chessBoard[0][1] = 'n'; // 黑马
chessBoard[0][2] = 'b'; // 黑象
chessBoard[0][3] = 'q'; // 黑后
chessBoard[0][4] = 'k'; // 黑王
chessBoard[0][5] = 'b'; // 黑象
chessBoard[0][6] = 'n'; // 黑马
chessBoard[0][7] = 'r'; // 黑车

chessBoard[7][0] = 'R'; // 白车
chessBoard[7][1] = 'N'; // 白马
chessBoard[7][2] = 'B'; // 白象
chessBoard[7][3] = 'Q'; // 白后
chessBoard[7][4] = 'K'; // 白王
chessBoard[7][5] = 'B'; // 白象
chessBoard[7][6] = 'N'; // 白马
chessBoard[7][7] = 'R'; // 白车

// 打印棋盘
for (let i = 0; i < chessBoard.length; i++) {
  console.log(chessBoard[i]);
}