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