JavaScript ２次元配列のサンプル

JavaScriptの２次元配列のサンプルです。

サンプル	２次元配列のイメージ
	２次元配列のサンプル
	forEach文で取得する
	for文で取得する
	ループで2次元配列を作成
	入れ子の構造の配列

２次元配列のイメージ

最初の添字は行で、次の添字は列を表します。

２次元配列のサンプル

<script>
  const color1 = [
      ["赤", "黄", "青"],
      ["緑", "白", "黒"],
  ];
  console.log(color1.length); //2
  console.log(color1[0].length); //3

  console.log(color1[0][0]); //赤
  console.log(color1[0][1]); //黄
  console.log(color1[0][2]); //青
  console.log(color1[1][0]); //緑
  console.log(color1[1][1]); //白
  console.log(color1[1][2]); //黒
</script>

6行目のlengthは、行の数を取得します。
7行目は、1つの行の中の要素の数を取得します。

forEach文で取得する

<script>
  const color1 = [
    ["赤", "黄", "青"],
    ["緑", "白", "黒"],
  ];

  color1.forEach(function (value, index) {
    console.log(value);
    console.log(value[0] + "," + value[1] + "," + value[2]);
  });
</script>

8行目は、行単位の["赤", "黄", "青"]と ["緑", "白", "黒"]が表示されます。
9行目は、個別の値で赤,黄,青,緑,白,黒が表示されます。

for文で取得する

<script>
  const color1 = [
    ["赤", "黄", "青"],
    ["緑", "白", "黒"],
  ];

  for (let i = 0; i < color1.length; i++) {
    console.log(color1[i]); //["赤", "黄", "青"] ["緑", "白", "黒"]
  }
  for (let i = 0; i < color1.length; i++) {
    for (let j = 0; j < color1[0].length; j++) {
      console.log(color1[i][j]); //赤,黄,青,緑,白,黒
    }
  }
</script>

8行目は、行単位の["赤", "黄", "青"]と ["緑", "白", "黒"]が表示されます。
12行目は、個別の値で赤,黄,青,緑,白,黒が表示されます。

ループで2次元配列を作成

For文のループで2次元配列を作成するサンプルです。

<script>
  //2次元配列の定義を作成
  const arr1 = new Array(2); // 2行
  for (let i = 0; i < 2; i++) {
    arr1[i] = new Array(3); // 3個
  }

  //2次元配列に数値を設定
  let num = 1;

  for (let i = 0; i < 2; i++) {
    for (let j = 0; j < 3; j++) {
      arr1[i][j] = num;
      num = num + 1;
    }
  }
  console.log(arr1[0]); //[1, 2, 3]
  console.log(arr1[1]); //[4, 5, 6]
  console.log(arr1[0][0]); //1
  console.log(arr1[0][1]); //2
  console.log(arr1[0][2]); //3
  console.log(arr1[1][0]); //4
  console.log(arr1[1][1]); //5
  console.log(arr1[1][2]); //6
</script>

3～6行目は、行が2で値が3の2次元配列の定義を作成しています。
9行目からは、2次元配列に数値を設定しています。

入れ子の構造の配列

2次元配列で入れ子の構造にすることも可能です。

<script>
  const b = [
      "色の種類",
      ["赤","黄","青"],
      ["緑","白","黒"]
  ];
  console.log(b[0]); // 色の種類
  console.log(b[1]); // (3) ["赤", "黄", "青"]
  console.log(b[2]); // (3) ["緑", "白", "黒"]
  console.log(b[1][0]); // 赤
  console.log(b[1][1]); // 黄
  console.log(b[1][2]); // 青
</script>