jQuery的map()与jQuery.map()总结

请注意他们不是同一个函数。前者是jQuery对象的实例方法(即$.fn.map),后者是一个仅仅挂在jQuery对象下的静态方法(即$.map)。

他们用法的异同:
a
map()的返回值是包裹了一个Array的jQuery对象。如果要获取其中真正的Array,可以用get()方法。即链式写法:

var arr = $('td').map(fn1).get();
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true

他们各自传递的function--已在图中用fn1,fn2来标识--的用法也有很大不同,可以总结到下表:
b
可以看到在fn1的内部,this的值与第二个参数是相等的:

$('td').map(function(index, td){
  console.log(td === this); // true
});

而fn2内的this值则是全局对象window:

$.map([1,2],function(){
  console.log(this === window); // true
});

$.map()方法在传递对象的时候的用法:

var obj = {
  name : 'luck',
  age : 20,
  sex : 'male'
};
var values = $.map(obj, function(value ,key){
  return value;
});
console.log(values); // ["luck", 20, "male"]
var keys = $.map(obj, function(value, key){
  return key;
});
console.log(keys); // ["name", "age", "sex"]

而$.map()的设计用法则是创造一个新的array对象:

var arr = [1, 2, 3, 4, 5];
var newarr = $.map(arr, function(value, key){
  return value * 2;
});
console.log(newarr); // [2, 4, 6, 8, 10]

 

posted on 2015-08-16 18:25  知春里  阅读(3966)  评论(1编辑  收藏  举报