jQueryで配列の値を検索し、判定を行う方法【サンプルコードで解説】

jQueryで配列の値を検索する方法をサンプルコードと共にご紹介します。

大まかに分けて、$.inArrayを使用して値に対応したキーを取得する方法と、$.eachの繰り返し処理を活用して調べる方法があります。

$.inArrayで調べたい値のキーを取得する

$.inArrayは、調べたい配列の値を設定することで、その値が存在する場合はキーを返します。

第一引数に調べたい値、第二引数に配列を設定します。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape'];
    
    //キーを返す 配列のキーは0から数えるため、appleなら0、grapeなら2
    console.log( $.inArray('grape', aryFruits) );
});
</script>

そして、値が見つからない場合は-1を返します。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape'];
    //cherryはないので-1となる
    console.log( $.inArray('cherry', aryFruits) );
});
</script>

配列に値があるかどうかを調べたい時は、返り値が「-1」かどうかを判定する

前述の通り、$.inArrayで配列に値が見つからなかった時は「false」ではなく「-1」を返すため、配列内に値があるかどうかを調べたい時はif文で-1かどうかを判定します。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape'];
    if( $.inArray('banana', aryFruits) !== -1 ){
        //bananaがある場合
        console.log('配列内に値がありました。');
    }else{
        //bananaがない場合
        console.log('配列内に値がありません。');
    }
});
</script>

複数の値があった場合は、最初にヒットしたキーを取得する仕様

$.inArrayで複数の値がヒットした場合、最初に見つかったキーのみが返されます。

そのため、$.inArrayで件数を調べたりするのは困難なので、件数を取得したい場合は後述のeachメソッドを使用しましょう。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape', 'banana'];
    //bananaのキーは1と3だが、返却値は1
    console.log( $.inArray('banana', aryFruits) );
});
</script>

検索した配列の値を削除し、詰める

$.inArrayで検索された値を削除し、配列を詰める場合の処理です。

<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape', 'cherry', 'strawberry'];
    //grapeがあるかどうかキーを取得し確認
    var index = $.inArray('grape', aryFruits);
    if(index !== -1){
        //grapeを削除し、配列を詰める
        aryFruits.splice(index, 1);
    }
    //結果⇒[ "apple", "banana", "cherry", "strawberry" ]
});
</script>

$.eachで配列を繰り返し、好きな条件の値を取得する

$.eachで配列を繰り返すことで、好きな条件で検索をかけることが出来ます。

配列をループさせることで検索する力業ですが、$.inArrayとは異なり、自分で好きな条件で検索できることがメリットです。

第一引数に配列を、第二引数にfunctionでキーと値の変数を決めることで繰り返し処理が可能です。

$.each(配列, function(キー, 値){
    //キーと値を繰り返し処理で取得できる
});

検索して一致した配列内の件数を取得する

ループ内で一致した件数をカウントさせることで、配列内の値の数を取得できます。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape', 'apple', 'apple', 'grape'];
    var cnt = 0;
    $.each(aryFruits, function(key, value){
        //appleの場合はカウントアップさせる
        if(value === 'apple'){
            cnt++;
        }
    });
    console.log(cnt);
});
</script>

複数の値を配列内の検索条件に指定する

$.eachは繰り返し処理の中で自由に条件を決められるため、複数の値を検索条件にキーを取得する、ということが出来ます。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape'];
    $.each(aryFruits, function(key, value){
        //bananaとgrapeを対象にキーを取得
        if(value === 'banana' || value === 'grape'){
            console.log(key);
        }
    });
});
</script>

配列内の値に特定の文字が含まれているかをチェックする（あいまい検索）

繰り返しで値の検索条件に、「指定した文字が含まれているかどうか」で判定できるあいまい検索が可能です。

matchを使用した正規表現で、調べたい値を設定します。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape', 'cherry', 'strawberry', 'apricot'];
    $.each(aryFruits, function(key, value){
        //「rr」が含まれる値の場合、consoleに表示
        if(value.match(/rr/)){
            console.log(key + ' : ' + value);
        }
    });
});
</script>

配列内で前方一致する値を検索する

前方にのみ一致する値を調べたい場合もmatchを使用して検索ができます。

正規表現のルールにより、冒頭に「^」を付けることで、先頭からマッチする文字列を検索できます。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape', 'cherry', 'strawberry', 'apricot'];
    $.each(aryFruits, function(key, value){
        //先頭が「ap」な値の場合、consoleに表示
        if(value.match(/^ap/)){
            console.log(key + ' : ' + value);
        }
    });
});
</script>

配列内で後方一致する値を検索する

前方一致と同じく、後方一致も検索が可能です。

正規表現のルールにより、末尾に「$」を付けると、その文字列で終える値を検索できます。

サンプルコード
<script>
$(function(){
    var aryFruits = ['apple', 'banana', 'grape', 'cherry', 'strawberry', 'apricot'];
    $.each(aryFruits, function(key, value){
        //末尾が「e」な値の場合、consoleに表示
        if(value.match(/e$/)){
            console.log(key + ' : ' + value);
        }
    });
});
</script>

jQueryで配列内の検索方法についてまとめました。

使用したい用途に合わせて、是非ご活用ください。

以上、jQueryで配列の値を検索し、判定を行う方法、でした。

jQuery