javaScript中一些常見的數(shù)據(jù)類型檢查校驗(yàn)
前言
在JavaScript中,數(shù)據(jù)類型分為兩大類,一種是基礎(chǔ)數(shù)據(jù)類型,另一種則是復(fù)雜數(shù)據(jù)類型,又叫引用數(shù)據(jù)類型
- 基礎(chǔ)數(shù)據(jù)類型:數(shù)字Number 字符串String 布爾Boolean Null Undefined Symbols BigInt
- 引用數(shù)據(jù)類型:日期Dete,對(duì)象Object,數(shù)組Array,方法Function, 正則regex,帶鍵的集合:Maps, Sets, WeakMaps, WeakSets
基礎(chǔ)數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別,在之前深拷貝的文章中提到過,這里不做詳細(xì)贅述。
常見的幾種數(shù)據(jù)校驗(yàn)方式
接下來會(huì)針對(duì)下面幾種數(shù)據(jù)類型,進(jìn)行校驗(yàn)
// 基本數(shù)據(jù)類型 let str = "abc"; let num = 123; let boo = true; let undef = undefined; let testNull = null; let symb = Symbol("user"); let bigInt = BigInt(9007199254740999); // 復(fù)雜-引用數(shù)據(jù)類型 let arr = [1, 2, 3, 4]; let func = function () {}; let obj = {}; let date1 = new Date(); let setObj1 = new Set(); let setObj2 = new Set([1, 2, 3]); let mapObj = new Map();
typeof操作符
typeof操作符,會(huì)返回一個(gè)字符串,表示未經(jīng)計(jì)算的操作數(shù)的類型
/** * typeof 操作符 * * 返回一個(gè)字符串,表示未經(jīng)計(jì)算的操作數(shù)的類型。 * * */ console.log(typeof str); // string console.log(typeof num); // number console.log(typeof boo); // boolean console.log(typeof undef); // undefined console.log(typeof testNull); // object console.log(typeof symb); // symbol console.log(typeof bigInt); // bigint console.log(typeof Object(bigInt)); // object console.log(typeof arr); // object console.log(typeof func); // function console.log(typeof obj); // object console.log(typeof date1); // object console.log(typeof setObj1); // object console.log(typeof setObj2); // object console.log(typeof mapObj); // object
小結(jié)
使用typeof操作符的時(shí)候,我們可以看到一些較為特殊的情況:
- null,數(shù)組array,set,map 返回的是對(duì)象object
instanceof
instanceof用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。
/** * * instanceof * * 用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。 * * */ console.log(str instanceof String); // false console.log(new String("abc") instanceof String); // true console.log(num instanceof Number); // false console.log(new Number(123) instanceof Number); // true console.log(boo instanceof Boolean); // false console.log(new Boolean(true) instanceof Boolean); // false console.log(undef instanceof undefined); // Uncaught TypeError: Right-hand side of 'instanceof' is not an object console.log(testNull instanceof null); // Uncaught TypeError: Right-hand side of 'instanceof' is not an object console.log(symb instanceof Symbol); // false // Symbol不是構(gòu)造函數(shù),沒有new操作符 console.log(bigInt instanceof BigInt); // false console.log(Object(BigInt("22")) instanceof Object); // true console.log(Object(BigInt("22")) instanceof BigInt); // true console.log(arr instanceof Array); // true console.log(arr instanceof Object); // true console.log(func instanceof Function); // true console.log(func instanceof Object); // true console.log(obj instanceof Object); // true console.log(obj instanceof Function); // false console.log(null instanceof Object); // false console.log(date1 instanceof Object); // true console.log(setObj1 instanceof Object); // true console.log(setObj2 instanceof Object); // true console.log(mapObj instanceof Object); // true console.log(setObj1 instanceof Array); // false console.log(setObj2 instanceof Array); // false console.log(mapObj instanceof Array); // false
constructor
/** * constructor * * 返回創(chuàng)建實(shí)例對(duì)象的 構(gòu)造函數(shù)的引用。 * * 注意,此屬性的值是對(duì)函數(shù)本身的引用,而不是一個(gè)包含函數(shù)名稱的字符串 * * 構(gòu)造函數(shù).prototype.constructor() * * */ // 基本數(shù)據(jù)類型 let str = "abc"; let num = 123; let boo = true; let undef = undefined; let testNull = null; let symb = Symbol("user"); let bigInt = BigInt(9007199254740999); // 復(fù)雜-引用數(shù)據(jù)類型 let arr = [1, 2, 3, 4]; let func = function () {}; let obj = {}; let date1 = new Date(); function constructorFn() { this.name = "11"; } let con1 = new constructorFn(); let setObj1 = new Set(); let setObj2 = new Set([1, 2, 3]); let mapObj = new Map(); console.log(str.constructor); // String console.log(num.constructor); // Number console.log(boo.constructor); // Boolean // console.log(testUndefined.constructor); // Cannot read property 'constructor' of undefined // console.log(testNull.constructor); // Cannot read property 'constructor' of null console.log(symb.constructor); // Symbol console.log(bigInt.constructor); // BigInt console.log(arr.constructor); // Array console.log(func.constructor); // Function console.log(obj.constructor); // Object console.log(date1.constructor); // Date console.log(constructorFn.constructor); // Function console.log(con1.constructor); // constructorFn console.log(setObj1.constructor); // Set console.log(setObj2.constructor); // Set console.log(mapObj.constructor); // Map /** * * 構(gòu)造函數(shù)校驗(yàn) * * */ console.log(Function.constructor); // Function console.log(Object.constructor); // Function console.log(Array.constructor); // Function console.log(Date.constructor); // Function
Object.prototype.toString.call && Object.prototype.toString.apply
Object.prototype.toString()
在使用Object.prototype.toString.call或者Object.prototype.toString.apply檢查數(shù)據(jù)類型之前,我們先了解一下Object.prototype.toString和JavaScript中的構(gòu)造函數(shù)Function的原型方法apply和call:
/** * 返回一個(gè)表示該對(duì)象的字符串 * * Object.prototype.toString() * * 每個(gè)對(duì)象都有一個(gè) toString() 方法,當(dāng)該對(duì)象被表示為一個(gè)文本值時(shí),或者一個(gè)對(duì)象以預(yù)期的字符串方式引用時(shí)自動(dòng)調(diào)用。 * 默認(rèn)情況下,toString() 方法被每個(gè) Object 對(duì)象繼承。 * * 如果此方法在自定義對(duì)象中未被覆蓋,toString() 返回 "[object type]",其中 type 是對(duì)象的類型。以下代碼說明了這一點(diǎn): * * */ let isObj = { name: "zhangsan" }; let isBoolean = true; let isNumber = new Number(123); let isString = "abc"; let isFun = new Function(); console.log(isObj.toString()); // [object Object] console.log(isBoolean.toString()); // true console.log(isNumber.toString()); // 123 console.log(isString.toString()); // abc console.log(new Date().toString()); // Thu Apr 28 2022 16:37:19 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) console.log(isFun.toString()); // function anonymous() {}
call && apply
/** * * call() 使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來調(diào)用一個(gè)函數(shù),function.call(thisArg, arg1, arg2, ...) * * apply() 使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來調(diào)用一個(gè)函數(shù),unc.apply(thisArg, [argsArray]) * * */ // call基本使用; function a() { console.log(this); } function b() { console.log(this); } a.call(b); // function b() {} b.call(a); // function a() {}
call和apply最簡單的例子表明了,改變了當(dāng)前方法的this指向
同時(shí)這兩個(gè)方法的區(qū)別在于傳參的方式
Object.prototype.toString結(jié)合Function.prototype.call && apply
/** * * 使用 toString() 檢測(cè)對(duì)象類型可以通過 toString() 來獲取每個(gè)對(duì)象的類型。 * 為了每個(gè)對(duì)象都能通過 Object.prototype.toString() 來檢測(cè), * 需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調(diào)用,傳遞要檢查的對(duì)象作為第一個(gè)參數(shù),稱為 thisArg。 * * 那么 Object.prototype.toString 相當(dāng)于 原生構(gòu)造函數(shù)的實(shí)例化對(duì)象isNumber,傳參數(shù)給Object.prototype.toString執(zhí)行 * 實(shí)際上相當(dāng)于 toString.call(new ***); * * */ let str = "abc"; let num = 123; let boo = true; let undef = undefined; let testNull = null; let symb = Symbol("user"); let bigInt = BigInt(9007199254740999); // 復(fù)雜-引用數(shù)據(jù)類型 let arr = [1, 2, 3, 4]; let func = function () {}; let obj = {}; let date1 = new Date(); function testFun() {} let newTest = new testFun(); let newFun = new Function(); let setObj1 = new Set(); let setObj2 = new Set([1, 2, 3]); let mapObj = new Map(); console.log(Object.prototype.toString.apply(new String("sss"))); // [object String] console.log(Object.prototype.toString.apply(str)); // [object String] console.log(Object.prototype.toString.call(num)); // [object Number] console.log(Object.prototype.toString.call(boo)); // [object Boolean] console.log(Object.prototype.toString.call(undef)); // [object Undefined] console.log(Object.prototype.toString.call(testNull)); // [object Null] console.log(Object.prototype.toString.call(symb)); // [object Symbol] console.log(Object.prototype.toString.call(Object(bigInt))); // [object BigInt] console.log(Object.prototype.toString.call(bigInt)); // [object BigInt] console.log(Object.prototype.toString.apply(arr)); // [object Array] console.log(Object.prototype.toString.call(func)); // [object Function] console.log(Object.prototype.toString.call(obj)); // [object Object] console.log(Object.prototype.toString.call(date1)); // [object Date] console.log(Object.prototype.toString.call(testFun)); // [object Function] console.log(Object.prototype.toString.call(newTest)); // [object Object] console.log(Object.prototype.toString.call(newFun)); // [object Function] console.log(Object.prototype.toString.call(setObj1)); // [object Set] console.log(Object.prototype.toString.call(setObj2)); // [object Set] console.log(Object.prototype.toString.call(mapObj)); // [object Map]
其他校驗(yàn)數(shù)據(jù)類型的方法:
判斷是否是數(shù)組:
console.log(Array.isArray([1, 2])); // true
判斷一個(gè)對(duì)象是否是空對(duì)象
// 判斷空對(duì)象 function isEmptyObj(obj) { for (name in obj) { console.log(name); return false; // 不是空對(duì)象 } return true; } console.log(isEmptyObj({})); // true
總結(jié)
- 不管是typeof操作符,還是其他的操作方法,都有各自的缺陷
- 在日常的開發(fā)過程中,我們需要知道當(dāng)前操作的是對(duì)象,還是構(gòu)造函數(shù)生成的對(duì)象或者方法,才能針對(duì)當(dāng)前需要判斷的數(shù)據(jù)類型,采用最適合的方法
- Object.prototype.toString.call或者Object.prototype.toString.apply應(yīng)該是最完善的方法,在我們不確定是否是引用類型或者基本數(shù)據(jù)類型的時(shí)候,建議作為首選
- 在了解這些判斷數(shù)據(jù)類型的方式之前或者說存有疑問:為什么array數(shù)組在使用instanceof和typeof 校驗(yàn)Object的時(shí)候都成立,這時(shí)候需要去了解一下引用數(shù)據(jù)類型的具體內(nèi)容
- 以上判斷數(shù)據(jù)類型的方法,可以在項(xiàng)目開發(fā)過程中,可以寫入到utils公共方法當(dāng)中,作為開發(fā)中進(jìn)行使用。
更多用法等待補(bǔ)充。
到此這篇關(guān)于javaScript中一些常見的數(shù)據(jù)類型檢查校驗(yàn)的文章就介紹到這了,更多相關(guān)JS數(shù)據(jù)類型檢查校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
源碼地址
碼云 https://gitee.com/lewyon/vue-note
githup https://github.com/akari16/vue-note
相關(guān)文章
JavaScript時(shí)間對(duì)象之常用方法的設(shè)置實(shí)例
這篇文章主要為大家介紹了JavaScript時(shí)間對(duì)象常用方法的設(shè)置實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05原生js實(shí)現(xiàn)addClass,removeClass,hasClass方法
這篇文章主要介紹了原生js實(shí)現(xiàn)addClass,removeClass,hasClass方法和使用原生JS實(shí)現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能,需要的朋友可以參考下2016-04-04JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript觀察者模式與發(fā)布訂閱模式相關(guān)概念、原理2020-05-05js實(shí)現(xiàn)隨機(jī)點(diǎn)名器精簡版
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名器的精簡版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06js判斷手機(jī)和pc端選擇不同執(zhí)行事件的方法
這篇文章主要介紹了js判斷手機(jī)和pc端選擇不同執(zhí)行事件的方法,可實(shí)現(xiàn)判斷手機(jī)端還是PC端再選擇對(duì)應(yīng)的執(zhí)行事件的功能,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01原生JS版和jquery版實(shí)現(xiàn)checkbox的全選/全不選/點(diǎn)選/行內(nèi)點(diǎn)選(Mr.Think)
腳本之家小編之前整理不少checkbox全選全不選這方便的文章,但看了這篇以后發(fā)現(xiàn)實(shí)現(xiàn)方法更好2016-10-10js控住DOM實(shí)現(xiàn)發(fā)布微博效果
這篇文章主要為大家詳細(xì)介紹了js控住DOM實(shí)現(xiàn)發(fā)布微博效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例
本文主要介紹了webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06JavaScript實(shí)現(xiàn)酷炫的鼠標(biāo)拖尾特效
這篇文章主要為大家介紹了通過JavaScript實(shí)現(xiàn)的一個(gè)超級(jí)好看的鼠標(biāo)拖尾特效,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript有一定的幫助,感興趣的可以學(xué)習(xí)一下2021-12-12