總結js的幾種數據類型檢測方法


在此總結自己常用的幾種js判斷數據類型的方法。
定義幾個變量備用:

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可以檢測出的數據類型為:
    string、
    number、
    function、
    undefined、
    boolean
  2. typeof 不能判斷出object中的對象、數組等方法。typeof null也為object
  3. 此方法的返回值都是字符串數據類型。
    console.log(typeof b=="number");//true
    console.log(typeof (typeof b));//string

2. instanceof

instanceof 檢測對象數據類型(js中一切接對象) 表示當左側為右側的實例時返回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 表示當左側為右側的實例時返回true。所以 a 和 b 返回的是false。這是因為這里 a 和 b 為保存字符串和數字類型值得變量。不是他們的實例:
    let a=new String('string');
    let b=new Number(111);
    console.log(a instanceof String);//true
    console.log(b instanceof Number);//true
    這樣通過new一個實例就為true了。
    舉這個例子只是說明instanceof的使用,現實中通過instanceof檢測string和number類型沒有太大意義,一般不使用。
  2. 注意 instanceof 后對象類型的大小寫。
  3. 此方法常用一些數據類型的判斷中:
    if(d instanceof Array){//如果d為數組執行某方法
    console.log(d);
    }
    此方法有個問題:d不僅為Array的實例,也為Object的實例。
    console.log(c instanceof Object);//true
    console.log(d instanceof Object);//true
    console.log(e instanceof Object);//true
    所以此方法常用在判斷中,只需要判斷d是否為Array數據類型即可。

3. constructor

constructor 為實例原型上的方法,指向他的構造函數。

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的部分問題,之所以說是部分問題是因為:

function One() {} function Two() {} One.prototype = new Two();//此時將One構造函數的原型指向Two構造函數的一個實例。 let obj = new One(); console.log(obj.constructor === One);//false console.log(obj.constructor === Two);//true 

修改obj的原型為Two的實例,這時obj的constructor為Two。

這是因為:已經將One構造函數的原型指向Two構造函數的實例。雖然obj為One構造函數的實例,但是它的原型已經為Two構造函數的實例,已經沒有constructor方法,根據原型鏈會繼續向上尋找。找到的是Two

解決辦法為重新手動賦值一下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 

雖然很長、很繁瑣但是能夠准確地判斷數據類型了。

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"


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM