JavaScript數據類型檢測功能如何實現

本文小編為大家詳細介紹“JavaScript數據類型檢測功能如何實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript數據類型檢測功能如何實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、typeof

• 優點：能快速判斷基本數據類型，除了 Null；

• 缺點：不能判別 Object、Array、Null ，都返回 object；判別引用類型除函數顯示 function外，其他顯示為 object

console.log(typeof 55);              // number
console.log(typeof true);            // boolean
console.log(typeof 'aa');            // string
console.log(typeof undefined);       // undefined
console.log(typeof function(){});    // function
console.log(typeof Symbol("foo"));   // symbol
console.log(typeof 553119869n);      // bigint
// 不能判別
console.log(typeof []);   // object
console.log(typeof {});   // object
console.log(typeof null); // object

二、instanceof

MDN：

instanceof 運算符 用于檢測構造函數的 prototype 屬性是否出現在某個實例對象的原型鏈上。

理解：判斷在其原型鏈中能否找到該類型的原型。

語法：

object instanceof constructor

function D(){}
var o = new D();
o instanceof D;  // true
o instanceof Object; // true

• 優點：能區分Array、Object和 Function，適用于判斷自定義的類實例對象

• 缺點：不能判斷 Number，Boolean，String 基本數據類型

console.log(55 instanceof Number);                // false
console.log(true instanceof Boolean);             // false 
console.log('aa' instanceof String);              // false  
console.log([] instanceof Array);                 // true
console.log(function(){} instanceof Function);    // true
console.log({} instanceof Object);                // true

String 對象和 Date 對象都屬于 Object 類型 和 一些特殊情況：

var simpleStr = "a simple string";
var objStr = new String();
var newStr = new String("String created with constructor");
var aDate = new Date();
var myNonObj = Object.create(null);
simpleStr instanceof String; // false，非對象實例，因此返回 false
objStr instanceof String;    // true
newStr instanceof String;    // true
objStr instanceof Object;    // true       
myNonObj instanceof Object; // false，一種創建非 Object 實例的對象的方法
aDate instanceof Date;      // true
aDate instanceof Object;    // true

三、Object.prototype.toString.call()

• 優點：精準判斷數據類型，所有原始數據類型都是能判斷；

• 缺點：寫法繁瑣，最好進行封裝后使用

var toString = Object.prototype.toString;
console.log(toString.call(55));           // [object Number]
console.log(toString.call(true));         // [object Boolean]
console.log(toString.call('aa'));         // [object String]
console.log(toString.call([]));           // [object Array]
console.log(toString.call(function(){})); // [object Function]
console.log(toString.call({}));           // [object Object]
console.log(toString.call(undefined));    // [object Undefined]
console.log(toString.call(null));         // [object Null]
console.log(toString.call(Math));         // [object Math]
console.log(toString.call(Set));          // [object Function] Set 構造函數
console.log(toString.call(Array));        // [object Function] Array 構造函數
console.log(toString.call(Map));          // [object Function]
console.log(toString.call(Date));         // [object Function]
console.log(toString.call(new Set()));    // [object Set]
console.log(toString.call(new Array()));  // [object Array]
console.log(toString.call(new Map()));    // [object Map]
console.log(toString.call(new Date()));   // [object Date]
function D(){}
console.log(toString.call(D));            // [object Function]
console.log(toString.call(new D()));      // [object Object]

面試問題

如何判斷變量是否為數組？

let arr = []
console.log(Array.isArray(arr));    // true
arr.__proto__ === Array.prototype;  // true
arr instanceof Array;               // true
Object.prototype.toString.call(arr);// [object Array]

判斷是否是 Promise 對象

function isPromise(val) {
  return (
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}
let p = new Promise((resolve, reject) => {});
console.log(isPromise(p)); // true

讀到這里，這篇“JavaScript數據類型檢測功能如何實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。