1. 程式人生 > 實用技巧 >判斷是否是陣列的幾種辦法

判斷是否是陣列的幾種辦法

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]';
  };
}