javaScript中一些常見的數(shù)據(jù)類型檢查校驗(yàn)

更新時(shí)間：2022年05月06日 11:22:02 作者：程序猿布?xì)W

最近在面試的時(shí)候又被問到JS中檢查校驗(yàn)數(shù)據(jù)類型的方法,所以這篇文章主要給大家介紹了關(guān)于javaScript中一些常見的數(shù)據(jù)類型檢查校驗(yàn)的相關(guā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ì)贅述。

傳送門：javaScript中深拷貝和淺拷貝簡(jiǎn)單梳理

常見的幾種數(shù)據(jù)校驗(yàn)方式

接下來(lái)會(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ì)象的類型。以下代碼說(shuō)明了這一點(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 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
console.log(isFun.toString()); // function anonymous() {}

call && apply

/**
 *
 * call() 使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來(lái)調(diào)用一個(gè)函數(shù)，function.call(thisArg, arg1, arg2, ...)
 *
 * apply() 使用一個(gè)指定的 this 值和單獨(dú)給出的一個(gè)或多個(gè)參數(shù)來(lái)調(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最簡(jiǎn)單的例子表明了，改變了當(dāng)前方法的this指向

同時(shí)這兩個(gè)方法的區(qū)別在于傳參的方式

Object.prototype.toString結(jié)合Function.prototype.call && apply

/**
 *
 * 使用 toString() 檢測(cè)對(duì)象類型可以通過 toString() 來(lái)獲取每個(gè)對(duì)象的類型。
 * 為了每個(gè)對(duì)象都能通過 Object.prototype.toString() 來(lái)檢測(cè)，
 * 需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式來(lái)調(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ù)類型的方式之前或者說(shuō)存有疑問：為什么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)文章希望大家以后多多支持腳本之家！