jQuery中map和each的用法（jquery-1.12.1.js）

无意间看到一道奇葩的面试题：（大家猜猜运行结果）

["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"); //2
parseInt("0x"); //NaN
parseInt(0x12); //18
parseInt("0x0f"); //15
parseInt("0X0C"); //12
parseInt("07",8); //7
parseInt("08",8); //0
parseInt("09",8); //0
parseInt("09",10); //9
parseInt("011",10); //11
parseInt("011",2); //3
parseInt(0.0000001); //1
parseInt(0.000001); //0
parseInt("2147 483647", 10); //返回 2147

天啊，原来parseInt如此可怕，一会儿八进制，一会儿十六进制，还会自动转换,套路很深啊，晕死！真是难以搞懂啊！这个问题还是还是留几个相关链接吧，想搞清的宝宝进去看下。
js中parseInt函数浅谈
 parseInt 百科

遗留的问题:

["1","2","3"].map(parseInt);  //[1, NaN, NaN]

这到底是个什么鬼？值得高手指点
第一次写技术博客，欢迎大家多多指教和吐槽，也希望高手能指点迷津！谢谢
也希望自己再接再厉，坚持到底。

jQuery中map和each的用法（jquery-1.12.1.js）

猜你喜欢