javascript underscoreを使って配列内に指定した値が含まれているかを判定する

javascript underscoreを使って配列内に指定した値が含まれているかを判定する

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

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • underscore 1.13.2
  • ブラウザ chrome 103.0.5060.114

underscore使用

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

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

判定する

配列内に指定した値が含まれているかを判定するには、「_.contains」を使用します。

'use strict'

let arr = [1, 2, 3]

console.log(
  _.contains(arr, 2) // true
)

console.log(
  _.contains(arr, 5) // false
)

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

arr.includes(2) // true
arr.includes(2) // false

パフォーマンスも比較してみます。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 = [1, 2, 3]

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

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

    end = performance.now();

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

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

    for (let i = 0; i < times; ++i) {
        arr.includes(2)
    }

    end = performance.now();

    benchmark('includes', start, end);

</script>

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

実行回数:1000000回 関数名:_.contains 実行時間:16.0(ms)
実行回数:1000000回 関数名:includes 実行時間:1.80(ms)

firefox(97)でも同様です。

実行回数:1000000回 関数名:_.contains 実行時間:46.0(ms)
実行回数:1000000回 関数名:includes 実行時間:17.0(ms)

safari(15)でも同じです。

実行回数:1000000回 関数名:_.each   実行時間:232(ms)
実行回数:1000000回 関数名:forEach  実行時間:44.0(ms)