[ jQuery ] 配列内の値の存在確認 / 条件検索して合致する要素のみ取得 ( inArray, grep )

Pocket

ここでは、JQuery で配列内の値の存在確認を行うサンプルと、変数(オブジェクト)自身が配列であるかを確認するサンプルを掲載しています。また、配列を条件検索して条件に合致する要素のみを取得するサンプルもあわせて掲載しています。

スポンサーリンク

配列内の値の存在を確認する

jQuery では、inArray 関数を使用して、配列内の値の存在確認を行うことができます。数値と文字列は区別されます。詳細はサンプル内のコメントを参照ください。

$(function () {

    /*
     * 検索対象の配列
     */
    var haystack = [1, "apple", "100", "banana"];

    /*
     * 順に、数値の1、文字列の "orange"、文字列の"100"が配列に存在するか
     * 確認する。見つからなかった場合は -1が、見つかったた場合は
     * 見つかった要素のインデックス(先頭が0)がリターンされる。
     */
    console.log( $.inArray(1, haystack) );          // 0  found
    console.log( $.inArray("orange", haystack) );   // -1 not found
    console.log( $.inArray("100", haystack) );      // 2  found

    /*
     * 文字列の"100"は存在するが、数値の100は存在しないので
     * -1 がリターンされる
     */
    console.log( $.inArray(100, haystack) );        // -1 not found

    /*
     * 配列内に "apple" は存在するが、インデックス2(第3パラメータ)以降には
     * 存在しないため -1がリターンされる
     */
    console.log( $.inArray("apple", haystack, 2) ); // -1 not found

});

与えられた変数(オブジェクト)が配列か確認する

jQuery では isArray 関数を使用してパラメータとして与えられたオブジェクトが配列か確認することができます。詳細はコメント内のサンプルを確認ください。

$(function () {

    var haystack = [1, "apple", "100", "obama"]; // 配列を格納
    var func = function() { };                   // 空の関数を格納

    console.log( $.isArray(haystack) ); // true
    console.log( $.isArray(func) );     // false

});

使い道がイメージできません。。。

配列を条件検索して合致する要素のみの別配列を作成する

jQuery では grep 関数を使用することで、配列を条件検索して合致する要素のみを取得することができます。詳細は、サンプル内のコメントを参照ください。

$(function () {

    /*
     * 配列の定義
     */
    var number_array = [ 10, 23, 33, 41, 51, 64, 78, 87, 97 ];

    /*
     * 配列のインデックスと値をパラメータに関数を要素数回実行する
     * 奇数だけの値を抽出した配列を取得する
     *
     * ※ パラメータの順番に気を付けること
     */
    var odd_array = $.grep( number_array, function( value, index ) {

        /*
         * 剰余を求める(奇数なら1、偶数なら0)
         */
        var modResult = value % 2;

        return modResult;
    });

    /*
     * フィルター後の配列を出力する
     */
    console.log( odd_array.join( ", " ) );

    /*
     * odd_array : 出力結果
     * ==============================
     * 23, 33, 41, 51, 87, 97
     */

    /*
     * 元々の配列に対する影響がないことを確認する
     */
    console.log( number_array.join( ", " ) );

    /*
     * number_array : 出力結果
     * ==============================
     * 10, 23, 33, 41, 51, 64, 78, 87, 97
     */

});
参考
スポンサーリンク


Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>