两个奇怪的灵异现象

大家好，我是小杜杜，在日常的开发中总会遇到一些奇奇怪怪的问题，最近遇到了两种有趣的现象，简单的分享下，如果你有什么奇奇怪怪的现象，可以在评论区讨论讨论～

灵异现象：转化为数字类型

有的时候我们需要把字符串的数组变为数字类型的数组,像这样：['1', '2', '3'] => [1, 2, 3]

我们知道parseInt的作用是可以将字符串转化为一个整数，那么我们现在开始进行转化一下，看看会变成什么？

['1', '2', '3'].map(parseInt) 会返回什么？

照理而言，我将数组进行map遍历，在经过 parseInt加工后返回的应该是[1, 2, 3],

然而：

可以看到按照我们之前的推理应该返回[1, 2, 3]，然而却返回了[1, NaN, NaN],这是为什么呢？接下来我们一起来看看

现象本质

parseInt

我们要想搞清楚为什么会发生这样的现象，必须清楚parseInt的具体含义

parseInt()：函数解析一个字符串参数，并返回一个指定基数的整数

    const value = parseInt(string, radix)

• string: 必选，要解析的字符串
• radix：可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间。

string 我们很好理解，那么radix是什么呢？

如果 radix 不存在或者为0时，parseInt()会根据string来判断数字的基数

栗子🌰：如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。

map

那么我们现在将上述的map进行转化来看看

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

等价于:

['1', '2', '3'].map((item, index) => parseInt(item, index))

也就是说，转化后parseInt会以值为string,索引为index

也就是会转化为

    parseInt('1', 0) // 1
    parseInt('2', 1) // NaN
    parseInt('3', 2) // NaN, 3 不是二进制

所以此时会返回 [1, NaN, NaN]

解决方案

既然我们知道了原理，那么解决方法也就很好解决了，

不要使用简写

我们直接使用：

['1', '2', '3'].map((item) => parseInt(item))

此时不会以索引作为基数，所以都是以10为基数，所以此时返回的结果便会正常

使用Number

我们可以直接使用Number函数来处理这类情况， 如：

['1', '2', '3'].map(Number)

结果：

灵异现象：排序

起因是这样的，之前，我有一个导出的活，需要前端按顺序导出，上线之后，提出了这样一个疑问，为什么要对导出的数据做排序？

排序，我没有啊，（PS：你没有提，我怎么可能做多余的工作🤔）

结果一看，导出的数据确实发生了排序，想这样:

部位/size 应该在第一列，然而莫名的却出现在了后面，再看看其他导出的顺序，确实好的，于是勾起了我的好奇～

核心本质

现象的本质是由浏览器引起的，我们在控制台输入

let obj = {
    name: '小杜杜',
    '1':'2',
    age: '7'
}

当在打印obj时，控制台会给我们什么呢，各位小伙伴觉得顺序会改变吗？

我在这里认为，并不会改变，然而：

好家伙，我的‘1’直接放到了最上方，这种现象我猜测应该根据浏览器的内核有关，Chrome会存在，其他浏览器下可能不会出现。

但我们仍然需要处理这个问题，接下来看看如何解决～

解决方案

通过ES6中的Map去增加，像这样：

可以发现，我们可以通过map去解决这个问题

然而这时你又会发现一个问题，那就是 map类型并不等价于object类型，针对一开始的问题，我如果使用Map我就要讲我导出excel的组件增加支持map类型的功能，就会变得很麻烦。

方案：我们在key值上多加一个空格来看看：

各位小伙伴是不是以为有什么高大上的解决方案？没想到最后通过一个空格解决了这次的灵异现象～