jQueryには便利なユーティリティ関数(jQueryクラスのメソッド)があります。ここでは、「grep each map」「inArray」「merge extend」について紹介します。
grep each map
配列の各要素ごとに処理をする関数として、grep each mapがあります。それぞれの概要は次のようになります。
項目 | grep | each | map |
---|---|---|---|
概要 | 要素の選別 | 要素の個別処理 | 要素の個別処理をして新しい配列を取得 |
動作イメージ | var bfdata = [3, 2, 4, 1]; ↓ 2より大きい値を選別 [3, 4] |
var bfdata = [3, 2, 4, 1]; ↓ 各要素ごとに処理を実行 bfdata[0]を扱った処理 bfdata[1]を扱った処理 bfdata[2]を扱った処理 bfdata[3]を扱った処理 |
var bfdata = [3, 2, 4, 1]; ↓ 各要素を2倍にした新しい配列を取得 [6, 4, 8, 2] |
使い方は以下の通りです。
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
// }
// }