Yak blog

« Javascriptにおける配列と連想配列 prototype.js編 その1 | メイン | script.aculo.usのUnitTestの使い方 前編 »

Javascriptにおける配列と連想配列 prototype.js編 その2

前回の続きです。

その2で終わりなので 前編・後編のがよかったな、といまさら思いつつ。

prototype.jsにおける連想配列

というか、 基本的に Javascriptでは連想配列==オブジェクトです。 そして、prototype.jsでは、オブジェクト自体は何も変わらないので、特に普通の Javascriptと変わりません。

ちなみにドキュメントを見ると Objectクラスにいくつか関数が追加されていますが、Objectのprototype自体は変更されていないので、素のオブジェクト(Objectクラスのインスタンス)は素のままです。

つまり、

var object = new Object();

for( var i in object ) {
	document.write( object[i] );
}

とやっても何も表示されません。

結果
(何も表示されず)

ですから、prototype.js適用下でも、配列の時のように拡張関数を気にすることなく for in をそのまま使用する事ができます。

というわけで、連想配列は そのまま使ってねー!ばいばーーーーい!!!




・・・ではあまりに無責任すぎるので、ひとまず前回の最後の例を連想配列で書き直してみましょう。

var obj = new Object();

obj['hoge'] = 'hoge hoge';
obj['fuga'] = 'fuga fuga';
obj['piyo'] = 'piyo piyo';


/*
もちろん、こんな風に JSON形式で書いても OKです。むしろこっちのが楽チン。

var obj = {
	hoge: 'hoge hoge',
	futa: 'futa futa',
	piyo: 'piyo piyo'   // ←最後の要素はかならずカンマを外すこと。IEがすねます。
};
*/


for( var i in obj ) {
	document.write( obj[i] + "<br />\n" );
}
結果
hoge hoge
fuga fuga
piyo piyo

と、前回のような回りくどいことをせずにすんなりと書く事ができます。

さて、じゃあ prototype.jsでは連想配列は特に配慮されていないのかというと、そうではありません。 そこで登場するのが前回ちらっと触れた Hashクラスです。

Hashクラスはそのままずばり、連想配列として扱うためのクラスで Arrayクラス同様 Enumerableクラスを継承しています。 そのため、eachや anyといったイテレート関数を使う事ができます。

Hashクラスを使う時は そのまま newするのではなく $H関数で オブジェクトから変換してやるのが簡単です。

var object = {
	hoge: 'hoge hoge',
	futa: 'futa futa',
	piyo: 'piyo piyo'   // ←最後の要素はかならずカンマを外すこと。IEが・・・
};

var hash = $H( object ); // オブジェクトを Hashに変換
hash.each( function( pair ) {   // ← Arrayクラスの時と異なり、key, valueという値を持つオブジェクトが渡されます。
	document.write( 'key: ' + pair.key + ' | value: ' + pair.value + "<br />\n" );
} );
結果
key: hoge | value: hoge hoge
key: fuga | value: fuga fuga
key: piyo | value: piyo piyo

上記の例で

また、Hashの keys、valuesプロパティを参照すると、キーと値をそれぞれ独立した配列として扱う事もできます。

そして、便利なのが toQueryString()関数。これは連想配列のキーと値の組み合わせを HTTPのリクエストパラメータ文字列の形式に変換して返してくれる関数です。 Ajax系クラスなどにパラメータを渡す時、いちいち文字列を生成しなくても、オブジェクトに必要なパラメータをつっこんで Hashに変換、この関数を呼び出せば 済むのでとっても楽チンになります。

var object = {
	param1: 'hoge',
	param2: 'fuga',
	array: ['hoge', 'fuga', 'piyo' ]  // ←
}

var parameter = $H( object ).toQueryString();

document.write( parameter );
結果
param1=hoge&param2=fuga&array=hoge&array=fuga&array=piyo // ←そのまま Ajaxクラスのパラメータ等に渡せる

てな感じです。 ちょっとしたことなら、わざわざ Hashクラスに変換するまでもないかもしれませんが、すこし凝った事をする場合には Hashクラスに変換してやると便利かと思います。

いじょ、簡単にではありますが 配列と連想配列の prototype.js編でした。

前回と明らかにテンションが違うのは、あまり深く追求しないで下さい。

であ、また。

About

2007年02月07日 01:25に投稿されたエントリーのページです。

ひとつ前の投稿は「Javascriptにおける配列と連想配列 prototype.js編 その1」です。

次の投稿は「script.aculo.usのUnitTestの使い方 前編」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。