map.(parseInt)方法详解
偶然间碰到这样一个问题:
["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
来判断数字的基数。具体规则如下:
如果
string
以"0x"
开头,parseInt()
会把string
的其余部分解析为十六进制的整数。如果
string
以0
开头,版本低于ECMAScript 5的,基数为8。版本为ECMAScript 5的,基数为10。如果
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,有两种情况:
第一个参数不能转换成数字。
第二个参数不在 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)方法详解的更多相关文章
- Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...
- (转)Spring JdbcTemplate 方法详解
Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...
- JAVA 注解的几大作用及使用方法详解
JAVA 注解的几大作用及使用方法详解 (2013-01-22 15:13:04) 转载▼ 标签: java 注解 杂谈 分类: Java java 注解,从名字上看是注释,解释.但功能却不仅仅是注释 ...
- Java构造和解析Json数据的两种方法详解二
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...
- Clone使用方法详解【转载】
博客引用地址:Clone使用方法详解 Clone使用方法详解 java“指针” Java语言的一个优点就是取消了指针的概念,但也导致了许多程序员在编程中常常忽略了对象与引用的区别,本文 ...
- integer与int区别以及integer.values()方法详解
声明:本文为博主转载文章,原文地址见文末. 知识点1:integer和int的区别 /* * int是java提供的8种原始数据类型之一.Java为每个原始类型提供了封装类,Integer是java为 ...
- Java中的equals和hashCode方法详解
Java中的equals和hashCode方法详解 转自 https://www.cnblogs.com/crazylqy/category/655181.html 参考:http://blog.c ...
- (7)Java数据结构--集合map,set,list详解
MAP,SET,LIST,等JAVA中集合解析(了解) - clam_clam的专栏 - CSDN博---有颜色, http://blog.csdn.net/clam_clam/article/det ...
- MP实战系列(十二)之封装方法详解(续二)
继续MP实战系列(十一)之封装方法详解(续一)这篇文章之后. 此次要讲的是关于查询. 查询是用的比较多的,查询很重要,好的查询,加上索引如鱼得水,不好的查询加再多索引也是无济于事. 1.selectB ...
随机推荐
- LinkedList集合 实现栈和队列
LinkedList集合的底层是链表结构实现的,所以可以模拟栈(先进后出)和队列(先进先出). 方法: addFirst() //添加元素到列表的起始位置 addLast() //添加元素到列表的结束 ...
- jdk工具(转)
在JDK的bin目录下有很多命令行工具: 我们可以看到各个工具的体积基本上都稳定在27kb左右,这个不是JDK开发团队刻意为之的,而是因为这些工具大多数是jdk\lib\tools.jar类库的一层薄 ...
- elasticsearch 中文API 记数(八)
计数API 计数API允许开发者简单的执行一个查询,返回和查询条件相匹配的文档的总数.它可以跨多个索引以及跨多个类型执行. import static org.elasticsearch.index. ...
- mongodb什么时候使用
转自:https://blog.csdn.net/justlpf/article/details/80392944 简介 MongoDB[1] 是一个基于分布式文件存储的数据库.由C 语言编写.旨在为 ...
- 2019-5-21-C#-在-构造函数添加-CallerMemberName-会怎样
title author date CreateTime categories C# 在 构造函数添加 CallerMemberName 会怎样 lindexi 2019-05-21 11:28:32 ...
- Exit- Linux必学的60个命令
1.作用 exit命令的作用是退出系统,它的使用权限是所有用户. 2.格式 exit 3.参数 exit命令没有参数,运行后退出系统进入登录界面.
- Odoo models.py BaseModel
class BaseModel(object): """ Base class for OpenERP models. OpenERP models are create ...
- Nginx 的常用命令
nginx命令,先来一波基本操作: start nginx // 启动Nginx nginx -t // 测试配置文件 nginx -v // 查看Nginx版本 nginx -V // 查看Ngin ...
- SignalR 2.0 入门与提高 转载https://www.cnblogs.com/vance/p/SignalR.html
SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP.NET SignalR2.0 1. ...
- PHP数组循环遍历的四种方式
1.使用for循环遍历数组 conut($arr);用于统计数组元素的个数. for循环只能用于遍历,纯索引数组!!!! 如果存在关联数组,count统计时会统计两种数组的总 ...