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