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. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  2. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  3. no-image
  4. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  5. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  6. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP