jquery.map()方法的使用详解


Posted in Javascript onJuly 09, 2015

原型方法map跟each类似调用的是同名静态方法,只不过返回来的数据必须经过另一个原型方法pushStack方法处理之后才返回,源码如下:

map: function( callback ) {
    return this.pushStack( jQuery.map(this, function( elem, i ) {
      return callback.call( elem, i, elem );
    }));
  },

本文主要就是分析静态map方法至于pushStack在下一篇随笔里面分析;

首先了解下map的使用(手册内容)

$.map将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。

转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中。

参数
arrayOrObject,callbackArray/Object,FunctionV1.6
arrayOrObject:数组或者对象。

为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。

函数可返回任何值。

另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素。

如“a * a”代表“function(a){ return a * a; }”。

示例1:

//将原数组中每个元素加 4 转换为一个新数组。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n + 4;
});
//结果:
[4, 5, 6]

示例2:

//原数组中大于 0 的元素加 1 ,否则删除。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n > 0 ? n + 1 : null;
});
//结果:
[2, 3]

示例3:

//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组
//jQuery 代码:
$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});
//结果:
[0, 1, 1, 2, 2, 3]

可以看出map方法跟each方法类似通过循环每个对象或者数组的“项”执行回调函数来实现对数组或者对象的操作,但是这两个方法也有很多不同点

比如each()返回的是原来的数组,并不会新创建一个数组,而map则会创建新的数组,;each遍历是this指向当前数组或对象值,map则指向window,因为在源码中并不像each那样使用对象冒充;

例如:

var items = [1,2,3,4]; 
$.each(items, function() { 
alert('this is ' + this); 
}); 
var newItems = $.map(items, function(i) { 
return i + 1; 
}); 
// newItems is [2,3,4,5]
//使用each时,改变的还是原来的items数组,而使用map时,不改变items,只是新建一个新的数组。

var items = [0,1,2,3,4,5,6,7,8,9]; 
var itemsLessThanEqualFive = $.map(items, function(i) { 
// removes all items > 5 
if (i > 5) 
return null; 

return i; 
}); 
// itemsLessThanEqualFive = [0,1,2,3,4,5]

言归正传回到map源码

// arg is for internal usage only
  map: function( elems, callback, arg ) {
    var value, key, 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 ) ) ;

    // Go through the array, translating each of the items to their
    if ( isArray ) {
      for ( ; i < length; i++ ) {
        value = callback( elems[ i ], i, arg );

        if ( value != null ) {
          ret[ ret.length ] = value;
        }
      }

    // Go through every key on the object,
    } else {
      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 );
  },

首先还是声明几个变量为接下来的遍历做准备,其中jsArray变量用来简单区分对象和数组,这个布尔复合表达式比较长不过只要记住js运算符的有优先顺序就不难理解了,首先括号优先执行然后就是逻辑与》逻辑或》全等》赋值,然后就可以分析啦

首先圆括号里先计算然后结果加上 length !== undefined 、 typeof length === "number这两个必要条件最后的结果再跟elems instanceof jQuery进行逻辑或的运算,简单的说就是isArray为真的情况有:

1、elems instanceof jQuery  为true 换言之就是jquery对象

2、length !== undefined && typeof length === "number" 和  length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems )这三个至少成立一个

可以拆分为3个小情况

length是存在并且是数字而且待遍历的数组或者类数组等length属性大于0 length-1存在  这样就保证了是能遍历的,比如对于jquery对象  domList对象等

length是存在并且是数字而且length属性等于0  如果是0也没关系就是不会遍历

length是存在并且是数字而且待遍历对象是纯数组

满足这些条件之后开始根据isArray的结果分开遍历,对于“数组”采用for循环,对于对象采用for...in循环

// Go through the array, translating each of the items to their
    if ( isArray ) {
      for ( ; i < length; i++ ) {
        value = callback( elems[ i ], i, arg );

        if ( value != null ) {
          ret[ ret.length ] = value;
        }
      }

是数组或者类数组的时候直接把循环的每一项的值和指针以及arg参数传入回调函数中执行,arg参数是此方法内部使用的参数,跟each以及一些其他jquery方法很相似,只要在执行回调函数时不返回null就把执行返回的结果添加到新数组中,对象操作亦是如此直接略过

// Flatten any nested arrays
    return ret.concat.apply( [], ret );

最后将结果集扁平化,为什么有这一步呢?因为map是可以扩展数组的在前面第3个示例就是如此:

$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});

如果是这样使用的话得到的新数组是一个二维数组,所以必须降维

 ret.concat.apply( [], ret )等价于[].concat.apply([],ret)关键作用的是apply,因为apply的第二个参数把ret的数组分成多个参数传入给concat把二维数组转化为一维数组这个用法还是值得收藏的的

map方法简单分析完毕,能力有限错误之处望多多指正。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 #Javascript
javascript+ajax实现产品页面加载信息
Jul 09 #Javascript
浅谈JavaScript中null和undefined
Jul 09 #Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 #Javascript
JavaScript包装对象使用详解
Jul 09 #Javascript
jquery实现表单验证并阻止非法提交
Jul 09 #Javascript
jQuery实现tab选项卡效果的方法
Jul 08 #Javascript
You might like
PHP中for循环语句的几种变型
2007/03/16 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
js中的闭包实例展示
2018/11/01 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
Spy++的使用方法及下载教程
2021/01/29 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
校庆活动策划方案
2014/06/05 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014会计年终工作总结
2014/12/20 职场文书