数据类型8种判断方式

71 阅读2分钟

typeof

主要用途:操作数的类型,只能识别基础数据类型和引用类型。

特别注意: null, NaN, document.all

console.log(typeof(NaN)); //number
console.log(typeof(null)); //object
console.log(typeof(document.all)) //undefined

注意事项:已经不是绝对安全(暂时性死区

constructor

i.constuctor指向创建实例对象的构造函数.

console.log('1'.constructor === String);  // true
console.log(new Number(1).constructor === Number); // true
console.log(true.constructor === Boolean); // true
console.log(alert.constructor === Function); // true
console.log([].constructor === Array); // true
console.log(new Date().constructor === Date); // true

注意事项:

  1. null和undefined

null和undefined没有constructor。

  1. constuctor可以被改写
String.prototype.constructor = function a() {
    return {}
}
console.log("a".constructor)

instanceof

原理:就是原型链上查找,查到即是其实例

A instanceof B  //判断A是否是Bd的实例,返回Boolean 

注意事项:

当一个页面存在多个iframe时,也就是存在多个全局变量window,instanceof的判断会被来自不同的iframe的数据所干扰,导致不可信。

假设:页面pageA 通过iframe内嵌了页面pageB, 此时pageB传递了一个数组 let arrB = []到页面 pageA, 若在pageA使用instanceof判断数组arrB会出现 arrB instanceof Array // false 主要原因是因为 arrB 是由pageB上的Array构造出来的

要避免这种问题可以使用Es6提供的数组静态方法 Array.isArray, 或者我们即将提到的toString方法进行判断: Array.isArray(arrB) // true

isPrototypeOf

用于判断一个对象是否是另一个对象的原型.

if (Array.prototype.isPrototypeOf(obj)) {
  // obj 是一个数组的原型
}

在上面的代码中,我们使用 Array.prototype.isPrototypeOf(obj) 来判断 obj 是否是一个数组的原型。如果返回 true,则说明 obj 是一个数组的原型,否则说明它不是数组的原型。

需要注意的是,isPrototypeOf 方法只能用于判断一个对象是否是另一个对象的原型,它不能判断一个对象是否是某个特定的类。如果要判断一个对象是否属于某个类,应该使用 instanceof 运算符。

Object.prototype.toString

原理:通过函数的动态this特性,返回其数据类型, '[object Date]'

思考:

  1. 自定义对象如何获得 [object MyArray]类型?

Symbol.toStringTag是Es6新增的属性,Object.prototype.toString会读取该值,通过自定义该值,可以实现获取自定义对象的类型。

class MyArray {
    get [Symbol.toStringTag](){
        return "MyArray"
    }
}

var pf = console.log;
var a = new MyArray();
pf(Object.prototype.toString.call(a) ) //[object MyArray]
  1. Object.prototype.toString.call(Boolean.prototype)
const pf = console.log;
pf(typeof Number.prototype) //object
pf(Object.prototype.toString.call(Boolean.prototype)) //[object Boolean]

鸭子类型检测(候选方案,不常用)

原理: 检查自身,属性的类型或者执行结果的类型 例子: kindOf 与 p-is-promise

Symbol.toStringTag(es6)

原理:Object.prototype.toString会读取该值.

适用场景:需自定义类型.

注意事项:兼容性

等比较

原理: 与某个固定值进行比较

适用场景: undefined, window , document, null等.

 function isWindow(val){
        return val===document.window;
    }  
 console.log(isWindow(document.window)); //true
 
 
 function isUndefined(val){
    return val===void 0;
}
console.log(isUndefined(1)); //false
console.log(isUndefined(undefined)); //true

总结

image.png