js中各種數(shù)據(jù)類(lèi)型檢測(cè)和判定的實(shí)戰(zhàn)示例
介紹
在前端開(kāi)發(fā)中,js 有各種各樣的數(shù)據(jù)類(lèi)型,數(shù)據(jù)類(lèi)型檢測(cè)是每個(gè)開(kāi)發(fā)者都必須掌握基礎(chǔ)知識(shí)。數(shù)據(jù)類(lèi)型檢測(cè)的方法也有很多種,本題將封裝一個(gè)通用的數(shù)據(jù)類(lèi)型檢測(cè)函數(shù)。
準(zhǔn)備
本題已經(jīng)內(nèi)置了初始代碼,打開(kāi)實(shí)驗(yàn)環(huán)境,目錄結(jié)構(gòu)如下:
.
└── main.js
其中:
main.js 是待補(bǔ)充代碼的 js 文件。
在 main.js 文件中封裝好方法以后,可以嘗試在該文件中手動(dòng)調(diào)用已經(jīng)封裝好的方法,通過(guò)命令 node main.js 來(lái)執(zhí)行文件,打印對(duì)應(yīng)的日志。
目標(biāo)
完善 main.js 中 getType 函數(shù)中的 TODO 部分,返回傳入值的對(duì)應(yīng)數(shù)據(jù)類(lèi)型。
傳入值以及 getType 函數(shù)返回值(大小寫(xiě)可忽略)按照如下方式對(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)算符用來(lái)判斷一個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象是否存在另外一個(gè)要檢測(cè)對(duì)象的原型鏈上。關(guān)于原型鏈請(qǐng)自行學(xué)習(xí),這里不過(guò)多解釋。typeof返回的是一個(gè)字符串,具體用法請(qǐng)見(jiàn)代碼。typeof只能檢測(cè)出圖中的8種類(lèi)型。并且你如果使用typeof檢測(cè) null、Date、RegExp、Error都會(huì)返回為object類(lèi)型。所以最好使用instanceof檢測(cè)

代碼
/**
* @description: 數(shù)據(jù)類(lèi)型檢測(cè)
* @param {*} data 傳入的待檢測(cè)數(shù)據(jù)
* @return {*} 返回?cái)?shù)據(jù)類(lèi)型
*/
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é)果是從左往右開(kāi)始讀,然后下一行

總結(jié)
到此這篇關(guān)于js中各種數(shù)據(jù)類(lèi)型檢測(cè)和判定的文章就介紹到這了,更多相關(guān)js數(shù)據(jù)類(lèi)型檢測(cè)和判定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS中檢測(cè)數(shù)據(jù)類(lèi)型的幾種方式及優(yōu)缺點(diǎn)小結(jié)
- 淺談javascript的數(shù)據(jù)類(lèi)型檢測(cè)
- 關(guān)于JS數(shù)據(jù)類(lèi)型檢測(cè)的多種方式總結(jié)
- js數(shù)據(jù)類(lèi)型檢測(cè)總結(jié)
- JavaScript中檢測(cè)數(shù)據(jù)類(lèi)型的四種方法
- javascript基本數(shù)據(jù)類(lèi)型及類(lèi)型檢測(cè)常用方法小結(jié)
- 在javaScript中檢測(cè)數(shù)據(jù)類(lèi)型的幾種方式小結(jié)
- JavaScript數(shù)據(jù)類(lèi)型檢測(cè)代碼分享
- js學(xué)習(xí)總結(jié)_基于數(shù)據(jù)類(lèi)型檢測(cè)的四種方式(必看)
- JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類(lèi)型問(wèn)題詳解
相關(guān)文章
javascript模擬map輸出與去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了javascript模擬map輸出與去除重復(fù)項(xiàng)的方法,通過(guò)自定義函數(shù)結(jié)合遍歷與刪除的方法實(shí)現(xiàn)了去除重復(fù)項(xiàng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
重學(xué) JS:為啥 await 不能用在 forEach 中詳解
這篇文章主要介紹了重學(xué) JS:為啥 await 不能用在 forEach 中,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)?lái)一篇js-FCC算法-No repeats please字符串的全排列(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
js實(shí)現(xiàn)瀏覽器窗口大小被改變時(shí)觸發(fā)事件的方法
這篇文章主要介紹了js實(shí)現(xiàn)瀏覽器窗口大小被改變時(shí)觸發(fā)事件的方法,實(shí)例分析了window.onresize方法的使用技巧,需要的朋友可以參考下2015-02-02
javascript嵌套函數(shù)和在函數(shù)內(nèi)調(diào)用外部函數(shù)的區(qū)別分析
這篇文章主要介紹了javascript嵌套函數(shù)和在函數(shù)內(nèi)調(diào)用外部函數(shù)的區(qū)別,需要的朋友可以參考下2016-01-01
JavaScript中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-06
JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下2015-07-07
js數(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

