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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
微信小程序云开发实现增删改查功能
May 17 Javascript
了解javascript中的Dom操作
May 27 Javascript
javascript中闭包closure的深入讲解
Mar 03 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
python条件和循环的使用方法
2013/11/01 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
对于Python中RawString的理解介绍
2016/07/07 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python模块导入的方法
2019/10/24 Python
python调用私有属性的方法总结
2020/07/24 Python
常用的10个Python实用小技巧
2020/08/10 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
台湾三立电视电商平台:电电购
2019/09/09 全球购物
Python如何定义一个函数
2015/09/01 面试题
自我鉴定思想方面
2013/10/07 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android