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

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

あとで読む「Readability」にChrome/iPhone/Reederなどから簡単に情報を送る設定方法や使い方色々前のページ

JavaScriptの関数のスコープについてちょっと確認してみる次のページ

関連記事

  1. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  2. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  3. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  4. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

  5. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  6. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

コメント

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

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

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP