请注意他们不是同一个函数。前者是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]

jQuery的map()与jQuery.map()总结的更多相关文章

  1. 学习JQuery中文文档之map()函数和get()函数

    今天学到一个新的函数map(). map(callback) 官方概述: 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式 ...

  2. js原生forEach、map与jquery的each、$.each的区别

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  4. 十.jQuery源码分析之.map()

    763行:三个参数. elems:待遍历的数组或对象. callback:回调函数,会在数组的每个元素或对象的每个属性上执行.执行时传入两个参数:数组元素,元素下标;或属性名,属性值. arg:仅限于 ...

  5. jQuery 源码分析(五) map函数 $.map和$.fn.map函数 详解

    $.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回,该函数有三个参数,如下: elems Array/Object类型 指定的需要处理的数组或 ...

  6. jQuery数组($.grep,$.each,$.inArray,$.map)处理函数详解

    1.jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] ) 描述: 查找满足过滤函数的数组元素.原始数组不受影 ...

  7. 模拟jquery实现each方法和map方法

    ********************each方法********************** function each( obj, cbk ) { /* * 实现思路: * 1.首先却分传入进来 ...

  8. jquery中的 ajax 以及map遍历

    1.语法 $.ajax{ type:'get',//类型 有get post url:'',//路径 data:{name:$('#ma').val(),nameq:$('#maq').val()}, ...

  9. jQuery - 1.简单的JQuery

    1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert(&q ...

  10. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

随机推荐

  1. Javascript的IE和Firefox兼容性汇编

    以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox 1. document.form.item 问题    (1)现有问题:        现有代码 ...

  2. poj1797 - Heavy Transportation(最大边,最短路变形spfa)

    题目大意: 给你以T, 代表T组测试数据,一个n代表有n个点, 一个m代表有m条边, 每条边有三个参数,a,b,c表示从a到b的这条路上最大的承受重量是c, 让你找出一条线路,要求出在这条线路上的最小 ...

  3. Java线程Dump分析工具--jstack【转载】

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack使 ...

  4. Google 2013 campus test-R1

    Reading Phone Number #include<iostream> #include<fstream> #include<vector> #includ ...

  5. HDU 3853 LOOPS

    题意:对于每一格,都可以往右走,原地不走,往下走,概率分别为a[i],b[i],c[i](每一个格子与其他格子的概率不一定相同).在R*C的棋盘上(输入数据保证不会走出棋盘),求从(0, 0)走到(R ...

  6. PS:改装店收的是友情价,包安装十五个毛主席。

    糟糠之妻下堂,娇俏公主上位--更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心         PS:改装店收的是友情价,包安装十五个毛主席.

  7. N - Optimal Milking - POJ 2112(二分图多重匹配+Floyd+二分搜索)

    题意:有K太挤奶机,C头奶牛,每个挤奶机每天只能为M头奶牛服务,下面给的K+C的矩阵,是形容相互之间的距离,求出来走最远的那头奶牛要走多远 分析:应该先使用floyd求出来点之间的最短路??(不晓得给 ...

  8. java中的接口和抽象类是什么?

    抽象类与接口的区别 abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的面向对象能力.abstract c ...

  9. java笔记13之成员变量与局部变量

    成员变量和局部变量的区别 1在类中的位置不同 局部变量:类的方法体内 成员变量:类的方法之外 2内存的不同位置 局部变量:在栈内存中 成员位置:在堆内存 3生命周期不同 局部变量:随着方法的调用而存在 ...

  10. Java笔记6之三目运算符

    /*    单目运算符:~3    双目运算符:3 + 4    三目运算符:        格式:比较表达式?表达式1:表达式2;                比较表达式:结果是一个boolean ...