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. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  2. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  3. Animated Heat Distortion Effects with WebGL

    JavaScript

    陽炎のような揺れを表現できる「Animated Heat Distortion Effects wi…

    夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することが…

  4. Inspiration for Grid Loading Animations
  5. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

コメント

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

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

最近の記事

  1. ミノン メン 薬用全身シャンプー
  2. ウェアラブルヒーター ネック

アーカイブ

PAGE TOP