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

["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. LinkedList集合 实现栈和队列

    LinkedList集合的底层是链表结构实现的,所以可以模拟栈(先进后出)和队列(先进先出). 方法: addFirst() //添加元素到列表的起始位置 addLast() //添加元素到列表的结束 ...

  2. jdk工具(转)

    在JDK的bin目录下有很多命令行工具: 我们可以看到各个工具的体积基本上都稳定在27kb左右,这个不是JDK开发团队刻意为之的,而是因为这些工具大多数是jdk\lib\tools.jar类库的一层薄 ...

  3. elasticsearch 中文API 记数(八)

    计数API 计数API允许开发者简单的执行一个查询,返回和查询条件相匹配的文档的总数.它可以跨多个索引以及跨多个类型执行. import static org.elasticsearch.index. ...

  4. mongodb什么时候使用

    转自:https://blog.csdn.net/justlpf/article/details/80392944 简介 MongoDB[1] 是一个基于分布式文件存储的数据库.由C 语言编写.旨在为 ...

  5. 2019-5-21-C#-在-构造函数添加-CallerMemberName-会怎样

    title author date CreateTime categories C# 在 构造函数添加 CallerMemberName 会怎样 lindexi 2019-05-21 11:28:32 ...

  6. Exit- Linux必学的60个命令

    1.作用 exit命令的作用是退出系统,它的使用权限是所有用户. 2.格式 exit 3.参数 exit命令没有参数,运行后退出系统进入登录界面.

  7. Odoo models.py BaseModel

    class BaseModel(object): """ Base class for OpenERP models. OpenERP models are create ...

  8. Nginx 的常用命令

    nginx命令,先来一波基本操作: start nginx // 启动Nginx nginx -t // 测试配置文件 nginx -v // 查看Nginx版本 nginx -V // 查看Ngin ...

  9. SignalR 2.0 入门与提高 转载https://www.cnblogs.com/vance/p/SignalR.html

    SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP.NET SignalR2.0 1. ...

  10. PHP数组循环遍历的四种方式

     1.使用for循环遍历数组     conut($arr);用于统计数组元素的个数.     for循环只能用于遍历,纯索引数组!!!!     如果存在关联数组,count统计时会统计两种数组的总 ...