配列はプログラミングを行う上ではずすことができないものです。
使い方はプログラミング言語により多少の特色はありますが、大差はありません。
JavaScriptの配列は、いわゆる普通の配列と連想配列（ハッシュ配列）の二つがあります。
普通の配列は下の例の通り、要素の指定や追加・削除に０から始まる数字(インデックス)を指定して行います。
|
1 2 3 4 5 6 7 8 9 10 |
// 配列の初期化 var array = ['田中','佐藤','小池']; // 配列の最後尾に要素を追加する array[array.length] = '伊藤'; // 配列の要素を順番に表示する for (var i = 0; i < array.length; i++) { document.write ("配列の" + i + "番目の要素：" + array[i] + "<br>"); } |
実行結果
|
1 2 3 4 |
配列の0番目の要素：田中 配列の1番目の要素：佐藤 配列の2番目の要素：小池 配列の3番目の要素：伊藤 |
上記に対し、要素の指定を数字（インデックス）ではなく、文字列で行うことができるのが連想配列です。
これにより、人が直感的に識別しやすい文字列を配列のキーにすることができます。
それでは、連想配列の初期化、要素の追加、削除について詳しく見ていきましょう。
連想配列の初期化と要素の追加
① 連想配列の静的初期化
|
1 |
var hashColor1 = {red: '赤', green: '緑', blue: '青'}; |
静的初期化では、初期化と同時に要素も設定されています。
インデックスのかわりに、文字列（red, green, blue）が要素を特定するためのキーとなり、それに対応する値として赤, 緑, 青という値が設定されました。
② 連想配列の動的な初期化と要素の追加
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 配列の初期化 var hashColor2 = {}; // 配列のkeyに対し値を設定する hashColor2.red = "赤"; hashColor2.green = "緑"; hashColor2.blue = "青"; // 配列の要素(keyと値)を表示する for (var key in hashColor2) { document.write (key + "の値：" + hashColor2[key] + "<br>"); } |
上記の方法の他に以下の方法もあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 配列の初期化 var hashColor2 = {}; // 配列のkeyに対し値を設定する hashColor2['red'] = "赤"; hashColor2['green'] = "緑"; hashColor2['blue'] = "青"; // 配列の要素(keyと値)を表示する for (var key in hashColor2) { document.write (key + "の値：" + hashColor2[key] + "<br>"); } |
配列のkeyに対する値の設定方法は異なりますが、上記二つのプログラムを実行すると、どちらも以下のような表示になります。
|
1 2 3 |
redの値:赤 greenの値:緑 blueの値:青 |
連想配列の要素の削除
最後に連想配列の要素を削除する方法を見ていきましょう。
要素を削除するときはdelete演算子を使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 配列の初期化 var hashColor2 = {}; // 配列のkeyと対応する値を設定 hashColor2['red'] = "赤"; hashColor2['green'] = "緑"; hashColor2['blue'] = "青"; hashColor2['yellow'] = "黄"; // 要素green(keyがgreenのkeyと値)を削除する delete hashColor2['green']; // 配列の要素を表示する for (var key in hashColor2) { document.write (key + "の値：" + hashColor2[key] + "<br>"); } |
上記の方法の他に以下の方法もあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 配列の初期化 var hashColor2 = {}; // 配列のkeyと対応する値を設定 hashColor2['red'] = "赤"; hashColor2['green'] = "緑"; hashColor2['blue'] = "青"; hashColor2['yellow'] = "黄"; // 配列の要素(keyがgreenのkeyと値)を削除する delete hashColor2.green; // 配列の要素を表示する for (var key in hashColor2) { document.write (key + "の値：" + hashColor2[key] + "<br>"); } |
配列の要素の削除方法は異なりますが、上記二つのプログラムの実行結果は以下のような表示になります。
|
1 2 3 |
redの値：赤 blueの値：青 yellowの値：黄 |
keyがgreenの要素が削除されていることが確認できました。
