忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript 連想配列の作成と初期化について

連想配列とは通常の配列の様に要素を指標によって参照するのではなく、キーとなる文字列とそれに対応する値を持ちます。 しかし、JavaScript では指標に文字列を指定できません。但し、 Array のプロパティとして取り扱うことで連想配列の様な振る舞いが可能です。

連想配列的宣言

    //連想配列の宣言
    var arrVar = { name: "test", value: "12345" };
    console.log(arrVar);    // Object { name: "test", value: "12345" } と表示される
    //個別の表示
    console.log(arrVar["name"]);    // test と表示される
    console.log(arrVar["value"]);   // 12345 と表示される

上の例では arrVar クラスを配列の様に宣言し生成していますが、コンソールには Object と表示されます。 これはオブジェクトのプロパティであることが分かります。
それぞれのプロパティを個別に表示させると、連想配列的に値を返します。

また、以下の例の様に、宣言された連想配列に後から要素を追加することもできます。

連想配列的宣言と値の追加

    //連想配列の宣言
    var arrVar = { name: "test", value: "12345" };
    //連想配列への要素追加
    arrVar["item"] = "aaaaaaa";
    console.log(arrVar);    // Object { name: "test", value: "12345", item: "aaaaaaa" } と表示される


ここで連想配列と言っているものはオブジェクトであり、その中のプロパティを宣言してそれぞれをプロパティ名(キー名)によりアクセスします。 オブジェクトのプロパティへのアクセスはドットで連結することで行えます。以下に例を示します。

連想配列のプロパティへのアクセス

    //連想配列の宣言
    var arrVar = { name: "test", value: "12345" };
    //連想配列の各要素へのアクセス(プロパティを指定)
    console.log(arrVar.name);   // test と表示される
    console.log(arrVar.value);  // 12345 と表示される
    //要素の追加
    arrVar.item = "aaaa";
    console.log(arrVar.item);   // aaaa と表示される
    console.log(arrVar);        // Object { name: "test", value: "12345", item: "aaaa" } と表示される

オブジェクトへのプロパティ追加は簡単にできるところが JavaScript の自由度を高めていると思います。 (逆に言えば、プログラムを難しくしているのかもしれませんが)

実はオブジェクトには関数も持つことが出来ます。以下の例は最初に宣言したオブジェクトに対して後から関数を追加しています。

連想配列への関数追加

    //連想配列の宣言
    var arrVar = { name: "test", value: "12345" };
    //要素の追加
    arrVar.item = "aaaa";
    //関数の追加
    arrVar.func = function() {
        alert("test");      // 単にメッセージで「test」の表示
    }
    console.log(arrVar);    // Object { name: "test", value: "12345", item: "aaaa", func: func() … } と表示される
    //関数の実行
    arrVar.func();          // 「test」の表示が行われる


この関数は後から追加しなくても、最初の宣言で行えばもっと簡素にできます。

連想配列の関数宣言

    //連想配列の宣言
    var arrVar = { name:  "test", value: "12345", item:  "aaaa",
                   func: function() {
                       alert("test");   // メッセージで「test」の表示
                   }
                 };
    console.log(arrVar);    // Object { name: "test", value: "12345", item: "aaaa", func: func() … } と表示される
    //関数の実行
    arrVar.func();          // 「test」の表示が行われる












PR

コメント

コメントを書く