当map遇到parseInt

也是一道面试题,估计除了面试题,一般情况下,也不会写出类似的代码了。

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

  这么一道题的返回结果是什么?

  如果不用浏览器去验证,乍一看,似乎确实没什么头绪。

  我们先看一下map函数的官方解释: 

map 方法会给原数组中的每个元素都按顺序调用一次callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。

  map本身接受两个参数:callback回调函数和thisArg(可选的)执行 callback 函数时使用的this 值。至少到目前为止,我都没有用过这第二个参数。事实上thisArg也没什么好解释的,其实有点相当于使用call或者apply绑定的this值。我们关注的焦点在callback,他也接受3个参数:value-->当前值, index-->索引, arr-->调用map函数的数组本身。后两个参数是可选的。

  那么我们再回头看一下上面的题目。

  是不是可以理解为parseInt就是map方法的回调函数?那么在这种情况下parseInt会接受两个参数:数组元素本身,和索引。

  我们重新拆解一下这道题目: 

[‘1‘, ‘2‘, ‘3‘].map(function (item, index) {
  return parseInt(item, index)
})

  是不是更容易理解了?

  那么我们需要解答的也就是三次调用parseInt的返回结果。

  第一次: parseInt("1", 0);

  第二次: parseInt("2", 1);

  第三次: parseInt("3", 2);  

  很好,我们回头去看一下parseInt函数:

parseInt() 函数解析一个字符串参数,并返回一个指定基数的整数 (数学系统的基础)。
用法:parseInt(string, radix);

如果仅仅看到这里,那么我们似乎能够得出答案了,三次调用结果将都返回NaN。

但是,请注意:这里有一个特殊的地方,基数radix是可选的,那么如果没有填radix,系统是如何判定的呢?不难理解,从js角度来理解,没有传递的话,系统会默认为radix=undefined

那么问题来了,undefined在JavaScript当中是一种falthy值,而JavaScript中,falthy值是可数的,我们是不是应该验证一下其他的falthy值呢?

很明显,如果radix传递的是一个falthy值的话,他会依据上述radix=undefined的处理方法处理。到这里基本上能够理解parseInt了。

但是,如果我们进一步验证radix参数值的话,会发现一件很有意思的事情。

就是如果你传递的radix值可以肉眼可见的转换成数字的话,他会将他当做数字,而明显就是非数字的值,也不可以转换成正常的数字的话,他会当做类似于falthy值来处理。这里仅仅当做笑谈而已,大可不必在意。完全没有什么研究价值。

原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/10530932.html

时间: 2024-08-29 02:35:44

当map遇到parseInt的相关文章

JavaScript之map与parseInt的陷阱

问题来源 ? 这个问题的来源是学习廖雪峰老师JS教程.问题如下:小明希望利用map()把字符串变成整数,他写的代码很简洁: 'use strict'; var arr = ['1', '2', '3']; var r; r = arr.map(parseInt); console.log(r); // [1, NaN, NaN] 为什么不是[1, 2, 3]?这是因为两个两个函数的定义有冲突.下面详解: map的定义 ? 注意到这个问题的原因是参考了这个国外某博客JavaScript可选参数危险

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

// 下面的语句返回什么呢: ["1", "2", "3"].map(parseInt); // 你可能觉的会是[1, 2, 3] // 但实际的结果是 [1, NaN, NaN] // 通常使用parseInt时,只需要传递一个参数. // 但实际上,parseInt可以有两个参数.第二个参数是进制数. // 可以通过语句"alert(parseInt.length)===2"来验证. // map方法在调用callback

由["1", "2", "3"].map(parseInt) 引发的问题

基础知识 map语法 map(callback, [thisArg]) map 参数 callback 生成新数组元素的函数,callback参数,使用三个参数 currentValue callback 数组中正在处理的当前元素 index [可选] callback 数组中正在处理的当前元素的索引 array [可选] callback  map 方法被调用的数组 thisArg [可选] 执行 callback 函数时使用的this 值 返回值 一个新数组,每个元素都是回调函数的结果 pa

关于面试题:[1, 2, 3].map(parseInt)问题的剖析

一.前言 最近有小伙伴在公号中咨询了胡哥这道面试题,窃以为是比较有意思的一道面试题,于此分享给各位小伙伴.先把答案给了各位,和你理解的一样吗?! [1, 2, 3].map(parseInt) // [1, NaN, NaN] 如果你答案你都明白,请出门左转:React源码/原理了解一下. 二.剖析 这道面试题,本身并不复杂.不能正确回答问题的小伙伴,大多数集中于对parseInt这个函数的不了解或者了解的不全面,下面就由胡哥为大家抽丝剥茧一一讲述. 1. map函数 map()方法创建一个新数

JavaScript中的map()函数

概述Array.map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,同时不会改变原来的数组. 用法 Array.map(callback); 示例 //简单数组 const arr = [1, 3, 4, 5, 6, 7, 8, 10]; const cube = (num) => { return num * num; } const res = arr.map(cube);//[ 1, 9, 16, 25, 36, 49, 64, 100 ] // or const

fsn文件解析(C#)

public class FsnBizNet { private static int count; public static int parseInt(IList<string> list) { int value = Convert.ToInt32(list[count + 1] + list[count], 2); count += 2; return value; } public static string parseString(IList<string> list)

【SSM部落客(博客)项目实战12】博客分页

这里我是在在后台进行分页的,使用以前写的分页控件进行操作数据的,前台用bootstrap进行显示的. 效果图: 后台代码 mav.addObject("pageCode", PageUtil.genPagination(request.getContextPath()+"/index.html", blogService.getTotal(map), Integer.parseInt(page), 10, param.toString())); 前台代码 <n

混合使用 ForkJoin, Akka, Future 实现一千万个不重复整数的排序

  本来只是想写一个 ForkJoin 的示例,但写着写着就加入了 akka, future 的元素, 是在解决问题的过程中逐渐引入的.我觉得这种学习的方式很好,就是在解决一个问题的过程中,可以综合地探索和学习到很多不同的东西.传统的学习讲究"循序渐进"的方式,但是"跳跃式+快速试错"也许是学习新技术的更好的方法. :) 原本是想实现十亿个不重复整数的排序, 由于文件外排序没有解决,因此,暂时实现的是一千万个不重复数,可以一次性加载到 2G 的内存里.  一. 任务

JavaScript函数柯里化的一些思考

1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: var f1 = function(x){ return f(x); }; f1(x); 很多同学都能看出来,这些写是非常傻的,因为函数f1和f是等效的,我们直接令var f1 = f;就行了,完全没有必要包裹那么一层. 但是,下面一段代码就未必能够看得出问题来了: var getServerStuff = function(callback){ return ajaxCall(function(json){ return cal