js STUDIO

$.map()

指定した配列やオブジェクトを、関数を通して新しい配列にして出力します。

$.map( array, callback( element, index) ) 1.0追加

戻り値:Array

引数 説明
array 変換する配列を指定します。
callback(element, index) 各値を変換する関数を指定します。 この関数内でのthisはwindowを参照します。
element
ループ処理中に参照する配列の各値です。
index
ループ処理中に参照している値のインデックス番号です。

$.map( object, callback( value, key ) ) 1.6追加

戻り値:Array

引数 説明
object 変換するオブジェクト、または配列を指定します。
callback(value, key) 各値を変換する関数を指定します。 この関数内でのthisはwindowを参照します。
value
ループ処理中に参照する配列またはオブジェクトの各値です。
key
配列ならインデックス番号、オブジェクトならプロパティのキーになります。

補足事項

関数の戻り値の種類によって、変換先の新しい配列に対して次のような処理が自動的に行われます。

変換された値
新しい配列にそのまま追加されます
null、またはundefined
その値は破棄され、新しい配列に追加されません。
配列
新しい配列に入れ子ではなく、フラットな状態で追加されます。

サンプル

シンプルな変換例です。 

$.map( [0,1,2], function(n){
   return n + 4;
 });

  [4, 5, 6] //結果

条件によってnullを返し、特定の項目を破棄する例です。 

$.map( [0,1,2], function(n){
   return n > 0 ? n + 1 : null;
 });

[2, 3] //結果(１つ目の値は破棄されました)

配列を戻り値に指定した例です。 

$.map( [0,1,2], function(n){
   return [ n, n + 1 ];
 });

[0, 1, 1, 2, 2, 3]  //結果

変換元にオブジェクトを指定した例です。 

var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
  return value * 2;
});

[20, 30, 40]  //結果

変換元にオブジェクトを指定し、2つ目の引数を確認する例です。 

var dimensions = { width: 10, height: 15, length: 20 },
    keys = $.map( dimensions, function( value, index ) {
      return index;
    });

["width", "height", "length"] //結果(インデックス番号ではなくプロパティのキー)

デモ

$.map()を使って、新しい配列を作成して出力しています。 

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<p></p>
<span></span>
<script>
    //元になる配列
    var arr = [ "a", "b", "c", "d", "e" ];
    $("div").text(arr.join(", "));

    //各値を大文字に変換し、インデックス番号を付加
    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    //各値の自身の文字列を付加
    arr = jQuery.map(arr, function (a) {
      return a + a;
    });
    $("span").text(arr.join(", "));
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM