继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS进阶-数据类型的判断方式以及转换方式的汇总

oldCode
关注TA
已关注
手记 1
粉丝 0
获赞 1

本文内容:

  • 介绍了几种常用的数据类型判断方式,并且手写了一个通用的判断方法
  • 强制类型转换隐式类型转换的常用方法和规则,以及常见的面试题

数据类型检测

方法一: 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
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP