js中各種數(shù)據(jù)類型檢測和判定的實戰(zhàn)示例
介紹
在前端開發(fā)中,js 有各種各樣的數(shù)據(jù)類型,數(shù)據(jù)類型檢測是每個開發(fā)者都必須掌握基礎(chǔ)知識。數(shù)據(jù)類型檢測的方法也有很多種,本題將封裝一個通用的數(shù)據(jù)類型檢測函數(shù)。
準(zhǔn)備
本題已經(jīng)內(nèi)置了初始代碼,打開實驗環(huán)境,目錄結(jié)構(gòu)如下:
.
└── main.js
其中:
main.js 是待補充代碼的 js 文件。
在 main.js 文件中封裝好方法以后,可以嘗試在該文件中手動調(diào)用已經(jīng)封裝好的方法,通過命令 node main.js 來執(zhí)行文件,打印對應(yīng)的日志。
目標(biāo)
完善 main.js 中 getType 函數(shù)中的 TODO 部分,返回傳入值的對應(yīng)數(shù)據(jù)類型。
傳入值以及 getType 函數(shù)返回值(大小寫可忽略)按照如下方式對應(yīng):
傳入值 返回值
‘s’ string
0 number
傳入值 | 返回值 |
---|---|
false | boolean |
undefined | undefined |
Symbol() | symbol |
function fn(){} | function |
123n | bigint |
null | null |
{} | object |
[] | array |
new Date | date |
new Map | map |
new Set | set |
/a/ | regexp |
測試用例
// 示例 const testArr = [ "s", 0, false, undefined, Symbol(), function () {}, 123n, null, {}, [], new Date(), new Map(), new Set(), /a/, ]; const result = testArr.map((item) => getType(item)); console.log("得到的結(jié)果:", result); /* 得到的結(jié)果: [ 'string', 'number', 'boolean', 'undefined', 'symbol', 'function', 'bigint', 'null', 'object', 'array', 'date', 'map', 'set', 'regExp' ] */
值得注意的是需要我們區(qū)別typeof與instanceof的用法。instanceof運算符用來判斷一個構(gòu)造函數(shù)的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上。關(guān)于原型鏈請自行學(xué)習(xí),這里不過多解釋。typeof返回的是一個字符串,具體用法請見代碼。typeof只能檢測出圖中的8種類型。并且你如果使用typeof檢測 null、Date、RegExp、Error都會返回為object類型。所以最好使用instanceof檢測
代碼
/** * @description: 數(shù)據(jù)類型檢測 * @param {*} data 傳入的待檢測數(shù)據(jù) * @return {*} 返回數(shù)據(jù)類型 */ function getType(data) { // TODO:待補充代碼 if(typeof data=="String"){ return 'string'; }else if( typeof data=="number"){ return "number" }else if(typeof data== "boolean"){ return "boolean" }else if(typeof data=="undefined"){ return "undefined" }else if(typeof data== "function"){ return "function" }else if(typeof data=== "symbol"){ return "symbol" } else if(typeof data== "bigint"){ return "bigint" }else if( data=== null){ return "null" }else if(Array.isArray(data)){ return "array" }else if(data instanceof Date){ return "date" }else if(data instanceof RegExp){ return "regExp" } else if(data instanceof Map){ return "map" }else if(data instanceof Set){ return "set" } else if(typeof data=="string"){ return "string" }else if(typeof data=="object"){ return "object" } } const testArr = [ "s", 0, false, undefined, Symbol(), function () {}, 123n, null, {}, [], new Date(), new Map(), new Set(), /a/, ]; const result = testArr.map((item) => getType(item)); console.log("得到的結(jié)果:", result); module.exports = { getType }
使用
可以把代碼復(fù)制到一個js文件中。在終端運行node 文件名.js即可。測試結(jié)果如下,結(jié)果是從左往右開始讀,然后下一行
總結(jié)
到此這篇關(guān)于js中各種數(shù)據(jù)類型檢測和判定的文章就介紹到這了,更多相關(guān)js數(shù)據(jù)類型檢測和判定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS中檢測數(shù)據(jù)類型的幾種方式及優(yōu)缺點小結(jié)
- 淺談javascript的數(shù)據(jù)類型檢測
- 關(guān)于JS數(shù)據(jù)類型檢測的多種方式總結(jié)
- js數(shù)據(jù)類型檢測總結(jié)
- JavaScript中檢測數(shù)據(jù)類型的四種方法
- javascript基本數(shù)據(jù)類型及類型檢測常用方法小結(jié)
- 在javaScript中檢測數(shù)據(jù)類型的幾種方式小結(jié)
- JavaScript數(shù)據(jù)類型檢測代碼分享
- js學(xué)習(xí)總結(jié)_基于數(shù)據(jù)類型檢測的四種方式(必看)
- JS數(shù)組索引檢測中的數(shù)據(jù)類型問題詳解
相關(guān)文章
javascript模擬map輸出與去除重復(fù)項的方法
這篇文章主要介紹了javascript模擬map輸出與去除重復(fù)項的方法,通過自定義函數(shù)結(jié)合遍歷與刪除的方法實現(xiàn)了去除重復(fù)項的功能,非常具有實用價值,需要的朋友可以參考下2015-02-02重學(xué) JS:為啥 await 不能用在 forEach 中詳解
這篇文章主要介紹了重學(xué) JS:為啥 await 不能用在 forEach 中,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)硪黄猨s-FCC算法-No repeats please字符串的全排列(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05js實現(xiàn)瀏覽器窗口大小被改變時觸發(fā)事件的方法
這篇文章主要介紹了js實現(xiàn)瀏覽器窗口大小被改變時觸發(fā)事件的方法,實例分析了window.onresize方法的使用技巧,需要的朋友可以參考下2015-02-02javascript嵌套函數(shù)和在函數(shù)內(nèi)調(diào)用外部函數(shù)的區(qū)別分析
這篇文章主要介紹了javascript嵌套函數(shù)和在函數(shù)內(nèi)調(diào)用外部函數(shù)的區(qū)別,需要的朋友可以參考下2016-01-01JavaScript中Function函數(shù)與Object對象的關(guān)系
這篇文章主要介紹了JavaScript中Function函數(shù)與Object對象的關(guān)系的相關(guān)資料,需要的朋友可以參考下2015-12-12JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下2015-07-07js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時可以對不同進(jìn)制進(jìn)行操作
這篇文章主要介紹了js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時可以對不同進(jìn)制進(jìn)行操作,需要的朋友可以參考下2014-03-03