jQuery中map和each的用法(jquery-1.12.1.js)
来源:互联网 发布:mac如何卸载java 编辑:程序博客网 时间:2024/06/07 02:07
无意间看到一道奇葩的面试题:(大家猜猜运行结果)
["1","2","3"].map(parseInt); //[1, NaN, NaN]
看到运行结果运行结果,你是怎么想的呢?猜对了么?反正我是没有!还是js小菜鸟的我,看傻眼了,这是什么鬼?结果不应该是[1, 2, 3]么?百思不得其解,为了弄明白到底怎么回事,查了不少资料,现将探索过程和大家分享下:
(1)原生javascript有map方法么?不是jQuery才有么?
查阅资料才知道,map方法是一个JavaScript扩展到ECMA-262标准中的新方法,最新的版本是:Standard ECMA-262 6th Edition / June 2015 ,实际写程序测试了下,在Google、Firefox和IE9及以上都能运行!
[1, 3, 5].map(function(num,index){return num*num});//[1, 9, 25]
注意:在IE8及以下不支持map方法,报错信息:Object doesn’t support property or method ‘map’.
IE8及以下使用map的解决方案:(先在Array的prototype中定义,然后就可以正常使用了)
if (!Array.prototype.map){ Array.prototype.map = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(len); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) res[i] = fun.call(thisp, this[i], i, this); } return res; };}
(2)jQuery中map方法的使用方法
var arr1 = $(["2","3","4"]).map(function(index,num){return num*num});var arr2 = $.map(["2","3","4"],function(num,index){return num*num});console.log(arr1);//[4, 9, 16]console.log(arr2);//[4, 9, 16]
这两种方法都可以,看到区别了么?回调函数中的参数顺序不一样!为毛呢?不是很理解,是程序BUG么?jQuery中map方法与原生方法不同的是,支持 IE6及以上!兼容性已经处理好了。
(3)jQuery中map方法和each使用方法长得好像一样?
$(["我","想","静静"]).each(function(index,name){ console.log(index+":"+name);});$.each(["我","想","静静"],function(index,name){ console.log(index+":"+name);});//0:我 1:想 2:静静
有木有感觉map方法和each方法长的一样呢?不同的是each方法回调函数参数的顺序在两种用法中一样,为毛map方法中的两种用法形参顺序就不一样呢?有没有掉到坑里的feeling?还有其他差别么?
$.each({"姓名":'范冰冰',"身材":"大A4腰","风格":"挺爷们"},function(key,val){ console.log(key+":"+val);});//姓名:范冰冰 身材:大A4腰 风格:挺爷们
哦,原来each还可以遍历对象,有木有觉得很爽呢?是不是感觉each遍历比for循环的遍历优雅多了!如果遍历的对象成员需要发送不同的ajax,使用for循环的话不行哦!使用each循环就可以,有木有研究过的朋友呢?大家可以试下。
(4)结语及遗留问题
通过上面案例和描述想必大家对map和each的用法及区别有了一些了解,但是本文开始位置的面试题貌似还没有解决。再来看个案例:
["4","9","16"].map(Math.sqrt);//[2, 3, 4]["2","3","5"].map(Number);//[2, 3, 5]["2abc"].map(parseInt);//[2]["2abc","3"].map(parseInt);//[2, NaN]["2","3","4"].map(parseInt);//[2, NaN, NaN]
亲们,发现问题了么?看来不是map的问题,而是parseInt方法的问题!再来看看奇葩的案例:
parseInt("2x"); //2parseInt("0x"); //NaNparseInt(0x12); //18parseInt("0x0f"); //15parseInt("0X0C"); //12parseInt("07",8); //7parseInt("08",8); //0parseInt("09",8); //0parseInt("09",10); //9parseInt("011",10); //11parseInt("011",2); //3parseInt(0.0000001); //1parseInt(0.000001); //0parseInt("2147 483647", 10); //返回 2147
天啊,原来parseInt如此可怕,一会儿八进制,一会儿十六进制,还会自动转换,套路很深啊,晕死!真是难以搞懂啊!这个问题还是还是留几个相关链接吧,想搞清的宝宝进去看下。
js中parseInt函数浅谈
parseInt 百科
遗留的问题:
["1","2","3"].map(parseInt); //[1, NaN, NaN]
这到底是个什么鬼?值得高手指点
第一次写技术博客,欢迎大家多多指教和吐槽,也希望高手能指点迷津!谢谢
也希望自己再接再厉,坚持到底。
- jQuery中map和each的用法(jquery-1.12.1.js)
- jquery中$.each()与$().each()的用法和区别
- jQuery内置函数map和each的用法
- jQuery内置函数map和each的用法
- jquery中each和js中eval用法
- jQuery中each的用法
- jQuery中each的用法
- jQuery中map()方法和each()方法
- jquery的$(#id).each()和jquery.each()的用法区别
- Jquery中each用法
- jquery中each用法
- jquery中each用法
- jquery中each用法
- jquery中each用法
- jQuery中each跟map的区别
- 原生JS forEach()和map()遍历的区别以及兼容写法,jQuery $.each()和$.map()遍历
- jquery each的用法
- jquery的each用法
- viewpagerindector
- Json的JSONArray和JSONObject
- java NIO&IO
- 第三方的httputils请求数据和xml的pull解析
- 【Unity】新的UI系统技巧
- jQuery中map和each的用法(jquery-1.12.1.js)
- 软中断,tasklet和工作队列的区别与联系
- pushdo
- 强大的矩阵奇异值分解(SVD)及其应用
- 设计模式与架构的核心概念乃是抽象
- 用url请求数据并用pull解析
- 神经网络优化算法选择
- imageview 自定义
- Android系统中自定义按键的短按、双击、长按事件