連想配列のループ処理

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第9話:連想配列のループ処理

目次



マンガ








マンガ台詞

【1Page】
守:先生 前回習った 『連想配列』ですが どうやってループ させるんですか?
先生:よい質問だ 今日は『連想配列』 のループについて 説明するぞ
    連想配列では 『for』文ではなく 『for in』文を 利用する
    実例を 見てもらおう
        var tensuuHash = {"足立" : 65, "安藤" : 78, …};
        var goukeiTen = 0;
        var ninnzuu = 0;
        for (var key in tensuuHash) {
            goukeiTen += tensuuHash[key];
            ninnzuu ++;
        }
        var heikinTen = goukeiTen / ninnzuu;
        alert(heikinTen);
    『連想配列』を作る際に 指定した文字列は 『キー』と呼ばれる
    ここでは 『tensuuHash』に入れた 『足立』『安藤』 といった文字列が 『キー』となる
【2Page】
先生:『for in』文では 『変数 in 連想配列』
    とすることで 『キー』を取り出せる
    この場合は 変数『key』に
    『tensuuHash』のキー を取り出している
先生:『for』文と 同じように 処理の流れを 書いてみるぞ
    『key』に 『tensuuHash』の キーを取り出し
    『ループ処理』 を行う
    全てのキーを 取り出し終えた ので抜ける
【3Page】
先生:このプログラムを 実行すれば クラスの平均点が 分かるぞ
        58点
麗:じー
        :
        ,"安川" : 87
        ,"安見" : 3
        ,"吉田" : 76
        :
    なるほど 遊がクラスの 平均点を下げて いるのね
遊:(ガーン)



説明

この章では、『連想配列のループ処理』について学びます。『連想配列』は、『.length』で要素の数を知ることはできません。また、数字の添え字を使って要素にアクセスすることもできません。

『連想配列』の各要素をループ処理で利用する際には、『for』文ではなく、『for in』文を利用します。それでは以下、『for in』文について解説していきます。



『for in』文

『for in』文は、『for』文に似ています。しかし、違う点もあります。『for in』文では、『for (〜)』の括弧内の書き方が『for』文とは異なります。

以下は、『for』文です。

for (変数の初期化; 継続条件; 変数の増減) {
    // ループ処理(何度も実行する処理)
}

以下は、『for in』文です。

for (キーを取得する変数 in 連想配列の変数) {
    // ループ処理(何度も実行する処理)
}

『for in』文では、『for (〜)』の括弧内で、『連想配列の変数』と、その要素の『キー』を取得する変数を書きます。この『キー』を取得する変数には、ループが1回行われるごとに、『キー』が1つずつ代入されていきます。ループ処理の中では、この『キー』を利用して、連想配列の各要素の値を取得します。そして、全ての『キー』を処理し終えたあとに、ループを抜けます。

以下、実例を示します。

var tensuuHash = {"足立" : 65 ,"安藤" : 78 ,"内木" : 87};
for (var key in tensuuHash) {
    document.write(key + " " + tensuuHash[key] + "<br>");
}
 【結果】
 足立 65
 安藤 78
 内木 87

変数『key』に、連想配列『tensuuHash』の『キー』が、1つずつ入っていきます。

そして、ループ処理内で『tensuuHash[key]』として、連想配列の要素の値を取得しています。



マンガ中のプログラムの解説

マンガで登場したプログラムについても、解説を行っておきます。

var tensuuHash = {"足立" : 65, "安藤" : 78, …};
var goukeiTen = 0;
var ninnzuu = 0;
for (var key in tensuuHash) {
    goukeiTen += tensuuHash[key];
    ninnzuu ++;
}
var heikinTen = goukeiTen / ninnzuu;
alert(heikinTen);

連想配列『tensuuHash』に対して、『for in』文でループ処理を行っています。

変数『goukeiTen』に、『tensuuHash』の各値を足していき、変数『ninnzuu』に、処理した回数を記録しています。最後に『goukeiTen / ninnzuu』と割ることで、平均点を取得しています。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(平均点)を表示

sample1b.html』(短く表記)を表示

sample2.html』(キーと値を出力)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。