JS 的数据类型及转换

JS的数据类型有八种：null、undefined、string、number、boolean、Symbol、Bigint、Object其中前七种为基础类型，Object为引用类型。

JS的数据类型可以分为以下两类存储：

基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量
引用类型存储在堆内存，存储的是地址，多个引用指向同一个地址

1.数据类型判断的几种方法

1.typeof

typeof 1 //number
typeof 'str' //string
typeof true// boolean
typeof Symbol() //symbol
typeof null // object
typeof undefined //undefined
typeof BigInt(12) //bigint
typeof [] //object
typeof {} // object
typeof console // object
typeof console.log // function

null的typeof是object,这只是 JS 存在的一个悠久 Bug，不代表 null 就是引用数据类型，并且 null 本身也不是对象，此外引用类型用typeof来判断的话除了function会判断OK的话，其他全是object，是无法判断出来的

2.instanceof

instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

let Car = function() {}
let benz = new Car()
benz instanceof Car // true
let car = new String('Mercedes Benz')
car instanceof String // true
let str = 'Covid-19'
str instanceof String // false

自己实现instanceof

function myInstanceof(left, right) {
  // 这里先用typeof来判断基础数据类型，如果是，直接返回false
  if (typeof left !== 'object' || left === null) return false;
  // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
  let proto = Object.getPrototypeOf(left);
  while (true) {                  //循环往下寻找，直到找到相同的原型对象
    if (proto === null) return false;
    if (proto === right.prototype) return true;//找到相同原型对象，返回true
    proto = Object.getPrototypeof(proto);
  }
}
// 验证一下自己实现的myInstanceof是否OK
console.log(myInstanceof(new Number(123), Number));    // true
console.log(myInstanceof(123, Number));                // false

typeof和instanceof的差异：

instanceof可以准确判断复杂引用数据类型，但不能正确判断基础数据类型
typeof虽然可以判断除null 外的基础数据，但引用数据类型中，除了function外其他也无法判断
typeof 操作符可以确定值的原始类型，而 instanceof 操作符用于确保值的引用类型。

3.Object.prototype.toString

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

Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上结果，加上call也ok
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.call()可以很好的判断引用类型，甚至可以把document和window都区分开来

手写判断类型方法

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

/* 代码验证，需要注意大小写，哪些是typeof判断，哪些是toString判断？思考下 */

getType([])     // "Array" typeof []是object，因此toString返回
getType('123')  // "string" typeof 直接返回
getType(window) // "Window" toString返回
getType(null)   // "Null"首字母大写，typeof null是object，需toString来判断
getType(undefined)   // "undefined" typeof 直接返回
getType()            // "undefined" typeof 直接返回
getType(function(){}) // "function" typeof能判断，因此首字母小写
getType(/123/g)      //"RegExp" toString返回

2.数据类型转换

2.1强制类型转换

强制类型转换包括Number()、parseInt()、parseFloat()、toString()、String、Boolean() 这几种方法比较类似，都是通过自身的方法来进行数据类型的强制转换

Boolean() 方法的强制转换规则

此方法的规则：除undefined、null、false、' '、0（包含+0、-0）、NaN转换出来的是false,其他都是true

toString()方法的强制转换规则

基本类型值的字符串化规则为：null 转换为 "null"，undefined 转换为 "undefined"，true 转换为 "true"。数字的字符串化则遵循通用规则，不过那些极小和极大的数字使用指数形式：

var a = 1.07 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000; // 七个1000一共21位数字 
a.toString(); // "1.07e21"

对普通对象来说，除非自行定义，否则 toString()（Object.prototype.toString()）返回内部属性 [[Class]] 的值如 "[object Object]"。

String() 方法的强制转换规则

在不知道要转换的值是不是 null 或 undefined 的情况下，还可以使用转型函数 String()，这个函数能够将任何类型的值转换为字符串。String()函数遵循下列转换规则：

如果值有 toString()方法，则调用该方法（没有参数）并返回相应的结果；
如果值是 null，则返回"null"；
如果值是 undefined，则返回"undefined"(因为 null 和 undefined 没有 toString()方法，所以 String() 函数就返回了值的字面量 )

var value1 = 10; 
var value2 = true; 
var value3 = null; 
var value4; 
alert(String(value1)); // "10" 
alert(String(value2)); // "true" 
alert(String(value3)); // "null" 
alert(String(value4)); // "undefined"

Number()、parseInt()和 parseFloat()

共同点：都可以非数值转换为数值

区别：Number()可以用于任何数据类型，另两个函数则专门用于把字符串转换成数值

Number()方法的强制转换规则

parseInt()函数在转换字符串时，更多的是看其是否符合数值模式。它会忽略字符串前面的空格，直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号，parseInt() 就会返回 NaN；也就是说，用 parseInt()转换空字符串会返回 NaN（Number()对空字符返回 0）。如果第一个字符是数字字符，parseInt()会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。例如，"1234blue"会被转换为 1234，因为"blue"会被完全忽略。类似地，"22.5" 会被转换为 22，因为小数点并不是有效的数字字符。

如果是布尔值，true和false分别转换为1和0
如果是数字，返回自身
如果是null，返回0
如果是undefined，返回NaN
如果是字符串，遵循：若字符串只包含数字(或0x/0X开头的十六进制数字字符串，允许包含正负号)，则将其转换为十进制；若果字符串中包含有效的浮点格式，将其转换为浮点数值；若果是空字符串，将其转换为0；如果不是以上格式的字符串，均返回NaN；
如果是Symbol,抛出错误
如果是对象，并且部署了[Symbol.toPrimitive],那么调用此方法，否则调用对象的valueOf()方法，然后依据前面的顺序转换返回对应的值

Number(true);        // 1
Number(false);       // 0
Number('0111');      //111
Number(null);        //0
Number('');          //0
Number('1a');        //NaN
Number(-0X11);       //-17
Number('0X11')       //17

parseInt()方法的强制转换规则

parseInt解析允许字符串中含有非数字字符，解析按从左到右的顺序，如果遇到非数字字符就停止。而number转换不允许出现非数字字符，否则会失败并返回 NaN。

parseFloat()方法的强制转换规则

与 parseInt()函数类似，parseFloat()也是从第一个字符（位置 0）开始解析每个字符。而且也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。也就是说，字符串中的第一个小数点是有效的，而第二个小数点就是无效的了，因此它后面的字符串将被忽略。举例来说， "22.34.5"将会被转换为 22.34。

解析字符串中的浮点数可以使用 parseFloat(..) 函数。parseInt(..) 针对的是字符串值。向 parseInt(..) 传递数字和其他类型的参数是没有用的，比如 true、function(){...} 和 [1,2,3]。

2.2.隐式类型转换

凡是通过逻辑运算符 (&&、 ||、 !)、运算符 (+、-、*、/)、关系操作符 (>、 <、 <= 、>=)、相等运算符 (==) 或者 if/while 条件的操作，如果遇到两个数据类型不一样的情况，都会出现隐式类型转换。

2.2.3. '==' 的隐式类型转换规则 == 允许在相等比较中进行强制类型转换而 === 不允许

如果类型相同，无须进行类型转换；
如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
如果其中一个是 Symbol 类型，那么返回 false；
两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
如果一个操作值是 boolean，那么转换成 number；
如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换 【对象到原始值转换详情：www.cnblogs.com/lxlx1798/ar…】 ）。

null == undefined       // true  规则2
null == 0               // false 规则2
'' == null              // false 规则2
'' == 0                 // true  规则4 字符串转隐式转换成Number之后再对比
'123' == 123            // true  规则4 字符串转隐式转换成Number之后再对比
0 == false              // true  e规则 布尔型隐式转换成Number之后再对比
1 == true               // true  e规则 布尔型隐式转换成Number之后再对比
var a = {
  value: 0,
  valueOf: function() {
    this.value++;
    return this.value;
  }
};

// 注意这里a又可以等于1、2、3
console.log(a == 1 && a == 2 && a ==3);  //true f规则 Object隐式转换
// 注：但是执行过3遍之后，再重新执行a==3或之前的数字就是false，因为value已经加上去了，这里需要注意一下

2.2.4.'+' 的隐式类型转换规则

'+' 号操作符，不仅可以用作数字相加，还可以用作字符串拼接。仅当 '+' 号两边都是数字时，进行的是加法运算；如果两边都是字符串，则直接拼接，无须进行隐式类型转换。

除了上述比较常规的情况外，还有一些特殊的规则，如下所示。

如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 方法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级 (如2.2.5.Object 的转换规则) ，然后再进行拼接。
如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的情况还是参考上一条规则。
如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。

1 + 2        // 3  常规情况
'1' + '2'    // '12' 常规情况
// 下面看一下特殊情况
'1' + undefined   // "1undefined" 规则1，undefined转换字符串
'1' + null        // "1null" 规则1，null转换字符串
'1' + true        // "1true" 规则1，true转换字符串
'1' + 1n          // '11' 比较特殊字符串和BigInt相加，BigInt转换为字符串
1 + undefined     // NaN  规则2，undefined转换数字相加NaN
1 + null          // 1    规则2，null转换为0
1 + true          // 2    规则2，true转换为1，二者相加为2
1 + 1n            // 错误  不能把BigInt和Number类型直接混合相加
'1' + 3           // '13' 规则3，字符串拼接

整体来看，如果数据中有字符串，JavaScript 类型转换还是更倾向于转换成字符串，因为第三条规则中可以看到，在字符串和数字相加的过程中最后返回的还是字符串

2.2.5.Object 的转换规则

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

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

var obj = {
  value: 1,
  valueOf() {
    return 2;
  },
  toString() {
    return '3'
  },
  [Symbol.toPrimitive]() {
    return 4
  }
}
console.log(obj + 1); // 输出5
// 因为有Symbol.toPrimitive，就优先执行这个；如果Symbol.toPrimitive这段代码删掉，则执行valueOf打印结果为3；如果valueOf也去掉，则调用toString返回'31'(字符串拼接)
// 再看两个特殊的case：
10 + {}
// "10[object Object]"，注意：{}会默认调用valueOf是{}，不是基础类型继续转换，调用toString，返回结果"[object Object]"，于是和10进行'+'运算，按照字符串拼接规则来，参考'+'的规则C
[1,2,undefined,4,5] + 10
// "1,2,,4,510"，注意[1,2,undefined,4,5]会默认先调用valueOf结果还是这个数组，不是基础数据类型继续转换，也还是调用toString，返回"1,2,,4,5"，然后再和10进行运算，还是按照字符串拼接规则，参考'+'的第3条规则

参考文献

www.cnblogs.com/lxlx1798/ar…