["1", "2", "3"].map(parseInt) 为何返回[1,NaN,NaN]
转载自:http://blog.csdn.net/freshlover/article/details/19034079
这涉及到是否深入理解两个函数的格式与参数含义。
首先根据我对两个函数用法的了解,猜测是由于parseInt(string, radix) 的参数radix(进制)必须介于2~36之间,而且字符串string中的每个位上的数字不能大于radix才能正确返回数字结果值。
我们通过以下javascript代码测试一下:
var a=["1", "2", "3", "4","5",6,7,8,9,10,11,12,13,14,15];
console.log(a.map(parseInt));
返回结果为:[1,NaN,NaN,NaN,NaN,NaN,NaN,NaN,NaN,9,11,13,15,17,19]
正好印证了以上的猜测是正确的,因为:
parseInt('1',0) = 1,
parseInt('2',1) = NaN,
parseInt('3',2) = NaN,
……
parseInt('9‘,8) = NaN,
parseInt('10',9) = 9,
parseInt('11',10) = 11,
parseInt('12',11) = 13,
parseInt('13',12) = 15,
parseInt('14',13) = 17,
parseInt('15',14) = 19
正是由于map的回调函数的参数index索引值作了parseInt的基数radix,导致出现超范围的radix赋值和不合法的进制解析,才会返回NaN。
也许你还会怀疑索引值和基数radix对应关系的准确性,这时你可以重新定义parseInt函数,再来测试一下
function parseInt(str, radix) {
return str+'-'+radix;
};
var a=["1", "2", "3", "4","5",6,7,8,9,10,11,12,13,14,15];
console.log(a.map(parseInt));
输出结果为:["1-0","2-1","3-2","4-3","5-4","6-5","7-6","8-7","9-8","10-9","11-10","12-11","13-12","14-13","15-14"]
通过此例,再次证明,索引index的起始值从0开始,与radix的对应如前陈述一致,所以才会出现返回NaN的类型值。
这个实例提醒我们在使用两个函数parseInt和map时候要格外小心。同时对于IE6-7不支持map函数的情况也要谨慎或者通过prototype扩展处理。
最后再仔细回顾温习一下:
parseInt() 函数
定义和用法
parseInt() 函数可解析一个字符串,并返回一个整数。
语法
parseInt(string, radix)
| 参数 | 描述 |
|---|---|
| string | 必需。要被解析的字符串。 |
| radix |
可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。 如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。 |
返回值
返回解析后的数字。
说明
当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。
举例,如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。
提示和注释
注释:只有字符串中的第一个数字会被返回。
注释:开头和结尾的空格是允许的。
提示:如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。
实例
在本例中,我们将使用 parseInt() 来解析不同的字符串:
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定:返回 10 或 8
map 方法 (Array) (JavaScript)
对数组的每个元素调用定义的回调函数并返回包含结果的数组。
array1.map(callbackfn[, thisArg])
参数
|
参数 |
定义 |
|---|---|
|
array1 |
必需。 一个数组对象。 |
|
callbackfn |
必需。 一个接受最多三个参数的函数。 对于数组中的每个元素,map 方法都会调用 callbackfn函数一次。 |
|
thisArg |
可选。 可在 callbackfn 函数中为其引用this 关键字的对象。 如果省略thisArg,则 undefined 将用作this 值。 |
其中的每个元素均为关联的原始数组元素的回调函数返回值的新数组。
异常
如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。
备注
对于数组中的每个元素,map 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 不为数组中缺少的元素调用该回调函数。
除了数组对象之外,map 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。
回调函数语法
回调函数的语法如下所示:
function callbackfn(value, index, array1)
可使用最多三个参数来声明回调函数。
下表列出了回调函数参数。
|
回调参数 |
定义 |
|---|---|
|
value |
数组元素的值。 |
|
index |
数组元素的数字索引。 |
|
array1 |
包含该元素的数组对象。 |
["1", "2", "3"].map(parseInt) 为何返回[1,NaN,NaN]的更多相关文章
- 解惑 ["1", "2", "3"].map(parseInt) 为何返回[1,NaN,NaN]
javascript中的parseInt与map函数都是常用的函数,可是 ["1", "2", "3"].map(parseInt) 为何返 ...
- 在 JavaScript 中 ["1","2","3"].map(parseInt) 为何返回不是 [1,2,3] 却是 [1,NaN,NaN]?
这个问题我是希望有很多人可以一起交流的: 我在 http://blog.csdn.net/justjavac/article/details/19473199#t0 上看到了比较详细的解释, 但是具体 ...
- 为什么 ["1", "2", "3"].map(parseInt) 返回 [1,NaN,NaN]?
在 javascript 中 ["1","2","3"].map(parseInt) ,2,3] 却是 [1,NaN,NaN]? 我们首先回 ...
- map.(parseInt)方法详解
偶然间碰到这样一个问题: ["1","2", "3"].map(parseInt) //[ 1, NaN, NaN ] 运行结果 [ 1, ...
- JavaScript Array.map + parseInt
map 生成新数组的函数,3个参数 1-currentValue, callback数组中正在处理的当前元素 2-index(可选): callback数组中正在处理的当前元素的索引 3-array( ...
- JavaScript map+parseInt 容易产生的误区
map /** * 语法: * var new_array = arr.map(function callback(currentValue[,index[,array]]){ * // return ...
- ["1", "2", "3"].map(parseInt)`返回的结果是[1,2,3]?
今天刷到一道面试题,["1", "2", "3"].map(parseInt)返回的结果是什么呢?可能大家第一个想到的是 [1,2,3],但 ...
- ['1','2','3'].map(parseInt) 返回的是什么?
返回的是:[1,NaN,NaN] 首先我们先分析一下 parseInt 函数: parseInt()函数解析一个字符串参数,并返回指定基数的整数(数学系统中的基数). 它可以有两个参数,用法:pa ...
- ["1", "2", "3"].map(parseInt)?
["1", "2", "3"].map(parseInt)得到什么? 答案是:[1, NaN, NaN]. 原因:parseInt接收的是两 ...
随机推荐
- Web终端SSH功能
http://www.laozuo.org/10703.html------ CentOS安装配置GateOne实现Web终端SSH功能
- python 全局变量引用与修改
一.引用 使用到的全局变量只是作为引用,不在函数中修改它的值的话,不需要加global关键字.如: #! /usr/bin/python a = 1 b = [2, 3] def func(): if ...
- Javascript修正this的引用
1.使用this作为参数来传递给函数.因为this始终与当前对象一致. <!DOCTYPE html> <html> <head> <meta charset ...
- 【Python】web.py初识学习
简单而直接的Python web 框架:web.py 2016年11月03日 14:09:08 擒贼先擒王 阅读数:35157更多 个人分类: Web From:https://www.oschi ...
- tcp3次握手,https加密,ca认证
参考: https://baijiahao.baidu.com/s?id=1570143475599137&wfr=spider&for=pc
- MySQL Innodb日志机制深入分析
MySQL Innodb日志机制深入分析 http://blog.csdn.net/yunhua_lee/article/details/6567869 1.1. Log & Checkpoi ...
- 在vue init webpack my-project卡住的问题
在安装完node.js后,也用cnpm代替了npm,然后使用cnpm在node.js的安装路径下安装了vue-cli:cnpm install --global vue-cli.然后使用vue ini ...
- 搭建本地离线yum仓库
目录 前言 把rpm包下载到本地 配置本地yum仓库信息 生成repodata信息 检查以及使用 对本地仓库进行更新 参考资料 修改记录 环境:VMware-Workstation-12-Pro,Wi ...
- [LeetCode] 88. Merge Sorted Array_Easy tag: Two Pointers
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: T ...
- 简单的应用可以用storyBoard
可是问题,你不知道你的项目有多复杂,storyBoard跳转控制有代码这么灵活吗? 1. 假是是根据推送来推出页面呢? 2. 假如我要根据不同情况不停地推出不同的页面呢?storyBoard怎么确定关 ...