写点什么

奇怪的 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:161779
用户头像

发布了 528 篇内容, 共 371.5 次阅读, 收获喜欢 714 次。

关注

评论 2 条评论

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

基于 RocketMQ Prometheus Exporter 打造定制化 DevOps 平台

阿里巴巴云原生

Java 云原生 监控 存储 消息中间件

浅谈网络性能管理智能化方案和实践

鲸品堂

AI 技术 AIOPS

保护云管理控制台的5个最佳实践

龙归科技

云计算 安全 风险管理

HW Y7 2018

无名

Flink程序结构与数据流

大数据技术指南

flink 4月日更

遭GitHub连夜封杀下架?被泄露的阿里内部Java面试手册到底有多强?

Java架构师迁哥

python实现AES/DES/RSA/MD5/SM2/SM4/3DES加密算法模板汇总

小小咸鱼ywy

Python 加密 rsa AES

U比生活平台

飞亚科技

Bee币蜜蜂网链是什么?

飞亚科技

聪明人的训练(七)

Changing Lin

4月日更

c语言思维地基搭建(c语言介绍)

-jf.

学习 大学作业 4月日更

# 模块1作业

灯火阑珊

​程序员的二十多个防猝死指南小妙招

Java架构师迁哥

Redis 学习资料

escray

redis 学习 极客时间 Redis 核心技术与实战 4月日更

架构师训练营-模块1课程作业

歲月鎏金😈

test

大肚皮狒狒

企业与员工的三种共同体关系

石云升

28天写作 职场经验 管理经验 4月日更

架构实战营模块一作业

梦寐凯旋

爽爆了!凭借阿里这份笔记,仅仅两星期就拿到了8个大厂offer!

Java架构师迁哥

11

三年过后

架构实战营

架构实战营模块一 作业

我叫大法师

微信业务架构图&学生管理系统

刘敏

都1202年了,阿里五岳版的《Java开发手册》你还没拜读过?

Java架构师迁哥

智慧党建平台搭建,党建系统开发

爬虫知识点汇总

小小咸鱼ywy

大数据 爬虫 破解 抓包 逆向

【业务架构训练营】模块一作业

Next_@

抖音春晚幕后 | 支撑 12 亿红包雨的云原生基础设施

数据库 分布式 云原生 边缘计算

架构实战营 作业1

solider

MySQL-技术专题-MVCC机制介绍

码界西柚

MySQL 事务隔离级别 Isolation ReadView

2021金三银四程序员面试必问总结

Java架构师迁哥

架构实战营模块1第1课-学习总结

吴建中

架构实战营

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