javascript如何判斷變量的數(shù)據(jù)類型

曹金海發(fā)布于2019-08-22 10:59 / 588人閱讀

摘要：除和外，所有的數(shù)據(jù)類型都是可以轉(zhuǎn)化為對象，而如果是對象，就肯定有構(gòu)造函數(shù)。特性因為和沒有構(gòu)造函數(shù)，因此不能用此方法來判斷。由于同一條原型繼承鏈上的各個對象的構(gòu)造函數(shù)都不一樣，因此，此方法可以區(qū)分開繼承鏈上的各個自定義數(shù)據(jù)類型。

typeof 用法示例

var arr = [];
typeof arr;    //"object"
typeof(arr);    //"object"

typeof實際上是一個一元運算符，因此可以用上述代碼所示的兩種用法。

typeof所支持的數(shù)據(jù)類型

從上表可以看出，typeof支持的數(shù)據(jù)類型還是比較齊全的，除了倆比較特殊以外：

對Null使用typeof返回object，這跟我們的認(rèn)知還是有一定差距的，這是javascript的一個設(shè)計上的bug，ECMAScript 6中有提議修改此bug，但已經(jīng)被否決了；不過只要加個邏輯非!運算符，就能把Null這種情況給排除了。

除了function以外，其它具體的對象類型都無法判斷出來。

typeof瀏覽器兼容性注意點 對正則表達式字面量的類型判斷在某些瀏覽器中不符合標(biāo)準(zhǔn)：

typeof /s/ === "function"; // Chrome 1-12 , 不符合 ECMAScript 5.1
typeof /s/ === "object"; // Firefox 5+ , 符合 ECMAScript 5.1

IE 宿主對象是對象而不是函數(shù)

在 IE 6, 7 和 8 中，大多數(shù)的宿主對象是對象，而不是函數(shù)，例如：

typeof alert === "object"

instanceof 用法示例

// 定義構(gòu)造函數(shù)
function C(){} 
function D(){} 

var o = new C();

// true，因為 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false，因為 D.prototype不在o的原型鏈上
o instanceof D; 

o instanceof Object; // true,因為Object.prototype.isPrototypeOf(o)返回true

instanceof是一個二元運算符。

instanceof總結(jié)

javascript中的原生對象以及用戶的自定義對象基本上都能利用instanceof識別出來，除了Null和Undefined。

instanceof無法區(qū)分開同一原型繼承鏈：

function A(){
    //...
}

function B(){
    //...
}

function C(){
    //...
}

var a = new A();
B.prototype = a;

var b = new B();
C.prototype = b;

var c = new C();

c instanceof A;    //true
c instanceof B;    //true
c instanceof C;    //true

Object.prototype.toString.call 用法示例

function type(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1);
}
type(1);    //"Number"
type("1");    //"String"
type(true);    //"Boolean"
type(undefined);    //"Undefined"
type(null);    //"Null"
type({});    //"Object"
type([]);    //"Array"
type(new Date);    //"Date"
type(/d/);    //"RegExp"
type(function() {});    //"Function"

function Point(x, y) {
    //
}
type(new Point(1, 2));    //"Object"

用法解析

從以上用法示例可以看出，這個基于Object.prototype.toString.call封裝好的函數(shù)用法跟typeof非常相似，但是在支持的數(shù)據(jù)類型上比typeof強多了，所有的javascript原生數(shù)據(jù)類型都能判斷出來。遺憾的是，Object.prototype.toString.call也不是萬能的方案：無法識別自定義的對象類型。
Object.prototype.toString.call實際上是返回這樣形式的值：

Object.prototype.toString.call(1);    //"[object Number]"
Object.prototype.toString.call("1");    //"[object String]"

因此只要用slice方法把數(shù)據(jù)類型“切”出來就成了。

constructor（構(gòu)造函數(shù)） 用法示例

/*
* 獲取對象構(gòu)造函數(shù)名稱
*/
function getConstructorName(obj){
    return obj && obj.constructor && obj.constructor.toString().match(/functions*([^(]*)/)[1]; //利用obj && obj.constructor來判斷null和undefined
}

用法解析

這是一種非常巧妙的判斷數(shù)據(jù)類型的方法——利用構(gòu)造函數(shù)判斷數(shù)據(jù)類型，這是基于javascript的特性/規(guī)范：

對象的構(gòu)造函數(shù)名就是該數(shù)據(jù)類型。

除Null和Undefined外，所有的數(shù)據(jù)類型都是/可以轉(zhuǎn)化為對象，而如果是對象，就肯定有構(gòu)造函數(shù)。

特性

因為Null和Undefined沒有構(gòu)造函數(shù)，因此不能用此方法來判斷。

由于同一條原型繼承鏈上的各個對象的構(gòu)造函數(shù)都不一樣，因此，此方法可以區(qū)分開繼承鏈上的各個自定義數(shù)據(jù)類型。

function A(){
    //...
}

function B(){
    //...
}

function C(){
    //...
}

var a = new A();
B.prototype = a;

var b = new B();
C.prototype = b;

var c = new C();

getConstructorName(a);    //A
getConstructorName(b);    //B
getConstructorName(c);    //C

總結(jié)

以上這四種方法都有不同程度的缺陷，如果從實用性的角度來考慮，可以綜合一下：

function type(obj) {console.dir(obj);
  if(!obj) {
    return Object.prototype.toString.call(obj).slice(8, -1);
  }
  return obj.constructor.toString().match(/functions*([^(]*)/)[1];
}
var t = type(1) // t==="number"
var t = type(new Number(1)) // t==="number"
var t = type("abc") // t==="string"
var t = type(new String("abc")) // t==="string"
var t = type(true) // t==="boolean"
var t = type(undefined) // t==="undefined"
var t = type(null) // t==="null"
var t = type({}) // t==="object"
var t = type([]) // t==="array"
var t = type(new Date) // t==="date"
var t = type(/d/) // t==="regexp"
var t = type(function(){}) // t==="function"

參考資料

typeof - JavaScript | MDN
instanceof - JavaScript | MDN

GPU云服務(wù)器云服務(wù)器 js如何判斷類型的數(shù)據(jù)類型 jsp 判斷變量類型 php變量的數(shù)據(jù)類型 js判斷時間類型的數(shù)據(jù)類型

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91594.html

發(fā)表評論

登陸后可評論

0條評論

曹金海

男|高級講師

我要關(guān)注我要私信

TA的文章

ZJI：新上香港葵灣4C站群服務(wù)器，4C段236個IP，八折優(yōu)惠月付1400元起

閱讀 3116·2021-10-12 10:20
阿里云服務(wù)器爆品秒殺：新用戶低至0.05折起

閱讀 2835·2021-09-27 13:56
大型項目源碼集合「GitHub 熱點速覽 v.21.39」

閱讀 806·2021-09-27 13:36
基于Opencv的手勢識別

閱讀 1444·2021-09-26 09:46
前端開發(fā)：那些我遇到的bug (持續(xù)更新)

閱讀 2433·2019-08-30 14:02
CSS:關(guān)于元素高度與寬度的討論系列文章（二）

閱讀 2700·2019-08-28 18:14
深入理解JavaScript（二）：由一道題來思考閉包

閱讀 1280·2019-08-26 10:32
Vue.js SSR 內(nèi)容總結(jié)

閱讀 1717·2019-08-23 18:25

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript如何判斷變量的數(shù)據(jù)類型

相關(guān)文章

**分析 JavaScript 的數(shù)據(jù)類型與變量**

**關(guān)于javascript中類型判斷的那些疑惑**

JavaScript入門

js面試題（上）

javascript基礎(chǔ)篇小結(jié)

發(fā)表評論

0條評論

曹金海

男|高級講師

TA的文章

ZJI：新上香港葵灣4C站群服務(wù)器，4C段236個IP，八折優(yōu)惠月付1400元起

阿里云服務(wù)器爆品秒殺：新用戶低至0.05折起

大型項目源碼集合「GitHub 熱點速覽 v.21.39」

基于Opencv的手勢識別

前端開發(fā)：那些我遇到的bug (持續(xù)更新)

CSS:關(guān)于元素高度與寬度的討論系列文章（二）

深入理解JavaScript（二）：由一道題來思考閉包

Vue.js SSR 內(nèi)容總結(jié)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript如何判斷變量的數(shù)據(jù)類型

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！