js中判断对象数据类型的方法

方法一：采用typeof

let fn = function(n){
    console.log(n);
}
let str = 'string';
let arr = [1,2,3];
let obj = {
    a:123,
    b:456
};
let num = 1;
let b = true;
let n = null;       
let u = undefined;
//方法一使用typeof方法。
console.log(typeof str);//string
console.log(typeof arr);//object
console.log(typeof obj);//object
console.log(typeof num);//number
console.log(typeof b);//boolean
console.log(typeof n);//null是一个空的对象
console.log(typeof u);//undefined
console.log(typeof fn);//function

通过上面的检测我们发现typeof检测的Array和Object的返回类型都是Object，因此用typeof是无法检测出来数组和对象的。

方法二：instanceof

let o = { 
           'name':'lee'
};
 let a = ['reg', 'blue'];
 console.log(o instanceof Object);// true
 console.log(a instanceof Array);//  true
 console.log(o instanceof Array);//  false

注意：instaceof只可以用来判断数组和对象，不能判断string和boolean类型，要判断string和boolean类型需要采用方法四。
由于数组也属于对象因此我们使用instanceof判断一个数组是否为对象的时候结果也会是true。如：

console.log(a instanceof Object);//true。

下面封装一个方法进行改进：

let o = { 
    'name': 'lee'
};
let a = ['reg', 'blue'];
let getDataType = function(o) {
    if(o instanceof Array) {
        return 'Array';
    }else if( o instanceof Object ) {
        return 'Object';
    }else{
        return 'param is no object type';
    }
};
console.log(getDataType(o));//Object。
console.log(getDataType(a));//Array。

方法三：使用constructor方法

let o = { 
    'name': 'lee'
};
let a = ['reg', 'blue'];
console.log(o.constructor == Object);//true
console.log(a.constructor == Array);//true

可以看出constructor可以区分Array和Object。

let n=true;
n.constructor==Boolean  //true
let num=1;
num.constructor==Number  //true
let str='hello world';
str.constructor==String     //true
let num=new Number();

num.constructor==Number   //true

不过要注意，constructor属性是可以被修改的，会导致检测出的结果不正确

function Person(){
  
}
function Student(){
  
}
Student.prototype = new Person();
let John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true

除了undefined和null，其他类型的变量均能使用constructor判断出类型。

方法四：Object.prototype.toString.call() ，这个方法是最佳的方案

Object.prototype.toString.call(123)
//"[object Number]"

Object.prototype.toString.call('str')
//"[object String]"

Object.prototype.toString.call(true)
//"[object Boolean]"

Object.prototype.toString.call({})
//"[object Object]"

Object.prototype.toString.call([])
//"[object Array]"

// 封装一个方法判断数组和对象
function isType(obj){
       var type = Object.prototype.toString.call(obj);
       if(type == '[object Array]'){
              return 'Array';
        }else if(type == '[object Object]'){
              return "Object"
        }else{
              return 'param is no object type';
        }
}
console.log(isType(o));//Object
console.log(isType(a));//Array

// 下面是更简洁的封装，来自vue源码

var _toString = Object.prototype.toString;

function toRawType (value) {return _toString.call(value).slice(8, -1)} // 从第8位开始（不包括第8位）到数组结尾处

Object.prototype.toString方法的在被调用的时候，会执行如下的操作步骤：

获取对象的类名（对象类型）。

[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性。在规范中，[[Class]]是这么定义的:
内部属性，[[Class]] 一个字符串值，表明了该对象的类型。

然后将[object 获取的对象类型的名]组合为字符串。
返回字符串 “[object Array]” 。

经典前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

微信公众号