写点什么

奇怪的 JavaScript:map 和 parseInt 的反常应用

  • 2019-09-26
  • 本文字数:2723 字

    阅读完需:约 9 分钟

奇怪的JavaScript:map和parseInt的反常应用

在 JavaScript 中,当使用 map 和 parseInt 将字符数组转换为整数时,却出现了奇怪的现象。控制台输入 [‘1’, ‘7’, ‘11’].map(parseInt)后,得到的结果是 [1, NaN, 3] ,而不是 [1, 7, 11] 。本文将通过解释一些相关的 JavaScript 概念,解答出现这种状况的原因。



JavaScript 很奇怪。不相信吗?尝试使用 map 和 parseInt 将字符数组转换为整数。打开控制台(Chrome 上的快捷键是 F12),粘贴下面的代码,然后按回车键(或将焦点放到下面)。我们得到的不是一个整数数组 [1, 7, 11] ,而是 [1, NaN, 3] 。为什么呢?


['1', '7', '11'].map(parseInt);
复制代码


要想了解到底发生了什么,我们首先要讨论一些 JavaScript 的概念。如果你想要一个 TLDR(Too Long; Didn’t Read:太长了,不想读),我在本文的末尾提供了一个快速总结。

真 & 假

下面是 JavaScript 中的一个简单 if-else 语句:


if (true) {    // 此处总会运行} else {    // 此处不会运行到}
复制代码


在本例中,if-else 语句的条件为 true,因此它总会执行 if 块,而忽略 else 块。这是一个很简单的例子,因为 true 是一个布尔值。如果我们把一个非布尔值作为条件呢?


if ("hello world") {    // 这将会运行吗?    console.log("Condition is truthy");} else {    // 还是运行这里?    console.log("Condition is falsy");}
复制代码


尝试在开发人员的控制台(在 Chrome 上按 F12)中运行此代码。我们会发现 if 块运行了。这是因为字符串对象“hello world”是真。


每个 JavaScript 对象要么是真,要么是假。当将它们放到布尔上下文中时,如放在 if-else 语句中,对象将根据其真实性被视为 true 或 false。那么哪些对象是真,哪些是假呢?这里有一个简单的规则:


除了 false、0、“”(空字符串)、null、undefined、及 NaN 以外, 所有值都是真。


令人困惑的是,这意味着字符串 “false” 、字符串 “0” 、空对象 {} 和空数组 [] 都是真。我们可以通过将一个对象传递到布尔函数中(例如 Boolean(“0”); 中),来对其进行双重检查。


就我们的目的而言,只要记住 0 是假就足够了。

基数

0 1 2 3 4 5 6 7 8 9 10
复制代码


当我们从 0 数到 9 时,每个数字(0-9)都有不同的符号。然而,一旦达到 10,我们需要两个不同的符号(1 和 0)来表示这个数字。这是因为我们的十进制计数系统的基数(或基础)是 10。


基数是一个最小的数字,它只能由多个符号来表示。不同的计数系统有不同的基数,因此,相同的数字在不同的计数系统中,可以表示不同的数字。


十进制   二进制    十六进制基数 =10  基数 =2   基数 =160         0         01         1         12         10        23         11        34         100       45         101       56         110       67         111       78         1000      89         1001      910        1010      A11        1011      B12        1100      C13        1101      D14        1110      E15        1111      F16        10000     1017        10001     11
复制代码


例如,观察上表,我们可以看到在不同的计数系统中,相同的数字 11 可以表示不同的数字。如果基数是 2,那么它指的是数字 3。如果基数是 16,那么它指的是数字 17。


你可能已经注意到了,在我们的示例中,当输入为 11 时,parseInt 返回 3,这对应于上表中的二进制列。

函数的参数

在 JavaScript 中,函数可以用任意数量的参数来调用,即使该数量不等于声明函数时参数的数量。缺少的参数将被视为未定义,多余的参数将被忽略,但是它们会被存储在类似数组的参数对象中。


function foo(x, y) {    console.log(x);    console.log(y);}foo(1, 2); // log 输出 1, 2foo(1); // log 输出 1, undefinedfoo(1, 2, 3); // log 输出 1, 2
复制代码

map()

到了我们要讲的部分了!


Map 是数组原型中的一个方法,它返回一个新的数组,其中包含将原始数组的每个元素传递到函数中的结果。例如,下面的代码将数组中的每个元素乘以 3:


function multiplyBy3(x) {    return x * 3;}const result = [1, 2, 3, 4, 5].map(multiplyBy3);console.log(result); // log 输出 [3, 6, 9, 12, 15];
复制代码


现在,假设我想使用 map() 记录每个元素(没有返回语句)。我应该可以将 console.log 作为参数传递到 map() 中…… 对吧?


[1, 2, 3, 4, 5].map(console.log);
复制代码



发生了一件非常奇怪的事情。每个 console.log 调用都记录了索引和完整的数组,而不是只记录值。


[1, 2, 3, 4, 5].map(console.log);// 上面语句等价于[1, 2, 3, 4, 5].map(    (val, index, array) => console.log(val, index, array));// 不等价于[1, 2, 3, 4, 5].map(    val => console.log(val));
复制代码


当一个函数被传递到 map() 中时,对于每个迭代,都会向函数中传递三个参数:currentValue 、currentIndex 和整个 array。这就是为什么每次迭代都要记录三个条目的原因。


我们现在有了解开这个谜团所需要的所有线索。

将它们组装起来

ParseInt 有两个参数:string 和 radix 。如果提供的基数为假,那么默认情况下,基数将被设置为 10。


parseInt('11');                => 11parseInt('11', 2);             => 3parseInt('11', 16);            => 17parseInt('11', undefined);     => 11 (基数为假)parseInt('11', 0);             => 11 (基数为假)
复制代码


现在让我们一步一步地运行我们的示例。


['1', '7', '11'].map(parseInt); => [1, NaN, 3]第一次第一次迭代 index = 0, array = ['1', '7', '11']parseInt('1', 0, ['1', '7', '11']); => 1
复制代码


因为 0 是假,所以基数设置为默认值 10。parseInt() 只接受两个参数,因此会忽略第三个参数 [‘1’, ‘7’, ‘11’] 。以 10 为基数的字符串 ‘1’ 表示数字 1。


// 第二次迭代 index = 1, array = ['1', '7', '11']parseInt('7', 1, ['1', '7', '11']); => NaN
复制代码


在基数为 1 的系统中,符号 ‘7’ 不存在。与第一次迭代一样,最后一个参数将被忽略。因此,parseInt() 返回 NaN。


// 第三次迭代, index = 2, array = ['1', '7', '11']parseInt('11', 2, ['1', '7', '11']); => 3
复制代码


在基数为 2(二进制)的系统中,符号 ‘11’ 表示数字 3。最后一个参数被忽略。

总结 (TLDR)

[‘1’, ‘7’, ‘11’].map(parseInt) 不能按预期工作,是因为 map 在每次迭代时都会将三个参数传递到 parseInt() 中。第二个参数 index 作为 radix 参数传递给 parseInt。因此,数组中的每个字符串都使用不同的基数进行解析。‘7’ 按照基数 1 进行解析,即 NaN;‘11’ 按照基数 2 进行解析,即 3。‘1’ 按照默认基数 10 进行解析,因为它的索引 0 是假。


因此,下面的代码能按预期工作:


['1', '7', '11'].map(numStr => parseInt(numStr));
复制代码


原文链接:


https://medium.com/dailyjs/parseint-mystery-7c4368ef7b21


2019-09-26 16:161702
用户头像

发布了 428 篇内容, 共 295.2 次阅读, 收获喜欢 664 次。

关注

评论 2 条评论

发布
用户头像
interesting
2019-09-27 11:34
回复
用户头像
基础知识掌握不牢,还想当然着用
2019-09-27 10:15
回复
没有更多了
发现更多内容

这个中秋,国潮元宇宙的A新玩法是……?

文心大模型

Nodejs安装及环境配置

nodejs NVM 9月月更

学人工智能难吗?怎么用它赚到钱?

felix

人工智能 赚钱 副业赚钱 算法

云渲染为设计行业带来哪些福利?

3DCAT实时渲染

2022-09-09:给定一个正整数 n,返回 连续正整数满足所有数字之和为 n 的组数 。 示例 1: 输入: n = 5 输出: 2 解释: 5 = 2 + 3,共有两组连续整数([5],[2,

福大大架构师每日一题

算法 rust 福大大

「工作小记」后台系统代码简洁之路-详情页设计

叶一一

前端 设计模式 React Hooks 9月月更

【JS】两种实现-懒加载的方式-附无限滚动案例

Sam9029

JavaScript 前端 懒加载 9月月更

「趣学前端」今日祝福不限量,批量导入在路上

叶一一

前端 设计思维 9月月更

「工作小记」多个页面的相似操作公共化设计方案

叶一一

前端 设计思维 9月月更

哈希索引

急需上岸的小谢

9月月更

Python 教程之数据分析(7)—— Jupyter Notebook 入门

海拥(haiyong.site)

Python 9月月更

【JS】防抖与节流---在定义时返回的是回调函数

Sam9029

JavaScript 前端 防抖节流 9月月更

2022 WAIC 闭幕,融云提供分论坛元宇宙直播技术支持

融云 RongCloud

直播 元宇宙

Python 教程之变量(1)—— 变量、表达式、条件和函数

海拥(haiyong.site)

Python 9月月更

数据治理(十二):Ranger2.1.0源码编译

Lansonli

数据治理 9月月更

Java进阶(十三)servlet监听器

No Silver Bullet

Java Servlet 9月月更

使用 Angular Transfer State 的一个具体例子

汪子熙

typescript 前端开发 angular Web Component 9月月更

支撑全产业AI,需要怎样的算力服务?

脑极体

Java进阶(十)tomcat中context配置

No Silver Bullet

tomcat Context 9月月更

【C语言深度剖析】重点详解函数的形参和实参、传值和传址

Albert Edison

开发语言 传值 C语音 9月月更 传址

Ansible如何使用lookup插件模板化外部数据

山河已无恙

ansible 9月月更

库调多了,都忘了最基础的概念 《锁与线程2终结篇》

知识浅谈

线程 9月月更

ERP是什么?

优秀

ERP

为什么低代码和专业代码走向融合才能破解低代码困境?

牛刀专业低代码

低代码 低代码平台

当代用电行为大赏:有人心疼电费,有人靠屋顶光伏“理财”

脑极体

Web & Electron 平台即时通讯产品的技术选型

融云 RongCloud

Web Electron 即时通讯

C++学习------cmath头文件的源码学习02

桑榆

c++ 9月月更

社招前端二面常见面试题

coder2028

JavaScript 前端

全球新兴市场移动应用报告

易观分析

移动应用

redis数据类型以及它们的底层实现数据结构

想要飞的猪

「趣学前端」前端设计模式学习与应用

叶一一

前端 设计模式 9月月更

奇怪的JavaScript:map和parseInt的反常应用_大前端_Eric Tong_InfoQ精选文章