数据类型检测
方法一： typeof
- typeof 常用来判断基础数据类型，判断引用类型会有bug
- typeof null 会输出 object，但这只是 JS 存在的一个悠久 Bug，不代表 null 就是引用数据类型，并且 null 本身也不是对象
- 引用数据类型是无法判断出来的，用 typeof 来判断的话，除了 function 会判断正确以外，其余都是'object'，
typeof 1 // 'number' typeof '1' // 'string' typeof undefined // 'undefined' typeof true // 'boolean' typeof Symbol() // 'symbol' typeof null // 'object' typeof [] // 'object' typeof {} // 'object' typeof console // 'object' typeof console.log // 'function'
方式二：instanceof
- 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
手写instaneof
- 1.先用typeof来判断基础数据类型，如果是，直接返回false
- 2.拿到参数的原型对象,循环往下寻找进行判断，直到找到相同的原型对象
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
instanceof可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型；- 而
typeof也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function类型以外，其他的也无法判断。
方式三： 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]"
最优解：手写一个全局通用判断方法
原理：
- 1.先判断是否是基础类型，如果是，则直接返回类型
- 2.如果是object类型，使用
Object.prototype.toString判断方式，进行正则匹配
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返回
类型转换
先来一个小题，体验一下
'123' == 123 // false or true? '' == null // false or true? '' == 0 // false or true? [] == 0 // false or true? [] == '' // false or true? [] == ![] // false or true? null == undefined // false or true? Number(null) // 返回什么？ Number('') // 返回什么？ parseInt(''); // 返回什么？ {}+10 // 返回什么？ let obj = { [Symbol.toPrimitive]() { return 200; }, valueOf() { return 300; }, toString() { return 'Hello'; } } console.log(obj + 200); // 这里打印出来是多少？
答案在最下方，看看你能作对多少
强制类型转换
强制类型转换方式包括 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()
隐式类型转换
凡是通过逻辑运算符 &&、 ||、 !、运算符 +、-、*、/、关系操作符 >、 <、 <= 、>=、相等运算符 ==或者 if/while 条件的操作,都算是隐式类型转换
==与+的几种隐式类型转换规则
== 的隐式类型转换规则
- 1.如果类型相同，无须进行类型转换；
- 2.如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
- 3.如果其中一个是 Symbol 类型，那么返回 false；
- 4.两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
- 5.如果一个操作值是 boolean，那么转换成 number；
- 6.如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）。
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已经加上去了，这里需要注意一下
+ 的隐式类型转换规则
'+' 号操作符，不仅可以用作数字相加，还可以用作字符串拼接。仅当 '+' 号两边都是数字时，进行的是加法运算；如果两边都是字符串，则直接拼接，无须进行隐式类型转换。
除了上述比较常规的情况外，还有一些特殊的规则，如下所示。
- 1.如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用toString() 方法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级（下一讲会专门介绍），然后再进行拼接。
- 2.如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的情况还是参考上一条规则。
- 3.如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。
下面还是结合代码来理解上述规则，如下所示。 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，字符串拼接
答案
'123' == 123 // false or true? true '' == null // false or true? false '' == 0 // false or true? true [] == 0 // false or true? true [] == '' // false or true? true [] == ![] // false or true? true null == undefined // false or true? true Number(null) // 返回什么？ 0 Number('') // 返回什么？ 0 parseInt(''); // 返回什么？ NaN {}+10 // 返回什么？ 10 let obj = { [Symbol.toPrimitive]() { return 200; }, valueOf() { return 300; }, toString() { return 'Hello'; } } console.log(obj + 200); // 这里打印出来是多少？ 400
