$.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. 安装 Java

    1.rpm下载地址 https://download.oracle.com/otn/java/jdk/7u79-b15/jdk-7u79-linux-x64.rpm?AuthParam=1570520 ...

  2. Elasticsearch Query DSL 语言介绍

    目录 0. 引言 1. 组合查询 2. 全文搜索 2.1 Match 2.2 Match Phase 2.3 Multi Match 2.4 Query String 2.5 Simple Query ...

  3. Redis系列---redis简介01

    一. 本章我们将用简短的几句话来帮助你快速的了解什么是redis,初学者不必深究 1 Redis简介 Remote Dictionary Server(Redis)是一个开源的使用ANSI C语言编写 ...

  4. MySQL 示例数据库

    微软 SQL Server 自带了一些示例数据库,可用于练习和测试.也可作为自己数据库设计时的参考.这些示例数据库开源在了 GitHub,可在 Microsoft/sql-server-samples ...

  5. java基础(17):包装类、System、Math、Arrays、大数据运算

    1. 基本类型包装类 大家回想下,在第三篇文章中我们学习Java中的基本数据类型时,说Java中有8种基本的数据类型,可是这些数据是基本数据,想对其进行复杂操作,变的很难.怎么办呢? 1.1 基本类型 ...

  6. Java正则表达式详细解析

    元字符 正则表达式使用一些特定的元字符来检索.匹配和替换符合规则的字符串 元字符:普通字符.标准字符.限定字符(量词).定位字符(边界字符) 正则表达式引擎 正则表达式是一个用正则符号写出来的公式 程 ...

  7. DesignPattern系列__09设计模式概述

    设计模式介绍 设计模式是程序员在面对同类软件工程设计问题所总结出来的有用的经验,模式不是代码,而是某类问题的通用解决方案, 设计模(Design pattern)代表了最佳的实践.这些解决方案是众多软 ...

  8. [20190929]bash使用bc计算的相关问题.txt

    [20190929]bash使用bc计算的相关问题.txt --//快放假没什么事情,使用bash写一些小程序,转化number到oracle number编码,使用bc计算功能,发现一些小问题--/ ...

  9. hisi mmz模块驱动讲解

    一.概述 如图所示,在海思平台上将内存分为两个部分:os内存和mmz内存.os内存指:由linux操作系统管理的内存:mmz内存:由mmz驱动模块进行管理供媒体业务单独使用的内存,在驱动加载时可以指定 ...

  10. hi3559v100 sdk中双系统AMP架构的初步了解

    hi3559v100是海思推出的camera soc处理器.采用的是双核处理器.一个是a7,运行的linux3.18内核.一个是a17使用的是huaweiliteos操作系统,Hi3559V100 系 ...