jQuery.map()

将一个数组中的所有元素转换到另一个数组中。

jQuery.map(array, callback(elementOfArray, indexInArray))

array 类型: Array 。待转换数组。
callback(elementOfArray, indexInArray) 类型:Function() 。处理每一个元素的函数。第一个参数是数组元素，第二个参数是该元素的索引值。该函数可以返回任何值。在函数内部， this 将是全局的window对象。

jQuery.map(arrayOrObject, callback(value, indexOrKey))

arrayOrObject 类型: Array,Object 。待转换数组或对象。
callback(value, indexOrKey) 类型:Function() 。处理每一个元素的函数。第一个参数是数组中元素或对象的值，第二个参数是该元素在数组中的索引值或该对象的键。该函数可以返回任何值，该返回值会被添加到数组中。若返回是数组，则会将该数组中的元素添加到最终的结果数组中。在函数内部， this 指的是全球（window）的对象。

如果你希望处理一个jQuery对象——例如， $('div').map(callback); —使用.map()代替.

$.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="./static/js/jquery-3.5.0.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 后，映射到新的数组中。

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

Result：[4, 5, 6]

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

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

Result：[2, 3]

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

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

Result：[0, 1, 1, 2, 2, 3]

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

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

Result：[20, 30, 40]

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

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

Result：[ "width" , "height" , "length" ]

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

$.map( [0,1,2,3], function (a) {
  return a * a;
});

Result：[0, 1, 4, 9]

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

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

Result：[7, 52]

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

var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
  return [a - 45, index];
});

Result：[-45, 0,-44, 1, 7, 2, 52, 3]

返回jQuery导航

jQuery.map()

例子