JavaScriptのオブジェクト指向 (2/7)

■連想配列に関数リテラルを入れる

さて、配列に話を戻しましょう。配列には、普通の値も、もちろん関数リテラルも入れておくことができます。ということは、例えばある機能を実現するのに、いくつもの値や処理を用意しないといけないようなとき、それらを関数にまとめて利用する、といった使い方ができるわけですね。

実際に、簡単な利用例を下のリストにあげておきましょう（<script>タグの部分だけ掲載しておきます）。これは、MyDataという配列を用意して、そこに名前や年齢、メールアドレス、そしてそれらをまとめて表示する関数といったものを保管した例です。最後に、

MyData['showData']();

このようにしてshowData関数を呼び出していますね。非常に不思議な感じがしますが、これでちゃんと関数が呼び出され、画面にデータの内容が表示されるのです。

ちなみに、このshowDataでは、テキストをまとめるところで'\n'というものが使われています。この\nというのは、改行を意味する制御コードです。に多様なものに、タブを意味する\tなどもあります。テキストの途中で改行やタブ送りを行うのに使います。あわせて覚えておきましょう。

○書き方を変えてみる○

しかし、このスクリプト、正直言ってどうも読みにくいですね。配列を使っているので、関数の呼び出しはMyData['showData']();なんて具合になってます。これはぱっと見てもなんだかよくわかりません。

実を言えば、連想配列というのは、もう少し違った書き方もできるのです。普通、連想配列は、配列名の後に[]でキーを記述しますが、これは以下のような書き方もできます。

配列名.キー

配列名の後にドットを付け、キーをそのまま書いてもいいのです。というわけで、書き直したものを下のリストにあげてあります。なんだか、ずいぶんとすっきりした感じがしますね？　MyData['showData']()と書くより、MyData.showData()と書いた方が見た目にもすっきりとわかりやすく見やすいものになります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※サンプルスクリプト

<script type="text/javascript">
<!--
var MyData = new Array();
MyData['name'] = 'つやの';
MyData['age'] = 101;
MyData['mail'] = 'tuyano@gmail.com';
MyData['showData'] = function(){
	var result = '名前：' + MyData['name'] + '\n';
	result += '年齢：' + MyData['age'] + '歳\n';
	result += 'メール：' + MyData['mail'];
	alert(result);
}

MyData['showData']();
//-->
</script>


※サンプルスクリプト・改

script type="text/javascript">
<!--
var MyData = new Array();
MyData.name = 'つやの';
MyData.age = 101;
MyData.mail = 'tuyano@gmail.com';
MyData.showData = function(){
	var result = '名前：' + MyData.name + '\n';
	result += '年齢：' + MyData.age + '歳\n';
	result += 'メール：' + MyData.mail;
	alert(result);
}

MyData.showData();
//-->
</script>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail