js中檢測(cè)數(shù)據(jù)類型的常用方法(數(shù)據(jù)類型檢測(cè))

在此總結(jié)自己常用的幾種js判斷數(shù)據(jù)類型的方法。
定義幾個(gè)變量備用:

let a="string";
let b=111;
let c={};
let d=[1,2,3];
let e=function () {
    console.log("eee");
}
let f = undefined;
let g = null;
let h = new Date();
let i = /test/;
let j = true;

1. typeof

console.log(typeof a);//string
console.log(typeof b);//number
console.log(typeof c);//object
console.log(typeof d);//object
console.log(typeof e);//function
console.log(typeof f);//undefined
console.log(typeof g);//object
console.log(typeof h);//object
console.log(typeof i);//object
console.log(typeof j);//boolean
  1. typeof可以檢測(cè)出的數(shù)據(jù)類型為:
    string、
    number、
    function、
    undefined、
    boolean
  2. typeof 不能判斷出object中的對(duì)象、數(shù)組等方法。typeof null也為object
  3. 此方法的返回值都是字符串?dāng)?shù)據(jù)類型。
    console.log(typeof b=="number");//true
    console.log(typeof (typeof b));//string

2. instanceof

instanceof 檢測(cè)對(duì)象數(shù)據(jù)類型(js中一切接對(duì)象) 表示當(dāng)左側(cè)為右側(cè)的實(shí)例時(shí)返回true。

console.log(a instanceof String);//false
console.log(b instanceof Number);//false
console.log(c instanceof Object);//true
console.log(d instanceof Array);//true
console.log(e instanceof Function);//true
console.log(h instanceof Date);//true
console.log(i instanceof RegExp);//true
  1. instanceof 表示當(dāng)左側(cè)為右側(cè)的實(shí)例時(shí)返回true。所以 a 和 b 返回的是false。這是因?yàn)檫@里 a 和 b 為保存字符串和數(shù)字類型值得變量。不是他們的實(shí)例:
    let a=new String('string');
    let b=new Number(111);
    console.log(a instanceof String);//true
    console.log(b instanceof Number);//true
    這樣通過new一個(gè)實(shí)例就為true了。
    舉這個(gè)例子只是說明instanceof的使用,現(xiàn)實(shí)中通過instanceof檢測(cè)string和number類型沒有太大意義,一般不使用。
  2. 注意 instanceof 后對(duì)象類型的大小寫。
  3. 此方法常用一些數(shù)據(jù)類型的判斷中:
    if(d instanceof Array){//如果d為數(shù)組執(zhí)行某方法
    console.log(d);
    }
    此方法有個(gè)問題:d不僅為Array的實(shí)例,也為Object的實(shí)例。
    console.log(c instanceof Object);//true
    console.log(d instanceof Object);//true
    console.log(e instanceof Object);//true
    所以此方法常用在判斷中,只需要判斷d是否為Array數(shù)據(jù)類型即可。

3. constructor

constructor 為實(shí)例原型上的方法,指向他的構(gòu)造函數(shù)。

console.log(c.constructor===Object);//true
console.log(d.constructor===Array);//true
console.log(e.constructor===Function);//true
console.log(h.constructor=== Date);//true
console.log(i.constructor=== RegExp);//true
console.log(c.constructor===Object);//true
console.log(d.constructor===Object);//false
console.log(e.constructor===Object);//false
console.log(h.constructor=== Object);//false
console.log(i.constructor=== Object);//false

cosntructor可以解決instanceof的部分問題,之所以說是部分問題是因?yàn)椋?/p>

function One() {}
function Two() {}
One.prototype = new Two();//此時(shí)將One構(gòu)造函數(shù)的原型指向Two構(gòu)造函數(shù)的一個(gè)實(shí)例。
let obj = new One();

console.log(obj.constructor === One);//false
console.log(obj.constructor === Two);//true

修改obj的原型為Two的實(shí)例,這時(shí)obj的constructor為Two。

這是因?yàn)椋阂呀?jīng)將One構(gòu)造函數(shù)的原型指向Two構(gòu)造函數(shù)的實(shí)例。雖然obj為One構(gòu)造函數(shù)的實(shí)例,但是它的原型已經(jīng)為Two構(gòu)造函數(shù)的實(shí)例,已經(jīng)沒有constructor方法,根據(jù)原型鏈會(huì)繼續(xù)向上尋找。找到的是Two

解決辦法為重新手動(dòng)賦值一下obj的constructor

function One() {}
function Two() {}
One.prototype = new Two();
let obj = new One();
obj.constructor=One;

console.log(obj.constructor === One);//true
console.log(obj.constructor === Two);//false

4. Object.prototype.toString.call()

let a = "string";
let b = 111;
let c = {};
let d = [1, 2, 3];
let e = function () {
    console.log("eee");
}
let f = undefined;
let g = null;
let h = new Date();
let i = /test/;
let j = true;

console.log(Object.prototype.toString.call(a) === '[object String]');//true
console.log(Object.prototype.toString.call(b) === '[object Number]');//true
console.log(Object.prototype.toString.call(c) === '[object Object]');//true
console.log(Object.prototype.toString.call(d) === '[object Array]');//true
console.log(Object.prototype.toString.call(e) === '[object Function]');//true
console.log(Object.prototype.toString.call(f) === '[object Undefined]');//true
console.log(Object.prototype.toString.call(g) === '[object Null]');//true
console.log(Object.prototype.toString.call(h) === '[object Date]');//true
console.log(Object.prototype.toString.call(i) === '[object RegExp]');//true

console.log(Object.prototype.toString.call(c) === '[object Object]');//true
console.log(Object.prototype.toString.call(d) === '[object Object]');//false
console.log(Object.prototype.toString.call(e) === '[object Object]');//false

雖然很長(zhǎng)、很繁瑣但是能夠準(zhǔn)確地判斷數(shù)據(jù)類型了。

5. jquery.type()

jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( null ) === "null"
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( /test/ ) === "regexp"

如果使用jquery可以使用jquery.type方法:很強(qiáng)大,還費(fèi)別的勁兒干嘛。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容