偶然间碰到这样一个问题:

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

运行结果 [ 1, NaN, NaN ] ,而不是[ 1, 2, 3 ]. 但是单独拿出来转换又可以。

console.log(parseInt(["1"]));  //
console.log(parseInt(["2"])); //
console.log(parseInt(["3"])); //

下面我们从parseInt()方法和map()方法进行分析找出原因。

parseInt()方法分析

parseInt(s,radix)解析一个字符串,并返回一个整数。

  s:表示字符串

  radix:表示其它进制转十进制的基数,范围在2~36,不在这个范围的返回NaN。该参数可以省略或为0,这种情况会根据字符串的开头来判断基数,而且字符串string中的数字不能大于radix才能正确返回数字结果值。

当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。具体规则如下:

  1. 如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。

  2. 如果 string 以 0 开头,版本低于ECMAScript 5的,基数为8。版本为ECMAScript 5的,基数为10。

  3. 如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。

map 方法分析

语法:对数组的每个元素调用定义的回调函数并返回包含结果的数组。

array1.map(callbackfn[, thisArg])

map方法的第一个参数是一个回调函数,继续分析回调函数的语法

function callbackfn(value, index, array1)

回调函数接收的三个参数分别为:数组的值,值对应的索引,原数组。

为什么 ["1","2","3"].map(parseInt) 却返回 [1,NaN,NaN]? 继续向下分析。。。

  parseInt 需要两个参数 (val, radix) ,而它作为map的回调函数,map传递给了它三个参数 (value, index, array)。

如果想让 parseInt(string, radix) 返回 NaN,有两种情况:

  1. 第一个参数不能转换成数字。

  2. 第二个参数不在 2 到 36 之间。

我们传入的参数都能转换成数字,所以只能是第二种可能。

function parseInt(str, radix) {
return str+'-'+radix;
};
var a=["1", "2", "3"];
console.log(a.map(parseInt)); //["1-0","2-1","3-2"]

map 函数将数组的值 value 传递给了 parseInt 的第一个参数,将数组的索引传递给了第二个参数。 第三个参数呢?我们再加一个参数。

a = ["1","2", "3"]
var parseInt = function(string, radix, obj) {
return string + "-" + radix + "-" + obj;
}; console.log(a.map(parseInt)); //[ '1-0-1,2,3', '2-1-1,2,3', '3-2-1,2,3' ]

可以看出,map 确实为 parseInt 传递了三个参数 数组的值,值对应的索引,原数组。

可以看出,map的回调函数的参数index索引值作了parseInt的基数radix,索引index的起始值从0开始。

得出,正是由于map的回调函数的参数index索引值作了parseInt的基数radix,导致出现超范围的radix赋值和不合法的进制解析,才会返回NaN。

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

[0]=parseInt("1",0);//十进制1

[1]=parseInt("2",1);//radix不在2~36的返回NaN

[2]=parseInt("3",2);//二进制数没有3,只有0 1 ,所以NaN 

参考:为什么 ["1", "2", "3"].map(parseInt) 返回 [1,NaN,NaN]?

map.(parseInt)方法详解的更多相关文章

  1. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  2. (转)Spring JdbcTemplate 方法详解

    Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...

  3. JAVA 注解的几大作用及使用方法详解

    JAVA 注解的几大作用及使用方法详解 (2013-01-22 15:13:04) 转载▼ 标签: java 注解 杂谈 分类: Java java 注解,从名字上看是注释,解释.但功能却不仅仅是注释 ...

  4. Java构造和解析Json数据的两种方法详解二

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...

  5. Clone使用方法详解【转载】

    博客引用地址:Clone使用方法详解 Clone使用方法详解   java“指针”       Java语言的一个优点就是取消了指针的概念,但也导致了许多程序员在编程中常常忽略了对象与引用的区别,本文 ...

  6. integer与int区别以及integer.values()方法详解

    声明:本文为博主转载文章,原文地址见文末. 知识点1:integer和int的区别 /* * int是java提供的8种原始数据类型之一.Java为每个原始类型提供了封装类,Integer是java为 ...

  7. Java中的equals和hashCode方法详解

    Java中的equals和hashCode方法详解  转自 https://www.cnblogs.com/crazylqy/category/655181.html 参考:http://blog.c ...

  8. (7)Java数据结构--集合map,set,list详解

    MAP,SET,LIST,等JAVA中集合解析(了解) - clam_clam的专栏 - CSDN博---有颜色, http://blog.csdn.net/clam_clam/article/det ...

  9. MP实战系列(十二)之封装方法详解(续二)

    继续MP实战系列(十一)之封装方法详解(续一)这篇文章之后. 此次要讲的是关于查询. 查询是用的比较多的,查询很重要,好的查询,加上索引如鱼得水,不好的查询加再多索引也是无济于事. 1.selectB ...

随机推荐

  1. Linux下c开发 之 线程通信

    Linux下c开发 之 线程通信 1.Linux“线程” 进程与线程之间是有区别的,不过Linux内核只提供了轻量进程的支持,未实现线程模型.Linux是一种“多进程单线程”的操作系统.Linux本身 ...

  2. java-学习网站推荐

    技术博客: http://c.biancheng.net/view/1390.html (设计模式等等应有尽有,最全教程,强烈推荐!!!) hutool:http://hutool.mydoc.io/ ...

  3. <每日一题>题目13:列表的简单问题

    ''' 分析: python赋值是通过指针来进行的. 很显然第一.三.四次调用都指向同一个列表,并未完成清空, 第二次调用只是指向了另一个列表,也未完成清空,很显然结果是累计的 结果: [0, 1] ...

  4. 基于baseline、svd和stochastic gradient descent的个性化推荐系统

    文章主要介绍的是koren 08年发的论文[1],  2.3部分内容(其余部分会陆续补充上来).koren论文中用到netflix 数据集, 过于大, 在普通的pc机上运行时间很长很长.考虑到写文章目 ...

  5. Ubuntu安装QQ、微信、微信开发者工具、搜狗输入法

    wine 待补充……

  6. Android SDK上手指南:示例项目

    Android SDK上手指南:示例项目 2013-12-26 15:40 核子可乐译 51CTO 字号:T | T Android SDK示例项目中的应用能够执行种种功能,例如各类用户界面元素.数据 ...

  7. springcloud 与分布式系统(转载)

    原地址:http://blog.csdn.net/neosmith/article/details/51919038 本文不是讲解如何使用spring Cloud的教程,而是探讨Spring Clou ...

  8. 在windows系统和linux系统中查询IP地址命令的不同

    在linux和windows系统上查询IP地址的命令是不一样的.         在linux中的命令行模式下,输入ifconfig即可查询到IP.而在windows系统下要查询IP地址需要先打开do ...

  9. POJ 3122 Pie (贪心+二分)

    My birthday is coming up and traditionally I'm serving pie. Not just one pie, no, I have a number N ...

  10. 跟我一起了解koa(三)

    跟我一起了解koa中间件 一.是 什么是 Koa 的中间件 通俗的讲: :中间件就是匹配路由之前或者匹配路由完成做的一系列的操作,我们就可以 把它叫做中间件. 在 在express件 中间件( (Mi ...