经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery 源码分析(五) map函数 $.map和$.fn.map函数 详解
来源:cnblogs  作者:大沙漠  时间:2019/8/29 8:48:18  对本文有异议

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

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

  callback  遍历时执行的回调函数

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <p id="p1">文本1</p>
  10. <p id="p2">文本2</p>
  11. <h1 id="h1">标题1</h1>
  12. <h1 id="h2">标题2</h1>
  13. <script>
  14. var arr=[11,12,13,14];
  15. var a =$.map(arr,function(element,index){return index;});
  16. console.log(a); //输出:Array [ 0, 1, 2, 3 ]
  17.  
  18. var b =$.map([p1,p2,h1,h2],function(elem,i){
  19. console.log(elem,i) //分别输出:<p id="p1">(这是节点的引用) 0、<p id="p1"> 1、<h1 id="h1"> 2、<h1 id="h2"> 3
  20. return elem.parentNode;
  21. })
  22. console.log(b) //输出:Array [ body, body, body, body ]
  23.  
  24. var c = $('p').map(function(i,elem){return elem.parentNode});
  25. console.log(c.length) //输出:2
  26. console.log(c[0]===c[1]) //输出:true
  27. console.log(c[1]===document.body) //输出:true
  28. </script>
  29. </body>
  30. </html>

 

 源码分析


writer by:大沙漠 QQ:22969969

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

  1. map: function( elems, callback, arg ) { //对数组中的每个元素或对象的每个属性调用一个回调函数,并将回调函数的返回值放入一个新的数组
  2. var value, key, ret = [], //ret存储最后的结果
  3. i = 0,
  4. length = elems.length,
  5. // jquery objects are treated as arrays
  6. isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ; //isArray表示参数elems是否是数组
  7.  
  8. // Go through the array, translating each of the items to their
  9. if ( isArray ) { //对于数组或类数组对象,则通过for 循环遍历下标,
  10. for ( ; i < length; i++ ) {
  11. value = callback( elems[ i ], i, arg ); //执行callback函数,参数分别是当前Object,当前Object的次序和arg
  12.  
  13. if ( value != null ) { //如果回调函数的返回值不是null 和undefined,则把返回值放入结果集ret。
  14. ret[ ret.length ] = value;
  15. }
  16. }
  17. // Go through every key on the object,
  18. } else { //对于对象,则通过for-in 循环遍历
  19. for ( key in elems ) {
  20. value = callback( elems[ key ], key, arg );
  21. if ( value != null ) {
  22. ret[ ret.length ] = value;
  23. }
  24. }
  25. }
  26. // Flatten any nested arrays
  27. return ret.concat.apply( [], ret ); //调用方法concat()将ret转换为一个数组,并返回
  28. },

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

  1. map: function( callback ) {
  2. return this.pushStack( jQuery.map(this, function( elem, i ) { //内部通过静态方法jQuery.map()和原型方法.pushStack()实现,
  3. return callback.call( elem, i, elem );
  4. }));
  5. },

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

原文链接:http://www.cnblogs.com/greatdesert/p/11401167.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号