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

　　elems　　　Array/Object类型 指定的需要处理的数组或对象。

　　callback　　遍历时执行的回调函数

　　arg　　　　参数，执行回调函数时传入的参数

callback函数执行时可以带两个参数，分别是遍历时对应的值和它的索引(对象来说则是键名)，如果有返回值，则将返回值拼凑为一个数组

$.fn.map()返回值是一个jQuery对象，它也是调用$.map()来实现的，返回的数组最后又调用pushStack创建一个jQuery对象而已，如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>

</head>

<body>

    <p id="p1">文本1</p>

    <p id="p2">文本2</p>

    <h1 id="h1">标题1</h1>

    <h1 id="h2">标题2</h1>

    <script>

        var arr=[11,12,13,14];

        var a =$.map(arr,function(element,index){return index;});

        console.log(a);                         //输出:Array [ 0, 1, 2, 3 ]

        var b =$.map([p1,p2,h1,h2],function(elem,i){

            console.log(elem,i)                 //分别输出:<p id="p1">(这是节点的引用) 0、<p id="p1"> 1、<h1 id="h1"> 2、<h1 id="h2"> 3

            return elem.parentNode;

        })

        console.log(b)                          //输出:Array [ body, body, body, body ]

        var c = $('p').map(function(i,elem){return elem.parentNode});

        console.log(c.length)                   //输出:2

        console.log(c[0]===c[1])                //输出:true

        console.log(c[1]===document.body)           //输出:true

    </script>

</body>

</html>

源码分析

writer by:大沙漠 QQ:22969969

和$.each()一样，$.map()也是通过$.extend()挂载到$.fn上的，如下:

  map: function( elems, callback, arg ) {       //对数组中的每个元素或对象的每个属性调用一个回调函数，并将回调函数的返回值放入一个新的数组

    var value, key, ret = [],                           //ret存储最后的结果

      i = 0,

      length = elems.length,

      // jquery objects are treated as arrays

      isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;      //isArray表示参数elems是否是数组

    // Go through the array, translating each of the items to their

    if ( isArray ) {                                    //对于数组或类数组对象，则通过for 循环遍历下标，

      for ( ; i < length; i++ ) {

        value = callback( elems[ i ], i, arg );           //执行callback函数，参数分别是当前Object,当前Object的次序和arg

        if ( value != null ) {                            //如果回调函数的返回值不是null 和undefined，则把返回值放入结果集ret。

          ret[ ret.length ] = value;

        }

      }

    // Go through every key on the object,

    } else {                                            //对于对象，则通过for-in 循环遍历

      for ( key in elems ) {

        value = callback( elems[ key ], key, arg );

        if ( value != null ) {

          ret[ ret.length ] = value;

        }

      }

    }

    // Flatten any nested arrays

    return ret.concat.apply( [], ret );               //调用方法concat()将ret转换为一个数组，并返回

  },

对于$.fn.map()来说，它是调用$.map来实现的，如下:

  map: function( callback ) {

    return this.pushStack( jQuery.map(this, function( elem, i ) {     //内部通过静态方法jQuery.map()和原型方法.pushStack()实现，

      return callback.call( elem, i, elem );

    }));

  },

pushStack之前已经介绍过了，就是创建一个新的jQuery对象而已，我们可以指定其中的DOM元素和selector属性。

jQuery 源码分析(五) map函数 $.map和$.fn.map函数 详解的更多相关文章

  1. jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...

  2. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  3. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  4. Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解

    双大括号会将数据解释为普通文本,而非 HTML 代码.为了输出真正的 HTML,你需要使用 v-html 指令,例如: <!DOCTYPE html> <html lang=&quo ...

  5. Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解

    先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...

  6. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  7. jquery源码解析：attr，prop，attrHooks，propHooks详解

    我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来 ...

  8. jquery源码解析：proxy，access，swap，isArraylike详解

    jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的. jQuery.extend({ ...... guid: 1, //唯一标识符 ...

  9. jquery源码分析(五)——Deferred 延迟对象

    javascript的异步编程 为什么要使用异步编程? JS是单线程语言,就简单性而言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些 ...

随机推荐

  1. Nginx之前后端分离（入门）

    几个月前,公司架构优化,首先就是前后端分离. 所谓前后端分离,就是在传统的前后端代码都在一个项目里的基础上,将前后端代码抽离,把前端代码从后端项目了分离出来,前后端开发人员各自在自己的项目里开发. 为 ...

  2. pandas.read_sql_query()读取数据库数据用chunksize的坑

    最近一项工作需要读取数据库中1500万条数据,考虑到数据量太大,不方便直接一次性读取,不然会内存爆炸.想到用pandas.read_sql_query()里有一个chunksize可以分批返回chun ...

  3. GO与PHP的AES交互,key长度问题

    今天在使用go与php的AES加解密交互中,一直有个问题那就是在go中加密后,在php端始终都是无法解密,经过排查最后发现是加密key长度引起的问题, 这里简单记录下. go的AES使用的是第三方的库 ...

  4. Jquery补充及插件

    此篇为jQuery补充的一些知识点,详细资料请看另一篇博客,地址:https://www.cnblogs.com/chenyanbin/p/10454503.html 一.jQuery中提供的两个函数 ...

  5. 实验吧简单的SQL注入1，简单的SQL注入

    接上面一篇博客. 实验吧简单的sql注入1 题目连接   http://ctf5.shiyanbar.com/423/web/ 同样,直接输入 1加个但引号,结果下面有返回错误,            ...

  6. 剑指offer 14：调整数组顺序使奇数位于偶数前边

    题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 解题思路 题目中要求 ...

  7. CODING 告诉你硅谷项目经理的项目管理之道

    写在前面 优秀的项目管理者是怎么工作的,如何把一个研发团队的绩效激发到最大? 我们精心挑选了几篇硅谷科技公司研发管理者的 README 进行翻译. README 主要用来向团队成员展示项目管理者的工作 ...

  8. rocksdb和leveldb性能比较——写性能

    前面学习了一下rocksdb,这个db是对leveldb的一个改进,是基于leveldb1.5的版本上的改进,而且leveldb1.5以后也在不断的优化,下面从写入性能对两者进行对比. 前言 比较的l ...

  9. 传入一个Map<String,Long> 返回它按value排序后的结果

    //传入一个Map<String,Long> 返回它按value排序后的结果 sort为正序还是倒序(-1倒序),size为要几条数据 private static Map<Stri ...

  10. JavaScript判断是否是数字

    JavaScript判断是否是数字的几种方法 isNaN() /** * 判断是否是数字 */ function isNumber(value){ if(isNaN(value)){ return f ...