詳解JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型
js是弱類型語(yǔ)言,或者說(shuō)是動(dòng)態(tài)語(yǔ)言,在定義變量時(shí)我們可以不提前聲明變量的類型,也可以在變量聲明后賦予不同類型的值。變量的類型會(huì)在程序運(yùn)行的過(guò)程中被確定。對(duì)于開(kāi)發(fā)者來(lái)說(shuō),雖然可以不用頻繁的定義不同的數(shù)據(jù)類型,但是如果是比較復(fù)雜的項(xiàng)目,或者接手他人的項(xiàng)目,發(fā)現(xiàn)一個(gè)變量到處被使用并且賦予不同類型的值,也許頭都大了。變量類型的不確定還可能出現(xiàn)運(yùn)行時(shí)報(bào)錯(cuò):xxx is not a function
,根本原因就是不同的數(shù)據(jù)類型所具有的方法是不一樣的,也許有的大家都有,因此不報(bào)錯(cuò);但是如果是特有的,或者有差異的,不判斷變量的類型就直接調(diào)用,就有可能出現(xiàn)生產(chǎn)bug。那么應(yīng)該如何才能獲取準(zhǔn)確的變量類型呢?
判斷類型常用的方法
typeof
js內(nèi)置的一個(gè)運(yùn)算符,返回一個(gè)字符串,表示操作數(shù)的類型。可用于number、string、boolean等值類型,function函數(shù),object等引用類型,如果是判斷對(duì)象類型,則只能得到object
,無(wú)法得到具體的值。
console.log(typeof ''); // string console.log(typeof (() => {})); // function console.log(typeof Symbol()); // symbol console.log(typeof undefined); // undefined console.log(typeof null); // object console.log(typeof []); // object console.log(typeof {}); // object
我們可以看到,數(shù)組、對(duì)象通過(guò)typeof
都是返回了object
,無(wú)法細(xì)分;其中值得注意的是typeof null
結(jié)果也是object
。這是因?yàn)樵趈s的最初實(shí)現(xiàn)中,js中的值是由一個(gè)表示類型的標(biāo)簽以及實(shí)際數(shù)據(jù)值組合表示的。對(duì)象類型的標(biāo)簽是0,我們都知道null
表示空,在大多數(shù)平臺(tái)下其值為0x00
,因此對(duì)象和null
的類型標(biāo)簽是一樣的。類型標(biāo)簽一樣,但是null
卻沒(méi)有正常對(duì)象的屬性以及方法。
instanceof
instanceof
也是js內(nèi)置的一個(gè)運(yùn)算符,用于判斷兩個(gè)參數(shù)之間是否存在聯(lián)系,實(shí)現(xiàn)原理是檢測(cè)構(gòu)造函數(shù)的prototype
屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。如果是,則返回true;否則,返回false。
console.log({} instanceof Array); // false console.log([] instanceof Array); // true console.log({} instanceof Object); // true console.log([] instanceof Object); // true
instanceof
是判斷兩個(gè)參數(shù),并不會(huì)直接獲取變量的類型,可以通過(guò)枚舉的方式簡(jiǎn)介獲取。
toString
每一個(gè)對(duì)象都有一個(gè)toString()
方法,因?yàn)槊總€(gè)對(duì)象都會(huì)繼承自Object
??赡茉诖蠖鄶?shù)人的印象中,toString()
只是用來(lái)返回一個(gè)字符串,并沒(méi)有什么特別的地方,那是因?yàn)槟憧吹降?code>toString()基本上都是被重寫后的,原始的toString()
是可以用來(lái)獲取對(duì)象的類型的。
舉個(gè)例子:
const o = new Object(); o.toString(); // [object Object] const arr = [1,2,3]; // 數(shù)組也會(huì)繼承自O(shè)bject arr.toString(); // '1,2,3',因?yàn)閿?shù)組重寫了toString
每個(gè)對(duì)象都能通過(guò)Object.prototype.toString.call(thisArg)
或者Object.prototype.toString.apply(thisArg)
來(lái)獲取其類型:
console.log(Object.prototype.toString.call(null)); // [object Null] console.log(Object.prototype.toString.call(undefined)); // [object Undefined] console.log(Object.prototype.toString.call([])); // [object Array] console.log(Object.prototype.toString.call({})); // [object Object] console.log(Object.prototype.toString.call(() => {})); // [object Function]
每次都調(diào)用js內(nèi)置的API還是有點(diǎn)麻煩,所以我們還是封裝一個(gè)函數(shù)getType
封裝一個(gè)獲取類型的函數(shù)
typeof + instanceof(不推薦)
之前我們也提到了typeof
可以獲取部分?jǐn)?shù)據(jù)類型,instanceof
可以用枚舉來(lái)表示剩下的類型,那么這兩者結(jié)合是不是就可以實(shí)現(xiàn)getType
了呢?
function getType(obj) { if (typeof obj === 'object') { if (obj instanceof Array) return 'array'; if (obj instanceof Map) return 'map'; if (obj instanceof Set) return 'set'; if (obj instanceof RegExp) return 'regexp'; // 盡可能枚舉類型,最后兜底返回object return 'object' } return (typeof obj); } console.log(getType(null)); // object console.log(getType(undefined)); // undefined console.log(getType('')); // string console.log(getType([])); // array console.log(getType(/a/)); // regexp console.log(getType(new WeakMap())); // object console.log(getType(new WeakSet())); // object
使用此方式雖然可以實(shí)現(xiàn)getType
,但是存在弊端;
- 由于是枚舉,導(dǎo)致代碼長(zhǎng)度可能會(huì)很長(zhǎng)
- 枚舉的數(shù)據(jù)類型可能有限,未能覆蓋常用數(shù)據(jù)類型
- 如果要新增類型,則需要修改代碼
toString
關(guān)于toString()
的用法剛剛已經(jīng)說(shuō)了,我們以此來(lái)實(shí)現(xiàn)一個(gè)getType
function getType(obj) { const originType = Object.prototype.toString.call(obj); // 獲取類型。返回格式為[object type],需要提取出type的值 const firstSpaceIndex = originType.indexOf(' '); // 找到第一個(gè)空格所在下標(biāo) const type = originType.slice(firstSpaceIndex + 1, -1); // 跳過(guò)空格,截取到倒數(shù)第一個(gè)字符(不含最后一個(gè)) return type.toLowerCase(); // 轉(zhuǎn)換為小寫 } console.log(getType(null)); // null console.log(getType(undefined)); // undefined console.log(getType('')); // string console.log(getType([])); // array console.log(getType(/a/)); // regexp console.log(getType(new WeakMap())); // weakmap console.log(getType(new WeakSet())); // weakset
實(shí)現(xiàn)getType
我們也可以借助于操作數(shù)組的方式:
function getType(obj) { const originType = Object.prototype.toString.call(obj); // 獲取類型。返回格式為[object type],需要提取出type的值 const tmpType = originType.split(' ')[1]; // 根據(jù)空格分割,并取第二個(gè) const type = tmpType.slice(0, -1); // 從0截取到倒數(shù)第一個(gè)字符(不含最后一個(gè)) return type.toLowerCase(); // 轉(zhuǎn)換為小寫 } console.log(getType(null)); // null console.log(getType(undefined)); // undefined console.log(getType('')); // string console.log(getType([])); // array console.log(getType(/a/)); // regexp console.log(getType(new WeakMap())); // weakmap console.log(getType(new WeakSet())); // weakset
兩者實(shí)現(xiàn)結(jié)果是一致的,基本上實(shí)現(xiàn)了我們的既定目標(biāo),而且可以獲取到所有的數(shù)據(jù)類型。不同的是,操作數(shù)組比直接操作字符串更消耗性能。
總結(jié)
實(shí)現(xiàn)一個(gè)獲取變量類型的方法,其實(shí)并不復(fù)雜,簡(jiǎn)單來(lái)說(shuō)就是使用了內(nèi)置的API:Object.prototype.toString()
。有時(shí)候,往往就是因?yàn)檫^(guò)于簡(jiǎn)單而被我們忽略,其實(shí)越是簡(jiǎn)單的方式,才是越有效的。
以上就是詳解JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型的詳細(xì)內(nèi)容,更多關(guān)于JavaScript獲取變量數(shù)據(jù)類型的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法,涉及javascript針對(duì)時(shí)間及頁(yè)面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07javascript function、指針及內(nèi)置對(duì)象
該文摘自于匿名教程總結(jié),希望對(duì)初學(xué)js的同學(xué)有幫助,因?yàn)樗鉀Q了我學(xué)習(xí)js的眾多迷惑。。。2009-02-02Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示
我們使用vue做項(xiàng)目的時(shí)候,常常需要做到echarts圖表的自適應(yīng),一般是根據(jù)頁(yè)面的寬度做對(duì)應(yīng)的適應(yīng),下面這篇文章主要給大家介紹了關(guān)于Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示的相關(guān)資料,需要的朋友可以參考下2022-11-11JavaScript實(shí)現(xiàn)動(dòng)態(tài)生成表格案例詳解
本文主要介紹了通過(guò)JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加表格的案例,當(dāng)點(diǎn)擊添加按鈕時(shí),可以彈出一個(gè)表單,然后將輸入的內(nèi)容添加到表格中,也可以將表格中的整行內(nèi)容清除。感興趣的可以學(xué)習(xí)一下2021-12-12JavaScript操作XML實(shí)例代碼(獲取新聞標(biāo)題并分頁(yè),并分頁(yè))
XML 代碼部分 這是一個(gè)新聞的XML 文件,如果 NBody部分包含 XML 和Html 不可識(shí)別部分, 就 包含在DATA 表示附中。2010-05-05