$.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. (四)初识NumPy(函数和图像的数组表示)

    本章节主要介绍NumPy中的三个主要的函数,分别是随机函数.统计函数和梯度函数,以及一个较经典的用数组来表示图像的栗子!,希望大家能有新的收货,共同进步! 一.np.random的随机函数(1) ra ...

  2. PHP echo一个对象报语法错误，为什么？

    为什么直接echo一个对象就会报语法错误,而如果这个对象实现了__toString方法后就可以直接输出呢? 原因是echo本来可以打印一个对象,而且也实现了这个接口,但是PHP对其做了个限制,只有实现 ...

  3. Visual Studio 基础设置

    重置开发环境 菜单栏中选择“工具”/“导入和导出设置”/“重置所有设置” 设置行号 菜单栏中选择“工具”/“选项”/“文本编辑器”/“行号” 全屏显示 菜单栏中选择“视图”/“全屏显示” 为程序设置版 ...

  4. java基础(24):转换流、缓冲流

    1. 转换流 在学习字符流(FileReader.FileWriter)的时候,其中说如果需要指定编码和缓冲区大小时,可以在字节流的基础上,构造一个InputStreamReader或者OutputS ...

  5. RandomAccessFile(),读写文件数据的API,以及复制文件操作

    package seday03;import java.io.File;import java.io.RandomAccessFile; import java.io.IOException; /** ...

  6. map元素area热区坐标自适应窗口大小

    业务需求:点击图片热区跳转到不同的链接地址,同时要自适应窗口尺寸的变化. 问题:热区坐标点不会随着窗口调整变化 解决思路:获取初始的坐标点与图片宽高的比例,然后用比例乘以调整后的窗口宽高,就获得了新的 ...

  7. JavaWeb之动态代理解决request请求编码问题

    动态代理解决编码问题 1.设计模式 出现原因:软件开发过程中,遇到相似问题,将问题的解决方法抽取模型(套路) 常见设计模式:单例,工厂,适配器,装饰者,动态代理. 2.装饰者模式简单介绍 谷歌汽车开发 ...

  8. 裸奔的支付X聊天，你还敢用吗？

    - 语音消息 使用HTTP明文传输,没有任何加密措施,使用域名为up-mayi.django.t.taobao.com,从报文中可以看出,语音消息是以文件形式在网络中传输的,下图为一次语音的发送传输过 ...

  9. 安卓开发笔记（三十五）:Cardview的简单使用

    首先上图: 我们可以看到上面这个我所编写的界面上,战狼这一个模块则使用了cardview控件,下面我们来看看它是怎么使用的:这里是cardview在线性布局下的的布局代码: <android.s ...

  10. 【LeetCode】70. 爬楼梯

    爬楼梯 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意: 给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解 ...