深度解析javaScript常見資料型別檢查校驗

程式猿布歐發表於2022-05-05
JavaScript資料型別

前言

在JavaScript中，資料型別分為兩大類，一種是基礎資料型別，另一種則是複雜資料型別，又叫引用資料型別

  • 基礎資料型別：數字Number 字串String 布林Boolean Null Undefined Symbols BigInt
  • 引用資料型別：日期Dete，物件Object，陣列Array,方法Function, 正則regex,帶鍵的集合：Maps, Sets, WeakMaps, WeakSets

基礎資料型別和引用資料型別的區別，在之前深拷貝的文章中提到過，這裡不做詳細贅述。

傳送門：javaScript中深拷貝和淺拷貝簡單梳理

常見的幾種資料校驗方式

接下來會針對下面幾種資料型別，進行校驗

// 基本資料型別
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
 *
 * 返回建立例項物件的 建構函式的引用。
 *
 * 注意，此屬性的值是對函式本身的引用，而不是一個包含函式名稱的字串
 *
 * 建構函式.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指向
  • 同時這兩個方法的區別在於傳參的方式

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執行
 * 實際上相當於 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操作符，還是其他的操作方法，都有各自的缺陷
  • 在日常的開發過程中，我們需要知道當前操作的是物件，還是建構函式生成的物件或者方法，才能針對當前需要判斷的資料型別，採用最適合的方法
  • Object.prototype.toString.call或者Object.prototype.toString.apply應該是最完善的方法，在我們不確定是否是引用型別或者基本資料型別的時候，建議作為首選
  • 在瞭解這些判斷資料型別的方式之前或者說存有疑問：為什麼array陣列在使用instanceof和typeof 校驗Object的時候都成立，這時候需要去了解一下引用資料型別的具體內容
  • 以上判斷資料型別的方法，可以在專案開發過程中，可以寫入到utils公共方法當中，作為開發中進行使用。
  • 更多用法等待補充。

原始碼地址

文章個人部落格地址：深度解析javaScript常見資料型別檢查校驗

歡迎關注公眾號：程式猿布歐，不定期更新一些前端入門文章

創作不易，轉載請註明出處和作者。

相關文章