JavaScript

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]);

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

関連記事

  1. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  2. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  3. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

  4. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  5. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  6. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP