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

["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. Error: Could not link: /usr/local/share/doc/homebrew

    mac 执行brew update 报错 Error: Could not link: /usr/local/share/doc/homebrew 更新brew,报错 Error: Could not ...

  2. 记一次log4j日志文件小事故

    最近散仙在做公司的一个跟搜索有关的数据分析项目,主要就是统计搜索的转化率,目的主要有以下几个: (1)通过数据分析挖掘,找出搜索业务在整个平台系统里的GMV里所占份额 (2)给公司的搜索算法调优,提供 ...

  3. 跟我一起安装vmware

    第一步查看我们的电脑配置 我是windows10,下面的方法是windows10来安装vmware 第二步双击下图文件 (1) 2)弹出如下图,点击下一步即可. (3)一直点击下一步(期间会同意,勾选 ...

  4. 单例模式以及在C#中的使用

    下面做一些简要的说明. 1. 单例模式(Singleton Pattern),又称作单件模式,当然也有一种诙谐的称谓:单身模式.在经典的GoF所著的<Design Patterns>一书中 ...

  5. Tomcat--远程Debug以及参数配置调优

    本文会讲解Tomcat远程Debug调试,Tomcat-manager监控(简单带过),psi-probe监控和Tomcat参数调优.本文基于Tomcat8.5版本. Tomcat远程Debug: 远 ...

  6. 使用 QuickBI 搭建酷炫可视化分析

    随着各行各业大数据的渗透,BI 类数据分析需求与日俱增,如何让可视化更好的展现数据的价值,是 BI 类产品一直努力的方向.对此国内外的BI产品都有自己的方法,如国外大牌的 PowerBI.Tablea ...

  7. LL(1),LR(0),SLR(1),LALR(1),LR(1)对比与分析

    前言:考虑到这几种文法如果把具体内容讲下来肯定篇幅太长,而且繁多的符号对初学者肯定是极不友好的,而且我相信看这篇博客的人已经对这几个文法已经有所了解了,本篇博客的内容只是对 这几个文法做一下对比,加深 ...

  8. light oj 1057 状压dp TSP

    #include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...

  9. NSIS nsDialogs 插件

    介绍 nsDialogs nsDialogs 允许在安装程序中创建自定义页面.居于内置的页面之上,nsDialogs 能够创建包含任何类型的以任意形式排列的控件的页面.它能够创建简至仅一个控件的页面, ...

  10. Boost test vs2013 fatal error C1001

    Boost test vs2013 fatal error C1001 Boost test库提供了一个用于单元测试的基于命令行界面的测试套件UTF:Unit Test Framework,具有单元测 ...