Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

配列の内容を順番に加工するには?($.map)

2015年2月12日

$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。

  • このエントリーをはてなブックマークに追加

 配列の内容を順に加工するのは、$.mapメソッドの役割です。標準のJavaScriptにも同等のメソッドとしてmapがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.mapメソッドを利用するのが無難でしょう。

$.mapメソッドの基本

 さっそく、具体的な例を示します。以下は、数値配列numbersの内容をそれぞれ自乗した結果を新しい配列として得る例です。

HTML
<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.html)
元の配列と演算後の配列をコンソールで確認
元の配列と演算後の配列をコンソールで確認

 $.mapメソッドの構文は、以下の通りです。

[構文]$.mapメソッド

$.map(配列, function(elem, index) {
  ……配列要素に対する任意の処理……
})

 コールバック関数の条件は、以下の通りです。

  • 引数として要素値(elem)、インデックス番号(index)を受け取る*1
  • 戻り値は、結果配列に格納すべき要素

 $.mapメソッドは、結果配列を$.mapメソッドの戻り値として返します(ここでは変数result)。元の配列(ここでは変数numbers)は影響を受けません。

  • *1 $.eachメソッドとは引数の順番が逆なので要注意です。

コールバック関数のさまざまな戻り値

 コールバック関数の戻り値にはnullundefined、配列を指定することもできます。以下に、これらの場合の結果を見てみます。以下のコードは、いずれも上のコードの太字部分だけを書き換えたものです。

(1)null、undefinedを返す場合

 戻り値にnull、またはundefinedを指定した場合、その要素は結果配列から削除されます(nullundefinedがセットされるわけではありません)。例えば以下のようなコードで確認してみましょう。

JavaScript
var numbers = [ 3, 5, 7 ];
var result = $.map(numbers,
  function(elem, index) {
    return (elem > 5) ? undefined : elem * elem;
  }
);
console.log(numbers);  // 元の配列
console.log(result);   // 演算後の配列
コールバック関数の戻り値としてundefinedを返す例

 要素値が5より大きい場合には、その要素を破棄、それ以外の場合にだけ自乗した値を結果配列に反映させるコードです。結果(次の画面)を見ると、確かに要素値7が自乗されずに、破棄されていることが確認できます。

3、5の自乗だけが反映されている
3、5の自乗だけが反映されている
(2)配列を返す場合

 例えば以下は、結果配列に元の要素値と自乗した値の配列を返すコードです。

JavaScript
var numbers = [ 3, 5, 7 ];
var result = $.map(numbers,
  function(elem, index) {
    return [elem, elem * elem];
  }
);
console.log(numbers);  // 元の配列
console.log(result);   // 演算後の配列
コールバック関数の戻り値として配列を返す例

 この場合、結果配列は入れ子の配列になりそうですが、そうはなりません。以下のように、配列はフラット化されて一次元配列として返されます。

戻り値の配列は全てフラット化される
戻り値の配列は全てフラット化される

オブジェクトを処理する方法

 $.mapメソッドの第1引数には、配列の代わりにオブジェクトを指定することもできます。例えば以下は、オブジェクトからプロパティ名だけを取り出す例です。

JavaScript
var member = { name: '山田理央', age: 17, sex: 'female' };
var member2 = $.map(member,
  function(elem, key) {
    return key;
  }
);
console.log(member);   // 元のオブジェクト
console.log(member2);  // 結果配列
$.mapメソッドでオブジェクトを返す例
プロパティ名だけの配列を取得する例
プロパティ名だけの配列を取得する例

 オブジェクトを処理する場合、コールバック関数にはインデックス番号/値の代わりに、プロパティ名とその値が渡される点に注目です。

元の配列に影響が出る場合

 先ほども述べたように、$.mapメソッドのコールバック関数で行った操作は、基本的に元の配列に影響を及ぼしません。例えば、以下のように引数elem(元の要素値)に値を明示的に代入しても、それは変わりません。

JavaScript
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インクリメントする例です。

JavaScript
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);  // 結果配列
コールバック関数の中で元の要素値を操作する例
元の配列にも影響が及んでいる
元の配列にも影響が及んでいる

 参照型の値を編集した場合、結果のように元の配列にも影響が及んでしまう点に注意してください。これを避けるには、以下のようにオブジェクトを生成し直すことです。

JavaScript
var members2 = $.map(members,
  function(elem, index) {
    return { name: elem.name, age: elem.age + 1, sex: elem.sex };
  }
);
オブジェクトの中身を詰め替える例
元の配列に影響は及ばない
元の配列に影響は及ばない
処理対象:JavaScriptのmapメソッドの代替 カテゴリ:ユーティリティ
API:jQuery.map() カテゴリ:Utilities(ユーティリティ)

※以下では、本稿の前後を合わせて5回分(第10回~第14回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
10. 変数の型情報を判定するには?($.isXxxxx/$.type)

$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。

jQuery逆引きリファレンス
11. 配列の内容を順番に処理するには?($.each)

$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery/someメソッドを、jQueryの$.eachで代替する方法も説明する。

jQuery逆引きリファレンス
12. 【現在、表示中】≫ 配列の内容を順番に加工するには?($.map)

$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。

jQuery逆引きリファレンス
13. 配列から特定の条件で要素を取り出すには?($.grep)

$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。

jQuery逆引きリファレンス
14. 配列の内容を検索するには?($.inArray)

$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。

サイトからのお知らせ

Twitterでつぶやこう!