返回值:ArrayjQuery.map(array, callback(elementOfArray, indexInArray))

为数组或对象中的每一个元素应用一个转换函数，并将转换后的结果添加到新生成的数组中。

$.map() 方法会在数组的每一个元素或对象上应用一个函数并将结果映射到一个新的数组中。在 jQuery 1.6 之前， $.map() 仅支持遍历数组。从 jQuery 1.6 开始，该方法还支持遍历对象。

类数组（Array-like）对象（也就是那些含有 .length 属性以及在索引值为 .length - 1 的位置处有值的对象）必须将其转化成真正的数组之后才能使用 $.map() 方法。jQuery 库提供了 $.makeArray() 方法来完成这样的转换。 

// The following object masquerades as an array.
var fakeArray = {"length": 1, 0: "Addy", 1: "Subtracty"};

// Therefore, convert it to a real array
var realArray = $.makeArray( fakeArray )

// Now it can be used reliably with $.map()
$.map( realArray, function(val, i) {
  // do something 
});

在该方法中提供的转换函数会应用在数组或对象的顶级（top-level）元素上，并且该转换函数中有两个参数：元素在数组或对象中的值及该值所对应的索引值或键。

转换函数可以返回如下值:

  • 转换后的值，该值会被映射到最终的结果数组中
  • null 或 undefined，用于移除该元素
  • 数组，会将该数组中的元素添加到最终的结果数组中

示例:

两个使用 .map() 的例子。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
  </style>
<script src="jquery.min.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>

演示:

示例:

将原始数组中的每个值加 4 后，映射到新的数组中。

jQuery 代码:
$.map( [0,1,2], function(n){
   return n + 4;
 });
结果:
[4, 5, 6]

示例:

若原始数组中的值大于 0，则将该值加 1 后，映射到新的数组中，否则在结果数组中将不包含该值。

jQuery 代码:
$.map( [0,1,2], function(n){
   return n > 0 ? n + 1 : null;
 });
结果:
[2, 3]

示例:

将原始数组中每个值及该值加 1 后的值作为返回结果，映射到新生成的数组中。

jQuery 代码:
$.map( [0,1,2], function(n){
   return [ n, n + 1 ];
 });
结果:
[0, 1, 1, 2, 2, 3]

示例:

将原始对象中的每个值乘 2 后，映射到新生成的数组中。

jQuery 代码:

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

示例:

将对象中的键映射到新生成的数组中。

jQuery 代码:

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

示例:

将原始数组中每个值的两次方作为返回结果，映射到新生成的数组中。

jQuery 代码:

$.map( [0,1,2,3], function (a) { 
  return a * a; 
});
结果:
[0, 1, 4, 9]

示例:

在处理函数中，通过返回 null 的方式来移除该元素。移除条件是该值小于 50。同时将未被移除的元素值减小 45。

jQuery 代码:

$.map( [0, 1, 52, 97], function (a) {
  return (a > 50 ? a - 45 : null); 
});
结果:
[7, 52]

示例:

通过在处理函数中返回数组的方式，在最终返回的结果数组中添加元素。

jQuery 代码:
var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
  return [a - 45, index];
});
结果:
[-45, 0, -44, 1, 7, 2, 52, 3]