JavaScriptで連想配列の中に連想配列を入れ子で入れる方法

JavaScriptを勉強しているとき、多次元配列を作る必要があり、いろいろと動作の実験をしてみました。ここでは自分用のメモとして以下のサンプルを作りました。連想配列を３つ重ねた3次元の配列です。

function test(){
  myArray = new Array();
  myArray =
    {ひらがな:
             {あ行:{a:"あ",i:"い",u:"う",e:"え",o:"お"},
              か行:{a:"か",i:"き",u:"く",e:"け",o:"こ"}
    },カタカナ:
             {ア行:{a:"ア",i:"イ",u:"ウ",e:"エ",o:"オ"},
              カ行:{a:"カ",i:"キ",u:"ク",e:"ケ",o:"コ"}
    }
};
　//配列の要素の呼び出し方は以下どちらでもよいようです。
  alert(myArray["ひらがな"]["あ行"]["e"]);
       // ==> "え"が出力される
  alert(myArray.カタカナ.カ行.o);
       // ==> "コ"が出力される

  /*ちなみに、配列の要素を変数を用いて呼び出したい場合*/
  var str1 = "ひらがな";
  var str2 = "か行";
  var str3 = "e";

  alert(myArray[str1][str2][str3]);
       //==> "け"が出力される
  alert(myArray.str1.str2.str3);
      // ==>この呼び出し方はできませんでした
}

調べていて、連想配列の要素を変数を用いて呼び出すやり方に謎を感じました。たとえば、以下の通常の配列の場合

array1 = ["あ","い","う","え","お"]

要素を取り出すときはarray1[0]のようにでくくって記述します。一方で、以下のように連想配列の場合

array2 = {a:"あ",i:"い",u:"う",e:"え",o:"お"}

要素を取り出すときは、array2.aのようにドットで記述しますし、通常の配列のようにarray2["a"]のような記述でも大丈夫です。

しかし！変数を使うときは以下のように、での記述しかダメ（？）みたいです。

var str1 = a;

array2 = {a:"あ",i:"い",u:"う",e:"え",o:"お"};

alert(array2[str1]);

//==>"あ"が出力される

素人の感覚からしたら、array2.str1って記述するのかなーと思いましたが違うのですね。不思議。ちなみに、自分のコーディングが間違ってるのか、多次元配列にするとき、通常の配列と連想配列の混在ってできないのだろうか・・動作しない・・