jQueryには便利なユーティリティ関数(jQueryクラスのメソッド)があります。ここでは、「grep each map」「inArray」「merge extend」について紹介します。

grep each map

配列の各要素ごとに処理をする関数として、grep each mapがあります。それぞれの概要は次のようになります。

使い方は以下の通りです。

grep

jQuery.grep( 配列, function (要素の値, インデックス番号){
    return 条件;
}

条件でtrueを返した要素のみを選別した配列を戻り値として取得。

var bfdata = [3, 2, 4, 1];
var afdata = $.grep(bfdata, function (val, index) {
    return val > 2;
});
console.log(afdata);  // [object Array][3, 4]

each

jQuery.each( array[object], function (インデックス番号, 要素の値){
    任意の処理
}

returnでfalseを返すと処理が中断して、それ以降の要素の処理を行わない。

var bfdata = [3, 2, 4, 1];
var afdata = $.each(bfdata, function (index, val) {
    console.log(index + ':' + val);
    return val !== 4;
});
// 0:3
// 1:2
// 2:4
 
 
var bfdata = {name: "山田", height: 180, weight: 70};
var afdata = $.each(bfdata, function (index, val) {
    console.log(index + ':' + val);
});
// name:山田
// height:180
// weight:70

map

jQuery.map( array[object], function (要素の値, インデックス番号){
    任意の処理
    return 処理した要素の値 or null;
}

return で返した値を配列に追加。nullを返した場合は配列に追加しない。

var bfdata = [3, 2, 4, 1];
var afdata = $.map(bfdata, function (val, index) {
    if (val > 1) {
        return val * 2;
    } else {
        return null;
    }
});
console.log(afdata);  //  [object Array][6, 4, 8]

inArray

inArrayを利用することで、指定した値が配列中にあるか判定することができます。

jQuery.inArray( 値, 配列 )

指定した値が配列中にあれば、インデックスを返す。
値が配列中にない場合は、-1を返す。

var arr = ["鈴木", "佐藤", "山田"];
console.log(jQuery.inArray("山田", arr));  // 2
console.log(jQuery.inArray("室伏", arr));  // -1

merge extend

• 2つの配列の内容をマージするには、merge関数を利用します。
• 複数のオブジェクトをマージするには、extend関数を利用します。

merge

jQuery.merge( 配列1, 配列2 )

var first = ["a", "d", "c"];
var second = ["d", "a", "f", "h"];
$.merge(first, second);
console.log(first);  
// [object Array]["a", "d", "c", "d", "a", "f", "h"]

extend

jQuery.extend( [deep,] target [,object_1] [,object_N] )

「deep」にtrueを設定すると、再帰的に階層の深いプロパティも連結。

var a = {
    id: 1,
    name: '山田'
};
 
var b = {
    name: '山田隆',
    old: 20
};
$.extend(a, b);
console.log(a);  // [object Object]{id: 1, name: "山田隆", old: 20}

var a = {
    name: '山田',
    score: {
        english: 72,
        math: 90,
        science: 88
    }
};
var b = {
    name: '山田',
    score: {
        society: 69
    }
};
$.extend(a, b);
console.log(a);
// {
//    name: "山田", 
//    score: { 
//      society: 69
//    }
// }

var a = {
    name: '山田',
    score: {
        english: 72,
        math: 90,
        science: 88
    }
};
var b = {
    name: '山田',
    score: {
        society: 69
    }
};
$.extend(true, a, b);
console.log(a);
// {
//    name: "山田", 
//    score: { 
//      english: 72,
//      math: 90,
//      science: 88,
//      society: 69
//    }
// }