jQuery.map()

所属分类：工具类 英文文档：jQuery.map()

jQuery.map( array, callback(elementOfArray, indexInArray) )返回: Array

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

  • 添加的版本: 1.0jQuery.map( array, callback(elementOfArray, indexInArray) )

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

  • 添加的版本: 1.6jQuery.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也支持遍历对象。

类似数组的对象- 那些有一个.length属性和一个.length - 1 的所引值- 必须被转换为实际的数组，然后被传递到$.map()。 jQuery库提供$.makeArray() 这样的转换。

1
2
3
4
5
6
7
8
9
10
 
// 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, 用于移除该元素
  • 数组，会将该数组中的元素添加到最终的结果数组中

例子:

Example: 使用$.map() 修改一个数组的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; margin:0; }
  span { color:red; }
  </style>
  <script src="https://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>

Demo:

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

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

Result:

1
 
[4, 5, 6]

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

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

Result:

1
 
[2, 3]

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

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

Result:

1
 
[0, 1, 1, 2, 2, 3]

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

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

Result:

1
 
 [20, 30, 40]

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

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

Result:

1
 
["width", "height", "length"]

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

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

Result:

1
 
[0, 1, 4, 9]

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

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

Result:

1
 
[7, 52]

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

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

Result:

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