JavaScript【 array 】10 ~ 配列からランダムに値を取得

Rolling three dice on a wooden desk. Rolling the dice concept for business risk, chance, good luck or gambling.

JavaScriptで用意されているMathオブジェクトのrandomメソッドを使用すると、乱数を作ることができます。
今回は、このMath.randomメソッドを使って、配列からランダムに値を取り出す方法について紹介します。

目次

 
1.randomメソッドの使い方
2.配列の値をランダムに取得
3.配列の値をシャッフル
 

1.randomメソッドの使い方

 
Mathオブジェクトのrandomメソッドを使用して、乱数を作ってみます。

function ranNum() {
    var num = Math.random();
    document.getElementById("dat").value = num;
}

「 Math.random() 」という記述で、乱数が返ります。

上記のソースコードを実行すると、次のようになります。
乱数ボタンを何度かクリックしてみて下さい。

  

 
Math.randomメソッドを使用すると、小数による乱数を作ることができます。

整数の乱数を作りたい場合は、さらにMath.floorメソッドを組み合わせて使用します。
Math.floorメソッドは、小数点以下を切り捨てて、整数のみを返すメソッドです。

整数の乱数を作ってみます。

function ranNum() {
    var num = Math.floor( Math.random() * 10 );
    document.getElementById("dat").value = num;
}

「 Math.random() * (MAX+1) 」とすると、MAX以下の整数の乱数を作ることができます。

「 Math.floor( Math.random() * 10 ) 」で、1から9までの整数の乱数が返ります。

上限を意識しない場合でも、「Math.random()」自体の返り値は1未満の少数のため、「Math.floor( Math.random() )」とすると、返り値は常に0となってしまう点に注意します。

上記のソースコードを実行すると、次のようになります。
乱数ボタンを何度かクリックしてみて下さい。

  

 
 
上限と共に下限も設定して、ある範囲内で乱数を作ることもできます。

function ranNum() {
    var num = Math.floor( Math.random() * 6 ) + 5;
    document.getElementById("dat").value = num;
}

「 Math.random() * ( (MAX+1) – MIN ) + MIN 」とすると、MINからMAXまでの乱数を作ることができます。

「 Math.floor( Math.random() * 6 ) + 5 」は、MIN が 5、MAX が 10( (10+1)-5=6 )となり、5から10までの乱数が返ります。

上記のソースコードを実行します。
乱数ボタンを何度かクリックしてみて下さい。

  

▲目次へ戻る

 

2.配列の値をランダムに取得

 
配列は、通常 インデックス番号を持っているので、インデックス番号に乱数を指定することで、配列の値をランダムに取得することができます。

配列の値をランダムに取得する場合は、次のように記述します。

var 配列変数 = [値1, 値2, 値3, ...];

配列変数 [ Math.floor( Math.random() * 配列変数.length  )];

配列の値をランダムに表示します。
表示ボタンを何度かクリックしてみて下さい。

[りんご、みかん、ぶどう、メロン、もも]のどれかを表示します

  

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function ranAry() {
    var fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];
    document.getElementById("dat").value = fruits[Math.floor(Math.random() * fruits.length)];
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
[りんご、みかん、ぶどう、メロン、もも]のどれかを表示します
    <form>
        <div style="display:inline-flex;">
           <input type="button" value="表示" onClick="ranAry()"> 
            <input type="text" id="dat" placeholder="ランダムに表示されます">
        </div>
    </form>
</div>

▲目次へ戻る

 

3.配列の値をシャッフル

 
今度は、Math.randomメソッドを使用して、配列要素の並び順をシャッフルしてみます。
シャッフルボタンを何度かクリックしてみて下さい。

[りんご、みかん、ぶどう、メロン、もも]の並び順をシャッフルします

  

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function ranAry() {
    var fruits =  ["りんご", "みかん", "ぶどう", "メロン", "もも"];
    var num = fruits.length;
 
    while (num) {
        var i = Math.floor(Math.random() * num);
        var str = fruits[--num];
        fruits[num] = fruits[i];
        fruits[i] = str;
    }

    document.getElementById("dat").value = fruits;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
[りんご、みかん、ぶどう、メロン、もも]の並び順をシャッフルします
    <form>
        <div style="display:inline-flex;">
           <input type="button" value="シャッフル" onClick="ranAry()"> 
            <input type="text" id="dat" placeholder="シャッフルします">
        </div>
    </form>
</div>

フィッシャー – イェーツのシャッフルのアルゴリズムでシャッフルしています。

配列変数のインデックスの範囲内で乱数 i を発生させて、配列変数[i]と 配列変数[num]を入れ替えています。

変数numを、インデックス番号の最大値から1ずつデクレメントさせることで、上記のデータ入れ替え処理を配列要素の数だけ繰り返し行う仕組みです。

whileの条件文が「0」になると(while(0))、falseの評価となり、ループ処理が終了します(while(1)は無限ループです)。
while文ついては、JavaScript【 while 】をご参照下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です