JS判斷數組四種實現方法詳解

一、前言

如何判斷一個對象或一個值是否是一個數組，在面試或工作中我們常常會遇到這個問題，既然出現頻率高，想著還是做個整理，那麼本文主要基於幾種判斷方式，以及方式判斷的原理，是否存在問題展開討論。
 

二、判斷對象是否是數組的幾種方式

1.通過instanceof判斷

instanceof運算符用於檢驗構造函數的prototype屬性是否出現在對象的原型鏈中的任何位置，返回一個布爾值。
 

  let a = [];  a instanceof Array; //true  let b = {};  b instanceof Array; //false

在上方代碼中，instanceof運算符檢測Array.prototype屬性是否存在於變量a的原型鏈上，顯然a是一個數組，擁有Array.prototype屬性，所以為true。

存在問題：

需要注意的是，prototype屬性是可以修改的，所以並不是最初判斷為true就一定永遠為真。

其次，當我們的腳本擁有多個全局環境，例如html中擁有多個iframe對象，instanceof的驗證結果可能不會符合預期，例如：

  //為body創建並添加一個iframe對象  var iframe = document.createElement('iframe');  document.body.appendChild(iframe);  //取得iframe對象的構造數組方法  xArray = window.frames[0].Array;  //通過構造函數獲取一個實例  var arr = new xArray(1,2,3);   arr instanceof Array;//false

導致這種問題是因為iframe會產生新的全局環境，它也會擁有自己的Array.prototype屬性，讓不同環境下的屬性相同很明顯是不安全的做法，所以Array.prototype !== window.frames[0].Array.prototype，想要arr instanceof Array為true，你得保證arr是由原始Array構造函數創建時才可行。

2.通過constructor判斷

我們知道，實例的構造函數屬性constructor指向構造函數，那麼通過constructor屬性也可以判斷是否為一個數組。
 

let a = [1,3,4];
 a.constructor === Array;//true
 

同樣，這種判斷也會存在多個全局環境的問題，導致的問題與instanceof相同。

  //為body創建並添加一個iframe標籤  var iframe = document.createElement('iframe');  document.body.appendChild(iframe);  //取得iframe對象的構造數組方法  xArray = window.frames[window.frames.length-1].Array;  //通過構造函數獲取一個實例  var arr = new xArray(1,2,3);   arr.constructor === Array;//false

3.通過Object.prototype.toString.call()判斷

Object.prototype.toString().call()可以獲取到對象的不同類型，例如

let a = [1,2,3]
 Object.prototype.toString.call(a) === '[object Array]';//true
 

它強大的地方在於不僅僅可以檢驗是否為數組，比如是否是一個函數，是否是數字等等

  //檢驗是否是函數  let a = function () {};  Object.prototype.toString.call(a) === '[object Function]';//true  //檢驗是否是數字  let b = 1;  Object.prototype.toString.call(a) === '[object Number]';//true

甚至對於多全局環境時， Object.prototype.toString().call()也能符合預期處理判斷。

  //為body創建並添加一個iframe標籤  var iframe = document.createElement('iframe');  document.body.appendChild(iframe);  //取得iframe對象的構造數組方法  xArray = window.frames[window.frames.length-1].Array;  //通過構造函數獲取一個實例  var arr = new xArray(1,2,3);   console.log(Object.prototype.toString.call(arr) === '[object Array]');//true

4.通過Array.isArray()判斷

Array.isArray() 用於確定傳遞的值是否是一個數組，返回一個布爾值。

let a = [1,2,3]
 Array.isArray(a);//true
 

簡單好用，而且對於多全局環境，Array.isArray() 同樣能準確判斷，但有個問題，Array.isArray() 是在ES5中提出，也就是說在ES5之前可能會存在不支持此方法的情況。怎麼解決呢？

三、判斷數組方法的最終推薦

當然還是用Array.isArray()，從ES5新增isArray()方法正是為了提供一個穩定可用的數組判斷方法，不可能專門為此提出的好東西不用，而對於ES5之前不支持此方法的問題，我們其實可以做好兼容進行自行封裝，像這樣：
 

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

那麼對於數組判斷的幾種方式也說完了，合理的推薦也給出了，有什麼問題或者錯誤的地方歡迎大家支持

參考資料：

Determining with absolute accuracy whether or not a JavaScript object is an array

Array.isArray()---MDN

instanceof---MDN