配列の要素に応じた多次元の連想配列を用意する

したいこと

['i', 'ro', 'ha']

を元に以下の連想配列に値を代入したい。
なお配列の要素は動的とする。

hoge['i']['ro']['ha']

１つの答え

文字列を作って eval で処理。

var hoge = {'i':{'ro':{'ha':''}}};
var val = 'ﾍ(-。-)ノ';
var keys = '';
var keysArray = ['i', 'ro', 'ha'];

for(key in keysArray){
    keys += "['" + keysArray[key] + "']";
}
eval('hoge' + keys + ' = val');

console.log(keys);
console.log(hoge);

↓

['i']['ro']['ha']
Object {i: Object}
  i: Object
    ro: Object
      ha: "ﾍ(-。-)ノ"

以下蛇足

作ったもの

jQuery で、重なっている要素をクリックすると全部反応するのですが、その際、先祖方向に向かって順番に反応してくれるので、それを全部拾っていくと逆に場所を特定できます。
具体的に書くとこう。

こんな HTML で

<div id="no1">
  001
  <div id="no2">
    002
    <div id="no3">
      003
    </div>
  </div>
</div>

こんな javascript のとき

$(document).on('click', 'div', function(){
  alert(this.id);
});

003 の文字をクリックすると、
no3, no2, no1 の順番で alert の小窓がでます。
これをもとに以下のようにしたかったのです。

hoge['no1']['no2']['no3'] = 'ほにゃらら';

で、最終的にできたもの。

JSON可視化＆編集