基础三板斧，进阶 JavaScript - 前端基石：JS 中的9大数据类型和数据类型转换 - 《前端进阶，准备好才不会被淘汰》

9大数据类型
数据类型转换
数据类型检测
参考

9大数据类型

前端基石：JS 中的9大数据类型和数据类型转换 - 图1

数字中奇怪的值：

NaN

不是有效数字，但是是 number 类型
isNaN 是检测值是不是 NaN，在检查的时候，如果当前值不是数字类型，会先隐式转换为数字类型（Number 转换），然后在判断是否为有效数字。
Object.is(NaN, NaN) 也可以检测值是否是 NaN

数据类型转换

在前端的类型转换中，分为两种：手动转换和隐式转换

其他类型转换为 Number 类型

手动转换
- Number([val])
- parseInt/parseFloat([val])
隐式转换（浏览器内部默认是先转换为 Number 在进行计算）
- isNaN([val])
- 数字运算（+、-、*、/、%），但是 + 运算在出现字符串的情况不是数字运算，是字符串拼接
- 在进行 == 比较的时候，有些值需要转换为数字在比较

Number 转换

// 字符串转换为数字
Number('') => 0
Number('10') => 10
Number('10px') => NaN  // 只要出现非有效数字结构就是 NaN
// 布尔值转换为数字
Number(true) => 1
Number(false) => 0
// 其他类型转换为数组
Number(null) => 0
Number(undefined) => NaN
Number(Symbol(1)) => 报错
Number(BigInt(1)) => 1
对象转换为数字 => 先基于 valueOf 方法转换为原始类型，没有原始类型在基于 toString 转换为字符串，在将字符串转换为数字

parseInt/parseFloat 转换

parseInt 转换机制（parseFloat 类似，只是多识别一个小数点）：

从字符串左侧的第一个字符串开始查找有效数字。
遇到非有效数字字符就停止查找，无论后面是否还有有效数字都不会再管。
把找到的有效数字字符转换为数字。
如果一个有效数字字符都么有找到，结果就是NaN。

看几个某大厂的面试题例子：输出结果是什么？

parseInt(''); // NaN
Number(''); // 0 
isNaN(''); // false
parseInt(null); //NaN
Number(null); // 0
isNaN(null); // false
parseInt('1px'); // 1
Number('1px'); // NaN
isNaN('1px'); // true
parseInt('1.1px') + parseFloat('1.1px') + typeof parseInt(null);
isNaN(Number(!!Number(parseInt('1.8'))));
typeof !parseInt(null) + !isNaN(null);
1 + false + undefined + [] + 'Tencent' + null + true + {};

并且对于 parseInt() 还有一个比较经典的面试题：

let arr = [1,2,3,4];
arr = arr.map(parseInt);
console.log(arr);

这里需要先搞清楚 parseInt([value], [radix])的规则：

[radix] 这个值是一个进制，不写或者写0默认都是按照10进制进行处理（特殊情况：如果 value 是以 0x 开头，则默认值是 10 或者 16）。
进制有一个取值的范围，2~36 之间，如果不在这之间，整个程序运行结果一定是 NaN。
[value] 是 [radix] 进制的值，需要将 [value] 转换为十进制。
```
arr.map(parseInt)
=> 
parseInt('1', 0);  => 1
parseInt('2', 1);  => NaN
parseInt('3', 2);  => NaN
parseInt('4', 3);  => NaN
=> [1, NaN, NaN, NaN]
```
隐式转换
看一个简单的例子：
```
[] == false;
```
对象和布尔的比较，都是转换为数字（隐式转换），对象转换为数字先基于 valueOf 获取原始值，如果没有原始值在去 toString 转换为字符串然后在转换为数字。
在上面的例子中：

[] 基于 valueOf 获取原始值，[].valueOf() => [] ，发现 [] 没有原始值。
[] 没有原始值就调用 toString 转换为字符串，[].toString() => ‘’。
‘’ 转换为数字为 0 。
false 转换为数字为 0。
所以 [] == false => true

在看一个扩展的例子：

![] == false;

这里的比较先看符号优先级，! 的优先级高于 == ，所以是 ![] 的结果在和 false 进行比较。
![] 的潜在意思就是将 [] 转换为布尔在取反。
在 js 中 ‘’、0、null、undefined、NaN 这五个值变成布尔为 false ，其他的值都是 true ，所以 [] 转换为布尔结果为 true。 ![] => false。
![] == false 结构就是 true。

对象转换的规则，会先调用内置的 [ToPrimitive] 函数，其规则逻辑如下：

如果部署了 Symbol.toPrimitive 方法，优先调用再返回；
调用 valueOf()，如果转换为基础类型，则返回；
调用 toString()，如果转换为基础类型，则返回；
如果都没有返回基础类型，会报错。

其他类型转换为 String 类型
手动转换
- String([val])
- toString()
隐式转换
- - 运算，如果一边出现字符串，则是字符串拼接。
    - 这里有一种特殊的情况，如果出现对象的 + （例如：1+[]）也会变成字符串拼接，原因在于对象转换为数字的过程中会先将对象转换为字符串，+ 遇到字符串就变成字符串的拼接了。
    - 对于 +/++ 这种不一定是字符串拼接，是运算。
    - 还有一种特殊情况 {} + 0 这种情况，左边貌似一个对象，但是在处理的时候会当做一个代码块在处理。所以结果是数字 0 。
- 把对象转换为数字，需要先 toString() 转换为字符串，再去转换为数字

其他类型转换为 Boolean 类型

手动转换
- ![val]
- !![val]
- Boolean([val])
隐式转换
- 在循环或者条件判断中，条件处理的结果就是布尔类型值

valueOf 和 toString 的转换规则

数据类型检测

第一种判断方法：typeof

typeof 1 => 'number'
typeof '1' => 'string'
typeof treu => 'boolean'
typeof undefined => undefined
typeof null => 'object'
typeof Symbol(1) => 'symbol'
typeof 1n => 'bigint'
typeof []  =>'object'
typeof {}  =>'object'
typeof console  => 'object'
typeof console.log  => 'function'

typeof 的类型检测有两点需要注意：

typeof null 结果是 ‘object’，一般大家都说这是计算机的一个 Bug 导致的，但是到底是一个什么 Bug 导致了这个问题了？
“typeof null”错误是 JavaScript 第一版的遗留物。在这个版本中，值存储在 32 位单元中，由一个类型标签（1-3 位）和值的实际数据组成。类型标签存储在单元的低位中。其中有五个：
- 000：对象
- 1：整数
- 010：浮点数
- 100：字符串
- 110：布尔值
也就是说，最低的位是一位，那么类型标记只有一位长。或者它是零，那么类型标签的长度是三位，为四种类型提供两个额外的位。有一个值比较特殊：
- undefined 是整数 -2 ^30 （整数范围之外的数字）
- null 是机器码 NULL 指针。一个对象类型标签加上一个为零的引用。这就很明显为什么 typeof null 结果是 ‘object’ 了。
并且在ECMA6中，曾经有提案为历史平凡，将 type null 的值纠正为 ‘null’，但最后提案被拒了。理由是历史遗留代码 bug 太多。
引用数据类型 Object，用 typeof 来判断的话，除了 function ，其余都是 ‘object’。这也是为为什么在类型区分的时候，需要将 object 和 function 区分开的原因之一。

typeof 它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断。

第二种判断方法：instanceof
[value] instanceof [constructor]
instanceof 运算符用来检测 [value] 在其原型链中是否存在一个 [constructor] 的 prototype 属性。
```
function myInstanceof(left, right) {
// 先用 typeof 来判断基础数据类型，如果是，直接返回 false
if(typeof left !== 'object' || left === null) return false;
// 然后使用 getProtypeOf 获取参数的原型对象
let proto = Object.getPrototypeOf(left);
// 循环往下寻找，直到找到相同的原型对象
while(true) {
 // 找到最顶层
 if(proto === null) return false; 
     // 找到相同原型对象，返回true
 if(proto === right.prototype) return true;
 // 继续向上寻找
 proto = Object.getPrototypeof(proto);
}
}
```
instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型；

第三种判断方法：constructor
[value].constructor === 类，相对于 instanceof 来讲基本类型也可以处理，而且因为获取实例的 constructor 实际上获取的是所属的类，所以在检测准确性上比 instanceof 还好一点，但是 constructor 是可以随意被改动的。

第四种判断方法：Object.prototype.toString

toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “[object Xxx]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。

Object.prototype.toString({})           => "[object Object]"
Object.prototype.toString.call({})    => "[object Object]"
Object.prototype.toString.call(1)     => "[object Number]"
Object.prototype.toString.call('1')   => "[object String]"
Object.prototype.toString.call(true)  =>"[object Boolean]"
Object.prototype.toString.call(function(){})  => "[object Function]"
Object.prototype.toString.call(null)   => "[object Null]"
Object.prototype.toString.call(undefined) => "[object Undefined]"
Object.prototype.toString.call(/123/g)    => "[object RegExp]"
Object.prototype.toString.call(new Date()) => "[object Date]"
Object.prototype.toString.call([])       => "[object Array]"
Object.prototype.toString.call(document)  => "[object HTMLDocument]"
Object.prototype.toString.call(window)   => "[object Window]"

通过 Object.prototype.toString 可以实现一个通过的类型判断方法：

function getType(obj){
  let type  = typeof obj;
  // 先进行typeof判断，如果是基础数据类型，直接返回
  if (type !== "object") {    
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

在 ES3 中，在 toString 方法被调用时,会执行下面的操作步骤:

获取 this 对象的 [[Class]] 属性的值。
计算出三个字符串 “[object “，第一步的操作结果 Result(1)，以及 “]” 连接后的新字符串。
返回第二步的操作结果 Result(2) .

在 ES5 中，在 toString 方法被调用时，会执行下面的操作步骤:

如果 this 的值为 undefined，则返回 “[object Undefined]”。
如果 this 的值为 null，则返回 “[object Null]”。
获取 ToObject(this) 的结果 Result(1).
获取 Result(1) 的内部属性 [[Class]] 的值 Result(2).
返回三个字符串”[object “, Result(2), 以及 “]”连接后的新字符串.

前端基石：JS 中的9大数据类型和数据类型转换