ywork2020.com

Title

配列を作成する

目次 (INDEX)

Array とは

ここで説明する Array とは次の語句からなる JavaScript のコンストラクタです。
Array
読み: アレイ
意味: 配列

目次に戻る

Array の概要

これは、Array クラスから配列オブジェクトのインスタンスを生成するためのコンストラクタです。

普通の変数は 1つの箱を作り、その中に 1つの値を代入してデータの持ち回りを行いますが、 配列は 1つの配列の中に複数の箱を作り、箱ごとに個別の値が代入できるため、箱をグループとして管理することができます。

似たような例えで説明すると 変数は 「 一戸建ての家 」 であり、その家に 1人が暮らしています。 配列は 「 マンションの各部屋 」 であり、 〇〇 マンションの □□ 号室という具合に 1人が暮らしています。この暮らしている人を値と置き換えて考えてみて下さい。

配列内では、インデックス番号を指定して、値の代入や取得の操作を行うことができます。 これは 〇〇 マンションの □□ 号室の考え方に似ています。

配列参照の具体例としては、 配列名[0] とか 配列名[1] という記法で各データにアクセスすることになり、 インデックス番号と言われる [?] の部分で参照するデータを特定して値を取得したり、代入したりすることになります。

なお、このクラスはインデックス配列のオブジェクトを生成することはできますが、連想配列は生成できません。

目次に戻る

サンプルコードと実行結果

まず、配列を宣言します。この宣言と同時に Array クラスから配列オブジェクトのインスタンスを生成します。

このページでは下記の script コードで作成した arrDayName という名前の配列を使うことにします。 なお、この配列には 日 ~ 土 の曜日をテキスト値として代入することにします。

サンプルコード: 配列を作成する

 
<script>
	let arrDayName = new Array("日", "月", "火", "水", "木", "金", "土");
	document.write(arrDayName, "<hr>");
	document.write(arrDayName.length);
</script>
  • 02: arrDayName という配列を宣言して、日～土の曜日テキストを値として代入しています。
  • 03: document.write メソッドで arrDayName を書き出しています。
  • 04: 配列.length プロパティを参照して配列に代入されている値の個数を書き出しています。
実行結果:



サンプルコード: 配列の値を取得する

それではもう一つサンプルとして arrDayName に代入されている 7つの値を個別に参照して表示してみます。 テキストボックスに入力された数値を使って arrDayName の各値を出力します。 

<body>
	<p><input type="number" id="idNum" value=0 onchange="funcNumChange()" min="0" max="6"></p>
	<p><output id="idOutput">innerHTML</output></p>
</body>

<script>
	let arrDayName = new Array("日", "月", "火", "水", "木", "金", "土");
	function funcNumChange(){
		idOutput.innerHTML = arrDayName[idNum.value];
	}
</script>
  • 02: arrDayNameという配列を宣言します。
  • 04: arrDayName[インデックス番号]
実行結果:

innerHTML



サンプルコード: 補足 ( 連想配列を作成する )

概要のところでも述べていますが、このクラスは連想配列のオブジェクトを生成することはできません。 しかし、連想配列の作成について、記述方法などが知りたい方もいらっしゃるかも知れませんので、補足としてサンプルを掲載しておきます。

JavaScript で連想配列を作成する場合は、リテラル記法で生成します。 連想配列は、配列要素のキーと値がペアとなった配列です。キーは変数であっても文字列であっても JavaScript ではプロパティとして扱われます。 

<script>
	let arrDayName = {Sun:"日", Mon:"月", "Tue":"火", "Wed":"水"};
	document.write(arrDayName.Sun , " | ");
	document.write(arrDayName["Mon"] , " | ");
	document.write(arrDayName.Tue , " | ");
	document.write(arrDayName["Wed"]);
</script>
  • 02: arrDayName という連想配列を宣言します。キーには変数と文字列を混在させています。(例えば Sun というキーと "日" という値が 1つのペアになります。また、"Tue" というキーと "火" という値が 1つのペアになります)
  • 03, 04, 05, 06: document.write() を使って配列の各要素の値を書き出しています。キーの記述方法の違いを見ていただくために、4つのサンプルを用意しました。
実行結果:

目次に戻る

Array を使用する上での要点

  1. let 配列名 = new Array(値, 値, 値, ...); の記述でインデックス配列を作成できる
  2. 配列内の各値を取得するには 配列名[インデックス番号] で記述する
  3. インデックス番号は 0 から始まる

目次に戻る