JS判斷數組四種實現方法詳解
一、前言
如何判斷一個對象或一個值是否是一個數組,在面試或工作中我們常常會遇到這個問題,既然出現頻率高,想著還是做個整理,那么本文主要基于幾種判斷方式,以及方式判斷的原理,是否存在問題展開討論。
二、判斷對象是否是數組的幾種方式
1.通過instanceof判斷
instanceof運算符用于檢驗構造函數的prototype屬性是否出現在對象的原型鏈中的任何位置,返回一個布爾值。
let a = [];a instanceof Array; //truelet 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
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。
相關文章: