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也支持遍历对象。

类数组(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, 用于移除该元素
  • 数组,会将该数组中的元素添加到最终的结果数组中

案例一:
<!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>

结果:
a, b, c, d, e
A0, B1, C2, D3, E4
A0A0, B1B1, C2C2, D3D3, E4E4

案例二:
将原始数组中的每个值加 4 后,映射到新的数组中。
$.map( [0,1,2], function(n){
  return n + 4;
});

结果:
[4, 5, 6] 

案例三:
若原始数组中的值大于 0,则将该值加 1 后,映射到新的数组中,否则在结果数组中将不包含该值。
$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});

结果:
[2, 3] 

案例四:
将原始数组中每个值及该值加 1 后的值作为返回结果,映射到新生成的数组中。
$.map( [0,1,2], function(n){
    return [ n, n + 1 ];
});
结果:
[0, 1, 1, 2, 2, 3] 

案例五:
将原始对象中的每个值乘 2 后,映射到新生成的数组中。
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
  return value * 2;
}); 

结果:
[20, 30, 40] 

案例六:
将对象中的键映射到新生成的数组中。
var dimensions = { width: 10, height: 15, length: 20 };
var keys = $.map( dimensions, function( value, key ) {
  return key;
}); 

结果:
["width", "height", "length"] 

案例七:
在处理函数中,通过返回 null 的方式来移除该元素。移除条件是该值小于 50。同时将未被移除的元素值减小 45。
$.map( [0, 1, 52, 97], function (a) {
  return (a > 50 ? a - 45 : null);
});

结果:
[7, 52] 

案例八:
通过在处理函数中返回数组的方式,在最终返回的结果数组中添加元素。
var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
  return [a - 45, index];
}); 

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






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值