方法一:采用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等技術文章、視頻教程和開源項目,請關注微信公眾號——全棧弄潮兒。
微信公眾號