Yaks

Javascriptにおける配列と連想配列 prototype.js編 その2 はてなブックマーク - 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編でした。

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

であ、また。

トラックバック

このエントリーのトラックバックURL(末尾の /_nospam_を削除してください。):
http://www.greenspace.info/cgi-bin/mt/mt-tb-post.cgi/116/_nospam_

コメント (7)

where the theme of

投稿者: hd pornolar | 2011年3月10日 09:45

You want to become your prospect. You've always wondered the back to front.

投稿者: Bradleyscott | 2011年3月15日 17:50

It’s exhausting to seek out knowledgeable individuals on this subject, however you sound like you understand what you’re talking about! Thanks

投稿者: News Feeds For Your Website | 2011年5月22日 22:00

Thanks for your help with my research project! Don't worry, I won't be copying your post but I found a few useful ideas with my report. It's interesting you are the 2nd result shown for my search term.

投稿者: Gloria Coplon | 2011年5月25日 18:15

Hi, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam comments? If so how do you protect against it, any plugin or anything you can advise? I get so much lately it's driving me insane so any assistance is very much appreciated.

投稿者: As Seen on TV Thanks | 2011年6月 1日 15:39

skil hd77 parts

投稿者: skil hd77 | 2011年9月 7日 07:52

you have a great page here, lots of good stuff.

投稿者: West Bengal Matrimony | 2011年12月 2日 21:53

コメントを書き込む