请注意他们不是同一个函数。前者是jQuery对象的实例方法(即$.fn.map),后者是一个仅仅挂在jQuery对象下的静态方法(即$.map)。

他们用法的异同:

map()的返回值是包裹了一个Array的jQuery对象。如果要获取其中真正的Array,可以用get()方法。即链式写法:

var arr = $('td').map(fn1).get();
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true

他们各自传递的function--已在图中用fn1,fn2来标识--的用法也有很大不同,可以总结到下表:

可以看到在fn1的内部,this的值与第二个参数是相等的:

$('td').map(function(index, td){
console.log(td === this); // true
});

而fn2内的this值则是全局对象window:

$.map([1,2],function(){
console.log(this === window); // true
});

$.map()方法在传递对象的时候的用法:

var obj = {
name : 'luck',
age : 20,
sex : 'male'
};
var values = $.map(obj, function(value ,key){
return value;
});
console.log(values); // ["luck", 20, "male"]
var keys = $.map(obj, function(value, key){
return key;
});
console.log(keys); // ["name", "age", "sex"]

而$.map()的设计用法则是创造一个新的array对象:

var arr = [1, 2, 3, 4, 5];
var newarr = $.map(arr, function(value, key){
return value * 2;
});
console.log(newarr); // [2, 4, 6, 8, 10]

jQuery的map()与jQuery.map()总结的更多相关文章

  1. 学习JQuery中文文档之map()函数和get()函数

    今天学到一个新的函数map(). map(callback) 官方概述: 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式 ...

  2. js原生forEach、map与jquery的each、$.each的区别

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  4. 十.jQuery源码分析之.map()

    763行:三个参数. elems:待遍历的数组或对象. callback:回调函数,会在数组的每个元素或对象的每个属性上执行.执行时传入两个参数:数组元素,元素下标;或属性名,属性值. arg:仅限于 ...

  5. jQuery 源码分析(五) map函数 $.map和$.fn.map函数 详解

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

  6. jQuery数组($.grep,$.each,$.inArray,$.map)处理函数详解

    1.jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] ) 描述: 查找满足过滤函数的数组元素.原始数组不受影 ...

  7. 模拟jquery实现each方法和map方法

    ********************each方法********************** function each( obj, cbk ) { /* * 实现思路: * 1.首先却分传入进来 ...

  8. jquery中的 ajax 以及map遍历

    1.语法 $.ajax{ type:'get',//类型 有get post url:'',//路径 data:{name:$('#ma').val(),nameq:$('#maq').val()}, ...

  9. jQuery - 1.简单的JQuery

    1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert(&q ...

  10. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

随机推荐

  1. NTOPNG,用来平时优化网站性能,用处大的

    最近考察一下NTOPNG和NGX-REQ模块,看哪个对网站优化性能用户更大... 参考URL: http://www.68idc.cn/help/jiabenmake/qita/20150109164 ...

  2. scheme lambda表达式 形参

     lambda表达式 (Lambda (arg1 …) exp1 exp2)从演算来看,(let ((var value) …) exp1 exp2…) == ((lambda (var …) exp ...

  3. 【转】Android的权限permission

    原文网址:http://blog.csdn.net/nei504293736/article/details/6974599 <uses-permission android:name=&quo ...

  4. oracle索引总结

    简介 1.说明 1)索引是数据库对象之一,用于加快数据的检索,类似于书籍的索引.在数据库中索引可以减少数据库程序查询结果时需要读取的数据量,类似于在书籍中我们利用索引可以不用翻阅整本书即可找到想要的信 ...

  5. 关于if语句后面的花括号

    两种写法.之前我比较2.总喜欢写了if语句后 不带 花括号.总感觉这样节省空间. 最后偶然看到google推荐的 才 顿悟到 这样虽然可以 但可读性不太好. 参考:https://source.and ...

  6. CSU 1111 有三户人家共拥有一座花园,每户人家的太太均需帮忙整理花园。A 太太工作了5 天,B 太太则工作了4 天,才将花园整理完毕。C 太太因为正身怀六甲无法加入她们的行动,所以就打算出90元钱

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82974#problem/D 解题思路:本题的意思就是三位均出90,然后AB按做 ...

  7. 聚类算法:K均值、凝聚层次聚类和DBSCAN

    聚类分析就仅根据在数据中发现的描述对象及其关系的信息,将数据对象分组(簇).其目标是,组内的对象相互之间是相似的,而不同组中的对象是不同的.组内相似性越大,组间差别越大,聚类就越好. 先介绍下聚类的不 ...

  8. 在mac上利用homebrew安装软件

    在mac经常需要安装一些软件,你可以通过app store下载,或者可以通过浏览袭搜索下载.这里介绍通过homebrew安装一些软件,它会自动为你下载一些软件的相关依赖,免去安装的烦恼. 首先我们需要 ...

  9. driver.startActivity 启动app出现 An unknown server-side error occurred while processing the command

    driver.startActivity("com.xxx.module.xxx", "com.xxx.module.xxx.hibox.ui.entry.EntryAc ...

  10. [置顶] hdu 1890 伸展树区间翻转

    题意: 给你n个数,每次先输出第i大的数的位置(如果有多个,选下标小的那个),然后每次将第i个位置到第i大的数所在位置之间的数进行翻转. 思路:输入的数组可能有多个相同的值,我们可以进行两次排序把数组 ...