四種Javascript類型檢測的方式

作者：佚名 2022-03-25 14:47:24

今天這篇文章，主要介紹了JavaScript中檢測數據類型的4種方式。如果已經會了的可以當成復習，如果還不了解的話，可以認真看看，并加以運用。

一、typeof

主要用于判斷基本數據類型。使用方式：typeof(表達式)和typeof 變量名，第一種是對表達式做運算，第二種是對變量做運算。 typeof運算符的返回類型為字符串，值包括如下幾種：

'undefined'：未定義的變量或值
'boolean'：布爾類型的變量或值
'string' ：字符串類型的變量或值
'number'：數字類型的變量或值
'object' ：對象類型的變量或值，或者null(這個是js歷史遺留問題，將null作為object類型處理)
'function' ：函數類型的變量或值

示例如下：

console.log(typeof a);    //'undefined'    
console.log(typeof(true));  //'boolean'    
console.log(typeof '123');  //'string'    
console.log(typeof 123);   //'number'    
console.log(typeof NaN);   //'number'    
console.log(typeof null);  //'object'       
var obj = new String();    console.log(typeof(obj));    //'object'    
var  fn = function(){};    console.log(typeof(fn));  //'function'    
console.log(typeof(class c{}));  //'function'

typeof的不足之處：

不能區分對象、數組、正則，對它們操作都返回"object";(正則特殊一點后面說)
Safar5,Chrome7之前的版本對正則對象返回 'function'
在IE6,7和8中，大多數的宿主對象是對象，而不是函數;如：typeof alert; //object
而在非ID瀏覽器或則IE9以上(包含IE9)，typeof alert; //function
對于null,返回的是object.

總結：

typeof運算符用于判斷對象的類型，但是對于一些創建的對象，它們都會返回'object'，有時我們需要判斷該實例是否為某個對象的實例，那么這個時候需要用到instanceof運算符。

二、instanceof

用于引用數據類型的判斷。所有引用數據類型的值都是Object的實例。目的是判斷一個對象在其原型鏈上是否存在構造函數的prototype屬性。用法：

variable instanceof constructor

示例如下：


// example
var arr = [];
 
由于：
1. arr.constructor === Array
2. arr.__proto__ === Array.prototype
3. arr.__poto__.proto__ === Object.prototype
 
所以, 以下都返回true
1. arr instanceof arr.constructor(Array)
2. arr instanceof arr.__proto__.constructor(Array)
3. arr instanceof arr.__proto__.__poto__.constructor(Object)
 
 
如果你了解原型鏈的話，你很快就會得出一些結論：
1. 所有對象 instanceof Object 都會返回 true
2. 所有函數 instanceof Function 都會返回 true

總結：

instanceof不僅能檢測構造對象的構造器，還檢測原型鏈。instanceof要求前面是個對象，后面是一個構造函數。而且返回的是布爾型的，不是true就是false。

3、Array.isArray()

Array.isArray()可以用于判斷數組類型，支持的瀏覽器有IE9+、FireFox 4+、Safari 5+、Chrome; 兼容實現：

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

示例如下：

// 1.
Array.isArray([1, 2, 3, 4]);  // --> true

// 2.
var obj = {
    a: 1,
    b: 2
};
Array.isArray(obj);  // --> false

// 3.
Array.isArray(new Array);  // --> true

//4.
Array.isArray("Array");  // --> false

總結：

isArray是一個靜態方法，使用Array對象(類)調用，而不是數組對象實例。其中Array.prototype 也是一個數組，Array.isArray 優于 instanceof。

四、Object.prototype.toString.call()

判斷某個對象值屬于哪種內置類型, 最靠譜的做法就是通過Object.prototype.toString方法。object.prototype.toString()輸出的格式就是[object 對象數據類型]。

示例如下：

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

責任編輯：華軒來源：前端Q

Javascript 數據類型開發