2次元配列、多次元配列の宣言・初期化・代入・参照 - JavaScript
JavaScriptの2次元配列、多次元配列の宣言・初期化・代入・参照のコードを紹介します。
概要
こちらの記事では、JavaScriptでの配列を利用するコードを紹介しました。
この記事では、複数の次元を持つ多次元配列を利用するコードを紹介します。
書式
宣言 / 初期化
JavaScriptで多次元の配列を作成するには、配列をネストして宣言、初期化をします。
2次元配列の場合
配列変数名 = new Array(配列数);
配列変数名[0] = new Array(配列数);
配列変数名[1] = new Array(配列数);
...
配列変数名[n] = new Array(配列数);
n次元配列の場合
配列変数名 = new Array(配列数);
配列変数名[0] = new Array(配列数);
配列変数名[1] = new Array(配列数);
...
配列変数名[n] = new Array(配列数);
配列変数名[0][0] = new Array(配列数);
配列変数名[0][1] = new Array(配列数);
...
配列変数名[0][m] = new Array(配列数);
...
配列変数名[n][m]...[] = new Array(配列数);
プログラム例1: 2次元配列の例
2次元配列を作成して、値をページに表示するプログラム例を紹介します。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table {
border: 1px solid #808080;
border-collapse: collapse;
}
table tr td {
border: 1px solid #808080;
width:2rem;
}
</style>
<script language="javascript" type="text/javascript">
var data;
function initData() {
data = new Array(3);
data[0] = new Array(3);
data[1] = new Array(3);
data[2] = new Array(3);
data[0][0] = 1;
data[0][1] = 0;
data[0][2] = 0;
data[1][0] = 0;
data[1][1] = 1;
data[1][2] = 0;
data[2][0] = 0;
data[2][1] = 0;
data[2][2] = 1;
}
function butonClick() {
var elem = document.getElementById("output");
var TableStr = "<table><tbody>";
for (i = 0; i < data.length; i++) {
TableStr += "<tr>";
for (j = 0; j < data[i].length; j++) {
TableStr += "<td>" +String(data[i][j])+"</td>";
}
TableStr += "</tr>";
}
TableStr += "</tbody></table>";
elem.innerHTML = TableStr;
}
</script>
</head>
<body onload="initData();">
<h2>２次元配列のデモ</h2>
<button onclick="butonClick();">Button</button>
<hr/>
<div id="output">
</div>
</body>
</html>
解説
以下の
initData()関数は3x3の2次元配列を作成して値を設定する関数です。
はじめに、
data = new Array(3); で3行の配列を作成し、
それぞれの要素
data[0] data[1] data[2] に対して、
new Array(3) で長さ3の配列を作成することで、
3x3の2次元配列を作成しています。
配列の作成後にそれぞれの要素に値を代入しています。
function initData() {
data = new Array(3);
data[0] = new Array(3);
data[1] = new Array(3);
data[2] = new Array(3);
data[0][0] = 1;
data[0][1] = 0;
data[0][2] = 0;
data[1][0] = 0;
data[1][1] = 1;
data[1][2] = 0;
data[2][0] = 0;
data[2][1] = 0;
data[2][2] = 1;
}
ボタンクリックにより実行される関数が以下です。
forループで配列の要素にアクセスして値をTableタグで整形して、ページに出力します。
function butonClick() {
var elem = document.getElementById("output");
var TableStr = "<table><tbody>";
for (i = 0; i < data.length; i++) {
TableStr += "<tr>";
for (j = 0; j < data[i].length; j++) {
TableStr += "<td>" +String(data[i][j])+"</td>";
}
TableStr += "</tr>";
}
TableStr += "</tbody></table>";
elem.innerHTML = TableStr;
}
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
[button]をクリックします。下図の画面が表示されます。2次元配列の値が表に整形されて出力できました。
プログラム例2:ループで初期化する例
コード
下記のHTMLファイルを作成します。
<!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">
<head>
<title></title>
<script language="javascript" type="text/javascript">
function proc() {
var data = new Array(6);
for (i = 0; i < data.length; i++) {
data[i] = new Array(4);
}
for (i = 0; i < data.length; i++) {
for (j = 0; j < data[i].length; j++) {
data[i][j] = i * j;
}
}
for (i = 0; i < data.length; i++) {
document.write(data[i][0] + ", " + data[i][1] + ", " + data[i][2] + ", " + data[i][3]+ "<br/>");
}
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
proc();
</script>
</body>
</html>
解説
以下のコードで配列を作成しそれぞれの配列要素に対し配列を作成します。このコードにより2次元配列が作成できます。
var data = new Array(6);
for (i = 0; i < data.length; i++) {
data[i] = new Array(4);
}
forループを利用して2次元配列に値を設定します。
for (i = 0; i < data.length; i++) {
for (j = 0; j < data[i].length; j++) {
data[i][j] = i * j;
}
}
配列の内容を画面に表示します。
for (i = 0; i < data.length; i++) {
document.write(data[i][0] + ", " + data[i][1] + ", " + data[i][2] + "<br/>");
}
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図の結果が表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
