多次元配列

広告

多次元配列とは2つ以上の種類のインデックスを組み合わせて配列の要素を表すものです。JavaScriptでは多次元配列という構文は用意されていませんが、配列の要素に別の配列リテラルを格納することであたかも多次元配列のように扱うことができます。

では簡単な例を元に確認していきます。JavaScriptで配列といえば1次元配列のことになりますが、1次元配列とは次のようなもののことです。

x=0x=1x=2x=3
92886486

この配列は次のように表すことができます。 

var ary = [92, 88, 64, 86];

続いて2次元配列です。2次元配列とは次のようなもののことです。

 x=0x=1x=2x=3
y=092886486
y=178929681
y=268568470

JavaScriptでは多次元配列はサポートされていませんが、配列の要素には数値や文字列などの基本データだけではなくオブジェクトや配列などを格納することができます。そこで1次元の配列を作成し、その配列を要素に格納した配列を作成することで2次元配列を作成します。 

var ary0 = [92, 88, 64, 86];
var ary1 = [78, 92, 96, 81];
var ary2 = [68, 56, 84, 70];

var ary = [ary0, ary1, ary2];

これはまとめて次のように記述しても同じです。 

var ary = [
  [92, 88, 64, 86], 
  [78, 92, 96, 81],
  [68, 56, 84, 70]
];

今回は2次元配列を例にしましたが、2次元配列を要素に格納した配列を作成するば3次元配列となりますし、同様にして何次元の配列でも作成することが可能です。

多次元配列の要素へのアクセス

先ほどの2次元配列を例に、多次元配列の要素へのアクセスについて考えてみます。例えば2次元配列のインデックス1の要素を他の変数に代入します。 

var ary = [
  [92, 88, 64, 86], 
  [78, 92, 96, 81],
  [68, 56, 84, 70]
];

var ary1 = ary[1];

この時、変数ary1には配列aryのインデックス1の要素に格納されていた値である[78, 92, 96, 81]という配列が代入されます。変数ary1は配列なのでさらにインデックスを指定して要素の値を取り出すことができます。 

var ary = [
  [92, 88, 64, 86], 
  [78, 92, 96, 81],
  [68, 56, 84, 70]
];

var ary1 = ary[1];
var num = ary1[2];

変数ary1に代入されている配列のインデックス2の要素には数値の96が格納されています。その為、変数numには96が代入されることになります。

このように多次元配列の要素をいったん取り出して、さらにその要素に含まれていた配列の要素を取り出すことができますが、これらをまとめて次のように記述しても同じです。 

var ary = [
  [92, 88, 64, 86], 
  [78, 92, 96, 81],
  [68, 56, 84, 70]
];

var num = ary[1][2];

今回は2次元配列を例にしましたが3次元であっても4次元であっても考えかたは同じです。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script5_1.js">
</script>

</body>
</html>

var ary = [
  [92, 88, 64, 86], 
  [78, 92, 96, 81],
  [68, 56, 84, 70]
];

for (var i = 0; i < 3; i++){
  document.write("<p>");

  for (var j = 0; j < 4; j++){
    document.write("[" + i + "][" + j + "] = " + ary[i][j] + "<br />");
  }

  document.write("</p>");
}

上記を実際にブラウザ見てみると次のように表示されます。

p5-1

( Written by Tatsuo Ikura )