请注意他们不是同一个函数。前者是jQuery对象的实例方法(即$.fn.map
),后者是一个仅仅挂在jQuery对象下的静态方法(即$.map
)。
他们用法的异同:
map()的返回值是包裹了一个Array的jQuery对象。如果要获取其中真正的Array,可以用get()方法。即链式写法:
var arr = $('td').map(fn1).get();
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
他们各自传递的function--已在图中用fn1,fn2来标识--的用法也有很大不同,可以总结到下表:
可以看到在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]