JS判断数据类型方法的总结开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天。 js 类型检测判

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

typeof 检测基础数据类型和函数

const type = cate => {
  console.log(typeof cate);
};

type(123) ;                          //number
type("abcdef");                      //string
type(true) ;                         //boolean
type([1, 2, 3, 4]);                  //object
type( { name: "TiGa" });             //object
type(()=>{                           //function 
    console.log("This is Function");
});
type(undefined);                    //undefined
type(null);                         //object
type(new Date());                   //object
type(new Error());                  //object
type(/^[a-zA-Z]{5,20}$/);           //object
type(Symbol(1));                    //symbol

由此可见typeof对于基本数据类型和函数可以精准检测，但是如果检测引用数据类型和null 会直接返回object

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

1.  不能检测`基本数据类型`     除非转为对应的包装类对象
2.  `只要能在原型链上找到构造函数`，就返回 true，所以类型可能不准确
3.  原型链可能被修改，导致检测结果不准确

[] instanceof Array            //true   
[] instanceof Object            //true   
const fun=()=>{}
fun instanceof Object          //true
fun instanceof Function        //true

const date=new Date();
date instanceof  Object       //true
date instanceof  Date         //true

Constructor 返回实例对象的构造函数

undefined和null没有constructor属性，所以判断时代码可能会报错
由于constructor属性是可以变更的，也会导致检测出的结果不正确

let num= 111
let str= "TiGa"
let arr= []
let obj= {}
let reg= /[1-9]/
let date=new Date();
let err= new Error()
let sym=Symbol(1)
let und=undefined
let nul=null
console.log(num.constructor);       //[Function: Number]
console.log(str.constructor);       //[Function: String]
console.log(arr.constructor);       //[Function: Array]
console.log(obj.constructor);       //[Function: Object]
console.log(reg.constructor);       //[Function: RegExp]
console.log(date.constructor);      //[Function: Date]
console.log(err.constructor);       //[Function: Error]
console.log(sym.constructor);       //[Function: Symbol]

无构造函数     报错
console.log(und.constructor);         
console.log(nul.constructor);

Object.prototype.toString.call() 最准确

它返回的值是一个形如 [object Object] 的字符串

const fun=()=>{}

Object.prototype.toString.call(123), // '[object Number]' 
Object.prototype.toString.call("TiGa"), // '[object String]' 
Object.prototype.toString.call(true), // '[object Boolean]' 
Object.prototype.toString.call([]), // '[object Array]'
Object.prototype.toString.call({}), // '[object Object]' 
Object.prototype.toString.call(fun), // '[object Function]' 
Object.prototype.toString.call(undefined), // '[object Undefined]' 
Object.prototype.toString.call(null), // '[object Null]' 
Object.prototype.toString.call(new Date()), // '[object Date]' 
Object.prototype.toString.call(new RegExp(/[1-9]/)), // '[object RegExp]' 
Object.prototype.toString.call(new Error()) // '[object Error]'

自定义类型 Symbol.toStringTag

Object.prototype.toString 方法，之所以对不同的数据类型，返回不同的标识字符串，就是因为 Symbol.toStringTag 。 Symbol.toStringTag 是一个内置符号属性，它的值是一个字符串，用于表示一个对象的默认描述，也就是调用 Object.prototype.toString 会返回的内容，比如：

let obj = {}
obj[Symbol.toStringTag] = 'TiGa'
console.log(Object.prototype.toString.call(obj)) // [object TiGa]

为自定义对象指定类型

class Animal{
    get[Symbol.toStringTag](){
        return 'Animal'
    }
}
let person = new Animal()
console.log(Object.prototype.toString.call(Animal)) // [object Animal]

Object.prototype.isPrototypeOf

isPrototypeOf 和 instanceof 类似，都是基于原型链和原型对象去做判断的。它用来检查一个对象是否存在于另一个对象的原型链上。

class Person {
  name;
  age;
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
}
class Man extends Person {
  constructor(name,age) {
    super()
  }
}
let m1 = new Man("Tiga",30000);
console.log(m1);
console.log(Person.prototype.isPrototypeOf(m1));    //true

Array.isArray() js特别提供的数组检测方法

Array.isArray([])     //true

Number.isNaN() 检测元素是否位数字

JS 中有一个特殊的“数字” NaN，表示 not a number，不是一个数字，但它却归属于数字类型：

console.log(typeof NaN) // 'number'
//这个方法就是用看来检测元素是否为 `NaN`
Number.isNaN(NaN) // true
Number.isNaN('123') // false

关于数据类型的检测，如果你还有其他的方式，欢迎评论补充，一起学习。

JS判断数据类型方法的总结