NEW ARTICLE
Rocky Linuxでのシェルスクリプトを使用したシステム管理の自動化
  1. HOME
  2. javascript
  3. javascript underscoreを使って配列の要素をランダムに取得する

javascript underscoreを使って配列の要素をランダムに取得する

javascript underscoreを使って配列の要素をランダムに取得する

javascriptで、underscoreを使って配列内に指定した値が含まれているかを判定するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • underscore 1.13.2
  • ブラウザ chrome 103.0.5060.114
Javascript サンプル集はこちら

underscore使用

こちらのサイトから最新版を確認して、CDN版を使用してます。

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.4/underscore-umd-min.js"></script>

ランダムに取得

配列内の要素から値をランダムに取得するには、「_.sample」を使用します。

'use strict'

const arr = ['aaa','bbb','ccc','ddd','eee'];

console.log( _.sample(arr) );
use strictについてはこちら

実行結果

javascriptで記述すると以下のようになります。

arr[ Math.floor( Math.random() * arr.length ) ]

また、「_.sample」は抽出する数も指定することが可能です。
※値は重複しません。

const arr = ['aaa','bbb','ccc','ddd','eee'];

console.log( _.sample( arr, 3 ) );

実行結果

パフォーマンス比較

パフォーマンスも比較してみます。CDN版ではなく「underscore-umd-min.js」をローカルにおいて使用してます

<script src="underscore-umd-min.js"></script>

<script>

    // 実行回数
    const times = 1_000_000;

    // 空白を埋めるだけの関数
    function spacePadding(val, n = 8) {
        for (; val.length < n; val += ' ');
        return val;
    }

    // 計測結果を表示
    const benchmark = (name, start, end) => {
        let report = (end - start).toPrecision(3);
        // 表示を見やすくするため関数名に空白を埋める
        name = spacePadding(name)
        console.log(`実行回数:${times}回 関数名:${name} 実行時間:${report}(ms)`);
    }

    const arr = ['aaa','bbb','ccc','ddd','eee'];

    // 計測
    start = performance.now();

    for (let i = 0; i < times; ++i) {
        _.sample(arr)
    }

    end = performance.now();

    benchmark('_.sample', start, end);

    // 計測
    start = performance.now();

    for (let i = 0; i < times; ++i) {
        arr[ Math.floor( Math.random() * arr.length ) ]
    }

    end = performance.now();

    benchmark('Math.random', start, end);

</script>

「Math.random」を使用した方が、速いという結果になりました。

実行回数:1000000回 関数名:_.sample 実行時間:61.9(ms)
実行回数:1000000回 関数名:Math.random 実行時間:16.3(ms)

firefox(102)でも同様です。

実行回数:1000000回 関数名:_.sample 実行時間:45.0(ms)
実行回数:1000000回 関数名:Math.random 実行時間:9.00(ms)

safari(15.5)でも同じです。

実行回数:1000000回 関数名:_.sample 実行時間:29.0(ms)
実行回数:1000000回 関数名:Math.random 実行時間:10.0(ms)