JavaScript數據類型檢測實現方法詳解

更新時間：2022年11月03日 17:04:15 作者：歡萊

Javascript中檢查數據類型一直是老生常談的問題,類型判斷在web開發(fā)中也有著非常廣泛的應用,所以下面這篇文章主要給大家介紹了關于JS數據類型檢測的那些事,需要的朋友可以參考下

一、typeof

優(yōu)點：能快速判斷基本數據類型，除了 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

優(yōu)點：能區(qū)分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，一種創(chuàng)建非 Object 實例的對象的方法
aDate instanceof Date;      // true
aDate instanceof Object;    // true

三、Object.prototype.toString.call()

優(yōu)點：精準判斷數據類型，所有原始數據類型都是能判斷；
缺點：寫法繁瑣，最好進行封裝后使用

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數據類型檢測實現方法詳解的文章就介紹到這了,更多相關JS數據類型檢測內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: