快捷導(dǎo)航

JavaScript數(shù)據(jù)類型檢測(cè)實(shí)現(xiàn)方法詳解

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

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

一、typeof

優(yōu)點(diǎn)：能快速判斷基本數(shù)據(jù)類型，除了 Null；
缺點(diǎn)：不能判別 Object、Array、Null ，都返回 object；判別引用類型除函數(shù)顯示 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 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。

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

語法：

object instanceof constructor

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

優(yōu)點(diǎn)：能區(qū)分Array、Object和 Function，適用于判斷自定義的類實(shí)例對(duì)象
缺點(diǎn)：不能判斷 Number，Boolean，String 基本數(shù)據(jù)類型

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 對(duì)象和 Date 對(duì)象都屬于 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，非對(duì)象實(shí)例，因此返回 false
objStr instanceof String;    // true
newStr instanceof String;    // true
objStr instanceof Object;    // true       
myNonObj instanceof Object; // false，一種創(chuàng)建非 Object 實(shí)例的對(duì)象的方法
aDate instanceof Date;      // true
aDate instanceof Object;    // true

三、Object.prototype.toString.call()

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

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 構(gòu)造函數(shù)
console.log(toString.call(Array));        // [object Function] Array 構(gòu)造函數(shù)
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]

面試問題

如何判斷變量是否為數(shù)組？

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 對(duì)象

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

到此這篇關(guān)于JavaScript數(shù)據(jù)類型檢測(cè)實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)JS數(shù)據(jù)類型檢測(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: