js数据类型的判断方法

前言

　　js数据类型大致可分为八种，这八种又可以分为两部分 :

1. 基本数据类型 : Number , BigInt(ie不兼容) , String , Boolean , Null , Undefined , Symbol

2. 引用数据类型 : Object (包括Object , Array , Function , Date ... )

 

常用判断方法

typeof 判断 

查看字面量或者变量的数据类型

typeof能判断如下类型 : number , string , boolean , symbol , undefined , function ; 而null , Array , Object 的判断检测结果均为object，因此这三者的鉴别需要进一步判断。

typeof 1                // 'number'
typeof '1'              // 'string'
typeof true             // 'boolean'
typeof {}               // 'object'
typeof []               // 'object'
typeof null             //  'object'
typeof new Date()       // 'object'
typeof (() => {})       // 'function'
typeof undefined        // 'undefined'
typeof Symbol(1)        // 'symbol'                

 

instanceof 判断 （instanceof - JavaScript | MDN (mozilla.org)）

可以检测构造函数(constructor)的prototype属性是否位于实例对象的原型链上 , 一般用于判断自定义的构造函数实例

({}) instanceof Object // true
[] instanceof Array // true

function Foo() {}
const foo= new Foo();
foo instanceof Foo// true
foo instanceof Object // true

ps ：由于是利用对象prototype的constructor进行判断，因此只有对象构造的数据类型变量适用该方法，不适用于非对象类型的变量

let str= 'string数据类型字符串';
let strObject= new String('Object构造的string字符串');
str instanceof String;  // false
strObject instanceof String;  // true

 

constructor 判断

能判断如下类型 : Number , String , Boolean , Symbol , Function , Object , Array ; null 和 undefined没有constructor属性，所以不能判断

console.log((1).constructor === Number);　　　　// true
console.log(''.constructor === String);　　　　 // true
console.log(false.constructor === Boolean);　　// true
console.log([].constructor === Array);　　　　 // true
console.log(({}).constructor === Object);　　 // true
console.log((function foo() {}).constructor === Function);// true
console.log(Symbol('1').constructor === Symbol);// true

 

Object.prototype.toString 判断

利用基础数据类型都可以通过引用数据类型包装得到的特性，即Object是其他基础数据类型的父类，重写Object的toString方法，用来判断Array, Null等较难判断的数据类型

function Foo(){};
const foo = new Foo();

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(undefined); // '[object Undefined]'
Object.prototype.toString.call(null); // '[object Null]'
Object.prototype.toString.call(Symbol(1)); // '[object Symbol]'
Object.prototype.toString.call(Foo); // '[object Function]'
Object.prototype.toString.call(foo); // '[object Object]' , 实例化对象属于Object
Object.prototype.toString.call({}); // '[object Object]'
Object.prototype.toString.call([]); // '[object Array]'
Object.prototype.toString.call(NaN); // '[object Number]' ，此方法判断NaN也属于Number

 

判断 Object , Array 的方法

判断 Object 基础对象类型

Object.prototype.toString.call({key : 'value'}) ==='[object Object]'

补充：判断空对象

function Obj(){
  // 1. 利用转换为JSON字符串的方法
  Obj.prototype.isEmptyJson = function(obj){
    return JSON.stringify(obj)==='{}'
  }
  // 2. 利用keys遍历自身非原型属性返回的数组长度进行判断
  Obj.prototype.isEmptyKeys = function(obj) {
    return Object.keys(obj).length === 0;
  }
  // 3. 利用枚举，逐个检查的方法
  Obj.prototype.isEmptyIterator = function(obj) {
    // 有则进入迭代，没有直接返回true
    for (var key in obj) {
      return false;
    }
    return true;
  }
}
const obj = new Obj()
const emptyObject = {}
console.log(obj.isEmptyJson(emptyObject)) //true
console.log(obj.isEmptyKeys(emptyObject)) //true
console.log(obj.isEmptyIterator(emptyObject)) //true

const notEmptyObject = {name:'zs'}
console.log(obj.isEmptyJson(notEmptyObject)) //false
console.log(obj.isEmptyKeys(notEmptyObject)) //false
console.log(obj.isEmptyIterator(notEmptyObject)) //false

 

判断是否为数组Array

function Arr(){
  // 1. 利用es6的新方法Array.isArray()
  Arr.prototype.isArray1 = function(arr){
    return Array.isArray(arr)
  }
  // 2. 利用instanceof进行判断
  Arr.prototype.isArray2 = function(arr) {
    return arr instanceof Array; 
  }
  // 3. 利用constructor进行判断
  Arr.prototype.isArray3 = function(arr){
    if(arr) return arr.constructor === Array
    return false
  }
  // 4.利用重写toString方法返回的"[object Array]"进行判断
  Arr.prototype.isArray4 = function(arr) {
    if(arr) return Object.prototype.toString.call(arr).indexOf('Array')>-1;
    return false
  }
  
}
const arr = new Arr()
const isArr = []
console.log(arr.isArray1(isArr)) //true
console.log(arr.isArray2(isArr)) //true
console.log(arr.isArray3(isArr)) //true
console.log(arr.isArray4(isArr)) //true