JavaScriptで連想配列（ハッシュ）から1つずつ値を取り出して配列に入れてランダムで取得する

タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列（ハッシュ）から1つずつ値を取り出してそれを今度は別の配列に格納していき、最終的にはその中からランダムで値を取得したいっていうことをやりたかったわけです。要するに連想配列からランダムに値を取り出したいってことですね。それと連想配列の中身や数がケースバイケースで変わるっていう状況を想定しているので、それに合わせた1つのやり方です。

[ads_center]

やり方

まずは基本から。for…inを使って普通の配列から1つずつ値を取得して加工する場合は以下のような感じでできますね。

var ary = ["aaa", "bbb", "ccc", "ddd"];
for(var i in ary){
    document.writeln(i + " : "  + ary[i] + "<br>");
}

//　実行結果
// 0 : aaa
// 1 : bbb
// 2 : ccc
// 3 : ddd

じゃあ連想配列はというと、こんな感じで同じように取得できます。

var obj = {
    aaa: "obj1",
    bbb: "obj2",
    ccc: "obj3",
    ddd: "obj4"
}
for(var i in obj){
    document.writeln(i + " : " + obj[i] + "<br>");
}

// 実行結果
// aaa : obj1
// bbb : obj2
// ccc : obj3
// ddd : obj4

で、この中からランダムの値を取得したい場合の手順を整理してみると以下のようになります。

1. 連想配列に入っている値の数を取得する
2. その数の分だけ乱数を作る
3. 連想配列の値を通常の配列に格納する
4. その配列のインデックスに乱数を入れる

ということで、なんかもっと良い方法があるかもしれませんが今の僕の技術ではこれしかできないので、以下1つずつ噛み砕いていきたいと思います。

連想配列に入っている値の数を取得する

数を取得するには0を代入した変数を作り、連想配列をfor…inで1をプラスしながら回していけばいいですね。

var objLength = 0;
for(var i in obj){
    objLength++;
}
document.writeln(objLength);

// 実行結果 4

その数の分だけ乱数を作る

連想配列の値の数の分だけ乱数を作るには、Math.random()にその数を掛けて、Math.floorで小数点以下を切り捨てればできます。掛ける数は上記のobjLengthに数を取得してますね。ここでは4が入っているのでこれを掛けることで0〜3の乱数を作ることができます。

var rand = Math.floor(Math.random() * objLength);
document.writeln(rand);

// 実行結果 0〜3のどれか

連想配列の値を通常の配列に格納する

for…inを使って1つずつpushで配列に入れていきます。

var ary = [];
for(var i in obj){
    ary.push(obj[i]);
}
document.writeln(ary);

// 実行結果 obj1,obj2,obj3,obj4

その配列のインデックスに乱数を入れる

最後に上記で作った配列に乱数を指定すればランダムで取得することができます。

document.writeln(ary[rand]);

// 実行結果 obj1〜obj4のどれか

コードをまとめるとこんな感じです。

var obj = {
    aaa: "obj1",
    bbb: "obj2",
    ccc: "obj3",
    ddd: "obj4"
}
var objLength = 0;
var ary = [];
for(var i in obj){
    objLength++;
    ary.push(obj[i]);
}
var rand = Math.floor(Math.random() * objLength);
document.writeln(ary[rand]);

以上、連想配列からランダムな値の取得方法でした。