jQuery逆引きリファレンス
配列の内容を順番に加工するには？（$.map）
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。
配列の内容を順に加工するのは、$.mapメソッドの役割です。標準のJavaScriptにも同等のメソッドとしてmapがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.mapメソッドを利用するのが無難でしょう。
$.mapメソッドの基本
さっそく、具体的な例を示します。以下は、数値配列numbersの内容をそれぞれ自乗した結果を新しい配列として得る例です。
|
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
var numbers = [ 3, 5, 7 ];
var result = $.map(numbers,
function(elem, index) {
// 数値要素を自乗した結果を返す
return elem * elem;
}
);
console.log(numbers); // 元の配列
console.log(result); // 演算後の配列
});
</script>
|
$.mapメソッドの構文は、以下の通りです。
［構文］$.mapメソッド
……配列要素に対する任意の処理……
})
コールバック関数の条件は、以下の通りです。
- 引数として要素値（
elem）、インデックス番号（index）を受け取る*1 - 戻り値は、結果配列に格納すべき要素
$.mapメソッドは、結果配列を$.mapメソッドの戻り値として返します（ここでは変数result）。元の配列（ここでは変数numbers）は影響を受けません。
- *1
$.eachメソッドとは引数の順番が逆なので要注意です。
コールバック関数のさまざまな戻り値
コールバック関数の戻り値にはnull／undefined、配列を指定することもできます。以下に、これらの場合の結果を見てみます。以下のコードは、いずれも上のコードの太字部分だけを書き換えたものです。
（1）null、undefinedを返す場合
戻り値にnull、またはundefinedを指定した場合、その要素は結果配列から削除されます（null、undefinedがセットされるわけではありません）。例えば以下のようなコードで確認してみましょう。
|
var numbers = [ 3, 5, 7 ];
var result = $.map(numbers,
function(elem, index) {
return (elem > 5) ? undefined : elem * elem;
}
);
console.log(numbers); // 元の配列
console.log(result); // 演算後の配列
|
要素値が5より大きい場合には、その要素を破棄、それ以外の場合にだけ自乗した値を結果配列に反映させるコードです。結果（次の画面）を見ると、確かに要素値7が自乗されずに、破棄されていることが確認できます。
（2）配列を返す場合
例えば以下は、結果配列に元の要素値と自乗した値の配列を返すコードです。
|
var numbers = [ 3, 5, 7 ];
var result = $.map(numbers,
function(elem, index) {
return [elem, elem * elem];
}
);
console.log(numbers); // 元の配列
console.log(result); // 演算後の配列
|
この場合、結果配列は入れ子の配列になりそうですが、そうはなりません。以下のように、配列はフラット化されて一次元配列として返されます。
オブジェクトを処理する方法
$.mapメソッドの第1引数には、配列の代わりにオブジェクトを指定することもできます。例えば以下は、オブジェクトからプロパティ名だけを取り出す例です。
|
var member = { name: '山田理央', age: 17, sex: 'female' };
var member2 = $.map(member,
function(elem, key) {
return key;
}
);
console.log(member); // 元のオブジェクト
console.log(member2); // 結果配列
|
オブジェクトを処理する場合、コールバック関数にはインデックス番号／値の代わりに、プロパティ名とその値が渡される点に注目です。
元の配列に影響が出る場合
先ほども述べたように、$.mapメソッドのコールバック関数で行った操作は、基本的に元の配列に影響を及ぼしません。例えば、以下のように引数elem（元の要素値）に値を明示的に代入しても、それは変わりません。
|
var numbers = [ 3, 5, 7 ];
var result = $.map(numbers,
function(elem, index) {
elem = elem * elem;
return elem;
}
);
console.log(numbers); // 元の配列
console.log(result); // 演算後の配列
|
ただし、配列の内容が参照型（オブジェクト）である場合には、事情が異なります。例えば以下は、オブジェクト配列に対してage（年齢）プロパティを1インクリメントする例です。
|
var members = [
{ name: '山田理央', age: 17, sex: 'female' },
{ name: '鈴木真琴', age: 24, sex: 'male' },
{ name: '佐藤健一', age: 45, sex: 'male' },
{ name: '木下奈美', age: 29, sex: 'female' },
{ name: '天童赤根', age: 35, sex: 'female' }
];
var members2 = $.map(members,
function(elem, index) {
// ageプロパティをインクリメント
elem.age++;
return elem;
}
);
console.log(member); // 元のオブジェクト
console.log(member2); // 結果配列
|
参照型の値を編集した場合、結果のように元の配列にも影響が及んでしまう点に注意してください。これを避けるには、以下のようにオブジェクトを生成し直すことです。
|
var members2 = $.map(members,
function(elem, index) {
return { name: elem.name, age: elem.age + 1, sex: elem.sex };
}
);
|
API：jQuery.map() カテゴリ：Utilities（ユーティリティ）
※以下では、本稿の前後を合わせて5回分（第10回～第14回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
10. 変数の型情報を判定するには？（$.isXxxxx／$.type）
$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。
11. 配列の内容を順番に処理するには？（$.each）
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery／someメソッドを、jQueryの$.eachで代替する方法も説明する。
12. 【現在、表示中】≫ 配列の内容を順番に加工するには？（$.map）
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。
13. 配列から特定の条件で要素を取り出すには？（$.grep）
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。
14. 配列の内容を検索するには？（$.inArray）
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。
