JavaScriptの連想配列に要素を追加・削除する方法

配列はプログラミングを行う上ではずすことができないものです。

使い方はプログラミング言語により多少の特色はありますが、大差はありません。

JavaScriptの配列は、いわゆる普通の配列と連想配列(ハッシュ配列)の二つがあります。

普通の配列は下の例の通り、要素の指定や追加・削除に0から始まる数字(インデックス)を指定して行います。

// 配列の初期化
var array = ['田中','佐藤','小池'];

// 配列の最後尾に要素を追加する
array[array.length] = '伊藤';

// 配列の要素を順番に表示する
for (var i = 0; i < array.length; i++) {
    document.write ("配列の" + i + "番目の要素:" + array[i] + "<br>");
}

実行結果

配列の0番目の要素:田中
配列の1番目の要素:佐藤
配列の2番目の要素:小池
配列の3番目の要素:伊藤

上記に対し、要素の指定を数字(インデックス)ではなく、文字列で行うことができるのが連想配列です。

これにより、人が直感的に識別しやすい文字列を配列のキーにすることができます。

それでは、連想配列の初期化、要素の追加、削除について詳しく見ていきましょう。

連想配列の初期化と要素の追加

① 連想配列の静的初期化

var hashColor1 = {red: '赤', green: '緑', blue: '青'};

静的初期化では、初期化と同時に要素も設定されています。

インデックスのかわりに、文字列(red, green, blue)が要素を特定するためのキーとなり、それに対応する値として赤, 緑, 青という値が設定されました。

② 連想配列の動的な初期化と要素の追加

// 配列の初期化
var hashColor2 = {};

// 配列のkeyに対し値を設定する
hashColor2.red = "赤";
hashColor2.green = "緑";
hashColor2.blue = "青";	

// 配列の要素(keyと値)を表示する
for (var key in hashColor2) {
    document.write (key + "の値:" + hashColor2[key] + "<br>");
}

上記の方法の他に以下の方法もあります。

// 配列の初期化
var hashColor2 = {};

// 配列のkeyに対し値を設定する
hashColor2['red'] = "赤";
hashColor2['green'] = "緑";
hashColor2['blue'] = "青";	   

// 配列の要素(keyと値)を表示する
for (var key in hashColor2) {
    document.write (key + "の値:" + hashColor2[key] + "<br>");
}

配列のkeyに対する値の設定方法は異なりますが、上記二つのプログラムを実行すると、どちらも以下のような表示になります。

redの値:赤
greenの値:緑
blueの値:青

連想配列の要素の削除

最後に連想配列の要素を削除する方法を見ていきましょう。

要素を削除するときはdelete演算子を使用します。

// 配列の初期化
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>");
}

上記の方法の他に以下の方法もあります。

// 配列の初期化
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>");
}

配列の要素の削除方法は異なりますが、上記二つのプログラムの実行結果は以下のような表示になります。

redの値:赤
blueの値:青
yellowの値:黄

keyがgreenの要素が削除されていることが確認できました。