请注意他们不是同一个函数。前者是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. PBOC规范研究

    一.ISO14443协议和PBOC关于CID的约定 看过协议的人其实都明白,RATS命令中参数字节的低半字节是CID,期中,CID不能为15. ISO14443协议中要求当RATS命令的CID等于0时 ...

  2. Android 介绍spydroid每个包的大体功能

    看了接近一周的spydroid源代码,对spydroid这个开源项目有了一定的认识.也许有些理解不一定正确,给后来者一点启示.也是自己对rtsp协议,rtp协议的总结. 在windows下,如果安装了 ...

  3. 【宽搜】XMU 1039 Treausure

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1039 题目大意: 给定n,m(1<=n,m<=1000),一张n*m的地图 ...

  4. 【动态规划】HDU 1081 & XMU 1031 To the Max

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1081 http://acm.xmu.edu.cn/JudgeOnline/problem.php?i ...

  5. HDOJ(HDU) 1898 Sempr == The Best Problem Solver?(水题、、、)

    Problem Description As is known to all, Sempr(Liangjing Wang) had solved more than 1400 problems on ...

  6. Selenium索引

    Common Selenium各种工具比较 Selenium firefox 版本问题 Selenium IDE Selenium IDE整理 WebDriver Java 版本 Selenium开始 ...

  7. Controlling How NSThread and NSRunLoop Exit

    http://shaheengandhi.com/controlling-thread-exit/ While most concurrency can be dealt with by using ...

  8. F - Power Network - poj 1459(简单最大流)

    题目大意:题目说了一大堆,其实都是废话......让人有些不知所云,其实就是给了一些电厂,和一些消费点,然后里面有一些路线什么的,求出消费点可以最多消费的电量是多少. 输入大意: 分析:懂了题意就是一 ...

  9. [原创]python MySQLdb在windows环境下的安装、出错问题以及解决办法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 问题:windows下安装MySQLdb的方法 解析:python没有php那种集成环境,比如wamp那种集成软件直接把所有需要的东西全部一次性搭 ...

  10. PHP读取文件内容的三种方式

    <?php // 第一种读取方式 header("content-type:text/html;charset=utf-8"); // 文件路径 $fileA = " ...