javaScript中一些常見的數據類型檢查校驗
更新時間：2022年05月06日 11:22:02 作者：程序猿布歐
最近在面試的時候又被問到JS中檢查校驗數據類型的方法,所以這篇文章主要給大家介紹了關于javaScript中一些常見的數據類型檢查校驗的相關資料,需要的朋友可以參考下
前言
在JavaScript中，數據類型分為兩大類，一種是基礎數據類型，另一種則是復雜數據類型，又叫引用數據類型
- 基礎數據類型：數字Number 字符串String 布爾Boolean Null Undefined Symbols BigInt
- 引用數據類型：日期Dete，對象Object，數組Array,方法Function, 正則regex,帶鍵的集合：Maps, Sets, WeakMaps, WeakSets
基礎數據類型和引用數據類型的區(qū)別，在之前深拷貝的文章中提到過，這里不做詳細贅述。
常見的幾種數據校驗方式
接下來會針對下面幾種數據類型，進行校驗
// 基本數據類型
let str = "abc";
let num = 123;
let boo = true;
let undef = undefined;
let testNull = null;
let symb = Symbol("user");
let bigInt = BigInt(9007199254740999);
// 復雜-引用數據類型
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操作符，會返回一個字符串，表示未經計算的操作數的類型
/** * typeof 操作符 * * 返回一個字符串，表示未經計算的操作數的類型。 * * */ 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
小結
使用typeof操作符的時候，我們可以看到一些較為特殊的情況：
- null，數組array，set,map 返回的是對象object
instanceof
instanceof用于檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。
/**
*
* instanceof
*
* 用于檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。
*
* */
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不是構造函數，沒有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)建實例對象的 構造函數的引用。
*
* 注意，此屬性的值是對函數本身的引用，而不是一個包含函數名稱的字符串
*
* 構造函數.prototype.constructor()
*
* */
// 基本數據類型
let str = "abc";
let num = 123;
let boo = true;
let undef = undefined;
let testNull = null;
let symb = Symbol("user");
let bigInt = BigInt(9007199254740999);
// 復雜-引用數據類型
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
/**
*
* 構造函數校驗
*
* */
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檢查數據類型之前，我們先了解一下Object.prototype.toString和JavaScript中的構造函數Function的原型方法apply和call：
/**
* 返回一個表示該對象的字符串
*
* Object.prototype.toString()
*
* 每個對象都有一個 toString() 方法，當該對象被表示為一個文本值時，或者一個對象以預期的字符串方式引用時自動調用。
* 默認情況下，toString() 方法被每個 Object 對象繼承。
*
* 如果此方法在自定義對象中未被覆蓋，toString() 返回 "[object type]"，其中 type 是對象的類型。以下代碼說明了這一點：
*
* */
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 (中國標準時間)
console.log(isFun.toString()); // function anonymous() {}
call && apply
/**
*
* call() 使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數，function.call(thisArg, arg1, arg2, ...)
*
* apply() 使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數，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最簡單的例子表明了，改變了當前方法的this指向
同時這兩個方法的區(qū)別在于傳參的方式
Object.prototype.toString結合Function.prototype.call && apply
/**
*
* 使用 toString() 檢測對象類型可以通過 toString() 來獲取每個對象的類型。
* 為了每個對象都能通過 Object.prototype.toString() 來檢測，
* 需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來調用，傳遞要檢查的對象作為第一個參數，稱為 thisArg。
*
* 那么 Object.prototype.toString 相當于 原生構造函數的實例化對象isNumber，傳參數給Object.prototype.toString執(zhí)行
* 實際上相當于 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);
// 復雜-引用數據類型
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]
其他校驗數據類型的方法：
判斷是否是數組：
console.log(Array.isArray([1, 2])); // true
判斷一個對象是否是空對象
// 判斷空對象
function isEmptyObj(obj) {
for (name in obj) {
console.log(name);
return false; // 不是空對象
}
return true;
}
console.log(isEmptyObj({})); // true
總結
- 不管是typeof操作符，還是其他的操作方法，都有各自的缺陷
- 在日常的開發(fā)過程中，我們需要知道當前操作的是對象，還是構造函數生成的對象或者方法，才能針對當前需要判斷的數據類型，采用最適合的方法
- Object.prototype.toString.call或者Object.prototype.toString.apply應該是最完善的方法，在我們不確定是否是引用類型或者基本數據類型的時候，建議作為首選
- 在了解這些判斷數據類型的方式之前或者說存有疑問：為什么array數組在使用instanceof和typeof 校驗Object的時候都成立，這時候需要去了解一下引用數據類型的具體內容
- 以上判斷數據類型的方法，可以在項目開發(fā)過程中，可以寫入到utils公共方法當中，作為開發(fā)中進行使用。
更多用法等待補充。
到此這篇關于javaScript中一些常見的數據類型檢查校驗的文章就介紹到這了,更多相關JS數據類型檢查校驗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
源碼地址
碼云 https://gitee.com/lewyon/vue-note
githup https://github.com/akari16/vue-note
相關文章
這篇文章主要介紹了微信小程序獲取當前位置和城市名的思路,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
跟網上的一些常用的不太一樣，個人都有個人常用的代碼，大家看到好東西，不一定什么都會，起碼要知道有這么個東西。方便以后用也方便找。2009-04-04![[js+css]點擊隱藏層,點擊另外層不能隱藏原層](http://img.jbzj.com/images/xgimg/bcimg2.png)
[js+css]點擊隱藏層,點擊另外層不能隱藏原層...2007-03-03
這篇文章主要為大家詳細介紹了JavaScript計算出兩個數的差值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了js分析url獲取url參數，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
這篇文章主要介紹了如何用RxJS實現Redux Form，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了JavaScript中的ES6 Proxy的具體使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
Bootstrap每天必學之彈出框（Popover）插件,彈出框的內容完全可使用 Bootstrap 數據 API（Bootstrap Data API）來填充，如何實現請參考本文2016-04-04
這篇文章主要介紹了JavaScript 擴展運算符用法,結合實例形式總結分析了基于ES6的擴展運算符基本概念與使用相關操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JavaScript中return的用法,包括return定義，寫法等方面的知識，需要的朋友可以參考下2017-05-05