JS面试题解['1', '7', '11'].map(parseInt) 输出

目录
  • 输出结果
  • map函数有问题？
  • 会不会是传入的 parseInt 出现问题 ？

输出结果

['1', '7', '11'].map(parseInt)  //  结果输出 -> [1, NaN, 3]

为什么输出会有 NaN ? 为什么把 11 转成整数会是 3 ？

想把数组里的字符串数字转换成整数，于是使用 map函数来对数组的每一项作用，作用的函数是 parseInt函数，所以预期的结果应该是[1,7,11] ，然而最终浏览器的 JavaScript 引擎给出的答案是 [1, NaN, 3] 。

从结果可以看到 1 是正常进行转化的，后面两个数则不是我们预期的结果。

map函数有问题？

现在我们把 parseInt 换掉，功能改为给每一个数乘 2

['1', '7', '11'].map(function(x){
	return x * 2;     // 结果 -> [2, 14, 22]
});

发现结果是正常的，x代表从数组里拿到的每一个值，在依次去乘以2 ，没问题。

可是问题来了，除了x，会不会有其它参数，存不存在其它可以使用的参数。于是我们试验下：

['1', '7', '11'].map(function(x, i, j, k){
	console.log(x +' ' + i + ' ' + j + ' ' + k);
});

在 Chrome 的控制台执行后发现结果出乎意料

也就是说，map 接受的这个函数，它存在三个参数，第一个是数组当前的值，第二个是当前值的索引，第三个数是当前传入的数组

会不会是传入的 parseInt 出现问题 ？

当我们传入 parseInt 时，map 函数会把三个参数（数组当前元素，当前元素的索引，当前传入的数组）一并打包给 parseInt 。

那么现在问题就集中在 parseInt 函数上面。

从 MDN 文档查询后可以知道，parseInt(string, radix) 函数接受两个参数，第一个是需要转换的字符串，第二个是进制。

于是结果呼之欲出，我把这个过程画成了图，方便看图理解，

首先，parseInt 接受两个参数，因此第三个参数会被忽略。

第一次执行， parseInt('1', 0) 会输出 1 ，因为 0 会转换成 false，而 false 会使它执行默认的进制 10 ，就是 parseInt 默认都是转换十进制；

第二次执行，parseInt('7', 1) 因为没有所谓的 1 进制，所以无法转换，输出 NaN;

第三次执行parseInt('11', 2) 答案为 3 ，因为以 2 为进制转换，3 的二进制是 11 , 非常的巧妙。

所以最终的输出的结果就是 [1, NaN, 3]

以上就是JS面试题解['1', '7', '11'].map(parseInt) 输出的详细内容，更多关于JS面试题 的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript面试之如何实现数组拍平（扁平化）方法

    目录 1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方法 4 优化 4.1 指定展开深度 4.2 数组空位处理 4.2.1 for...of增加空位判断 4.2.2 forEach.map方法遍历 4.2.3 reduce方法 5 其他 5.1 栈 5.2 改进 总结 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个

  • js前端面试常见浏览器缓存强缓存及协商缓存实例

    js前端面试常见浏览器缓存强缓存及协商缓存实例

    目录 前言 搭建环境 强缓存 协商缓存 Etag和If-None-Match Last-Modify和if-modified-since 前言 最近在背面试题时,时常会看见浏览器缓存,虽然没有用过但是从它的描写中大致是知道它的作用和重要性.但是还是没有代码实操过,也是一知半解的,这口气咽不下啊,开始找资料,但是大部分都是理论半行代码没有,终于东拼西凑顿悟了.开始搭环境,干活. 浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本

  • 一道超经典js面试题Foo.getName()的故事

    目录 一.解析: 1.Foo.getName() 二.解析: 2.getName() 三.解析: 3.Foo().getName() 四.解析: 4.getName() 五.解析: 5.new Foo.getName() 六.解析: 6.new Foo().getName() 七.解析: 7.new new Foo().getName() 总结 下面是一道超经典的JS面试题. 蕴含了静态属性与实例属性,变量提升,this指向,new一个函数的过程 function Foo() { getName

  • JS面试题之forEach能否跳出循环详解

    当年懵懂无知的我被问到这个问题时,脑袋一片空白,当然也没答对,一直以来我对forEach都有一种错误的理解,由于它比原始的for循环简洁许多,导致我一度认为那是为了方便书写所创造出来的语法糖,在业务中也经常使用,但从没考虑过这种方式存在的问题. forEach使用说明 参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=example arr.for

  • JS前端面试数组扁平化手写flat函数示例

    目录 前言 题目 实现扁平化的方法 封装 flatten 1. ES6 flat 2. toString 3. 使用正则替换 4. 循环递归 4.1 循环 + concat + push 4.2 增加参数控制扁平化深度 4.3 巧用 reduce 4.4 使用 Generator 函数 5. 使用堆栈 stack 避免递归 6.while 循环+ some方法 前言 由于上半年参加了校招的技术面试, 前前后后面了20多个人了, 每次面试都会让应聘者手写一下数组扁平化flat(),但是发现居然没有

  • JavaScript前端面试扁平数据转tree与tree数据扁平化

    JavaScript前端面试扁平数据转tree与tree数据扁平化

    目录 一.写在前面 二.正文部分 2.1 扁平数据转为 tree 数据 2.2 tree 数据转为扁平数据 2.3 完整测试 demo 三.写在后面 一.写在前面 有时我们拿到的数据的数据结构可能不是理想的,那么此时就要求前端程序员,具有改造数据的能力.例如拿到扁平的数据, 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中,这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构. 总之就是说,提供数据的接口给到的数据,未必符合要求,而当我们又无法令他人为为我

  • JS面试题解['1', '7', '11'].map(parseInt) 输出

    JS面试题解['1', '7', '11'].map(parseInt) 输出

    目录 输出结果 map函数有问题? 会不会是传入的 parseInt 出现问题 ? 输出结果 ['1', '7', '11'].map(parseInt) // 结果输出 -> [1, NaN, 3] 为什么输出会有 NaN ? 为什么把 11 转成整数会是 3 ? 想把数组里的字符串数字转换成整数,于是使用 map函数来对数组的每一项作用,作用的函数是 parseInt函数,所以预期的结果应该是[1,7,11] ,然而最终浏览器的 JavaScript 引擎给出的答案是 [1, NaN, 3]

  • Js面试算法详解

    素数 Q:你将如何验证一个素数? A:一个素数只能被它自己和1整除.所以,我将运行一个while循环并加1.(看代码示例,如果你无法理解,那这不是你的菜.先回去学习javaScript基础知识然后再回来吧.) 方法1 function isPrime(n){ var divisor = 2; while (n > divisor){ if(n % divisor == 0){ return false; } else divisor++; } return true; } isPrime(137

  • JS实现数组去重的11种方法总结

    JS实现数组去重的11种方法总结

    目录 1.ES5常用:利用for嵌套for,然后splice去重 2.ES6常用:Set去重 3.indexOf去重 4.sort()排序 5.对象属性不能相同(不建议) 6.includes() 7.hasOwnProperty 8.filter 9.利用递归去重 10.Map去重 11.reduce+includes 1.ES5常用:利用for嵌套for,然后splice去重 function unique(arr) { for (var i = 0; i < arr.length; i++

  • JS自定义对象实现Java中Map对象功能的方法

    本文实例讲述了JS自定义对象实现Java中Map对象功能的方法.分享给大家供大家参考.具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容!   这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: 复制代码 代码如下: /**  *

  • JS面试之异步模拟超时重传机制详解

    JS面试之异步模拟超时重传机制详解

    目录 引言 题目分析 代码设计 核心讲解 引言 前面我讲解了两篇有关异步的逻辑思维题目,一个是红绿灯转换,还有一个是异步并发限制.有小伙伴私信我说不过瘾,希望还能再出一篇异步超时重传的讲解.为了满足这位粉丝的小小要求(我尼玛),我查询了相关资料和面试题,确实发现这是某大肠面试的代码设计题.不得不说这位粉丝发现的这个题目是相当亮眼,相当给力. 题目分析 超时重传机制,看到这个词语想必科班同学都十分十分熟悉吧.大家第一时间肯定会想到计算机网络中tcp的超时重传.不错,此处的异步模拟超时重传机制和计算

  • JS面试异步模拟红绿灯实现详解

    目录 引言 问题拆解 代码设计 引言 异步的问题是程序员绕不开的话题,无论在实际开发上还是在面试中,我们总会遇到各种头疼的问题,但是细细品味,其实这些问题总能拓展我们的思路,激发我们的思维能力.培养我们的高情商能力. (我,我编不下去了)红绿灯模拟在异步问题上是经典中的经典,网络上的设计也是层出不穷,我将给大家呈现一款比较独特的设计. 问题拆解 红绿灯在我们日常生活是常见的,因此对于问题大家是容易理解的,我们此次需要考虑如何模拟红绿灯的无间断切换和轮询过程. 首先分析,我们可以通过while循环

  • JS面试之对事件循环的理解

    目录 一.是什么 事件循环(Event Loop) 二.宏任务与微任务 微任务 宏任务 三.async与await async await 四.流程分析 一.是什么 JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事 为什么要这么设计,跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删除 DOM ,另一个添加 DOM,此时浏览器该如何处理? 为了解决单线程运

  • java面试题解LeetCode27二叉树的镜像实例

    目录 正文 解题思路 方法一:递归法 方法二:辅助栈(或队列) 正文 LeetCode27. 二叉树的镜像 请完成一个函数,输入一个二叉树,该函数输出它的镜像. 例如输入: 4 /2 7 / \ /1 3 6 9 镜像输出: 4 /7 2 / \ /9 6 3 1 示例 1: 输入:root = [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1] 限制: 0 <= 节点个数 <= 1000 解题思路 方法一:递归法 根据二叉树镜像的定义,考虑递归遍历(dfs)二叉树,交换每个

  • java中 Set与Map排序输出到Writer详解及实例

    java中 Set与Map排序输出到Writer详解及实例

     java中 Set与Map排序输出到Writer详解及实例 一般来说java.util.Set,java.util.Map输出的内容的顺序并不是按key的顺序排列的,但是java.util.TreeMap,java.util.TreeSet的实现却可以让Map/Set中元素内容以key的顺序排序,所以利用这个特性,可以将Map/Set转为TreeMap,TreeSet然后实现排序输出. 以下是实现的代码片段: /** * 对{@link Map}中元素以key排序后,每行以{key}={val

  • JS实现获取word文档内容并输出显示到html页面示例

    本文实例讲述了JS实现获取word文档内容并输出显示到html页面.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var w = new ActiveXObject('Word.Application'); va

随机推荐