方法一：采用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方法的在被調用的時候，會執行如下的操作步驟：

1. 獲取對象的類名（對象類型）。

[[Class]]是一個內部屬性,所有的對象(原生對象和宿主對象)都擁有該屬性。在規范中，[[Class]]是這么定義的:
內部屬性，[[Class]] 一個字符串值，表明了該對象的類型。

2. 然后將[object 獲取的對象類型的名]組合為字符串 。

3. 返回字符串 “[object Array]” 。

經典前端面試題每日更新，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview。

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公眾號——全棧弄潮兒。

微信公眾號