jQuery.map()

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

描述: Translate all items in an array or object to new array of items.

  • version added: 1.0jQuery.map( array, callback(elementOfArray, indexInArray) )

    array待转换数组。

    callback(elementOfArray, indexInArray)为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。this将是全局的window对象。

  • version added: 1.6jQuery.map( arrayOrObject, callback( value, indexOrKey ) )

    arrayOrObject待转换数组或对象。

    callback( value, indexOrKey )该函数用泪处理每个项,第一个参数给函数是价值;第二个参数是的索引或key属性。该函数可以返回任何值添加到数组。返回全新的结果数组。在函数, this指的是全球(窗口)的对象。

$.map()方法适用于将数组或对象每个项目新阵列映射到一个新数组的函数。在jQuery 1.6之前,$.map()只支持遍历数组和类似数组的对象在jQuery 1.6也支持遍历对象。

类似数组的对象,如jQuery的collections,被当作数组。换句话说,如果一个对象有一个.length属性一个值在.length - 1上,它是作为一个遍历数组。

这个转换功能,是提供给调用此方法中的每个数组或对象的顶层元素并传递两个参数该元素的值和其索引或在数组或对象的key。

该函数可以返回:

  • 这将是映射到结果数组的转化值
  • null, 以删除该项目
  • 一个数组的值

Examples:

Example: A couple examples of using .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-git.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: Map the original array to a new one and add 4 to each value.

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

Result:

[4, 5, 6] 

Example: Maps the original array to a new one and adds 1 to each value if it is bigger then zero, otherwise it's removed.

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

Result:

[2, 3] 

Example: Map the original array to a new one; each element is added with its original value and the value plus one.

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

Result:

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

Example: Map the original object to a new array and double each value.


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

Result:

[20, 30, 40] 

Example: Map an object's keys to an array.


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

Result:

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

Example: Maps the original array to a new one; each element is squared.


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

Result:

[0, 1, 4, 9] 

Example: Remove items by returning null from the function. This removes any numbers less than 50, and the rest are decreased by 45.


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

Result:

[7, 52] 

Example: Augmenting the resulting array by returning an array inside the function.

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 1.6 API 中文版脚本之家整理、修订 (2011年6月)