前言
JavaScript中關於數組的判定問題,一直都是一個必須要掌握的點,那么,運用知識,如何判斷一個類型是數組,就需要有對JavaScript使用有着深入的了解。
判斷方法
一、Array.isArray
ES5新增的數組方法,Array.isArray應該是我們最先想到的判定方式,現在應用的也比較廣泛。
const arr = [1,2,3,4] Array.isArray(arr) // true
如果是在支持ES5的瀏覽器中,用這樣的方式自然沒什么問題,但是如果是在IE9以下版本,這個方法並未受到支持,這時候我們就要用別的方式來判斷數組。
二、instanceof
一般來說,instanceof關鍵字,是用來判斷某個元素是否某對象構造函數實例。在數組判斷上,instanceof關鍵字也可以進行數組的判定。
const arr = [1, 2, 3, 4] arr instanceof Array // true
instanceof支持的瀏覽器版本比較多,所以一般來說,用instanceof判斷,會比Array.isArray判定的范圍要廣泛。
三、toString
對象的toString方式也可以判定數組類型,一般來說這種方式的判定是各大庫的一種Array.isArray的代替實現。
例如,polyfill中,就是如此實現:
if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[object Array]'; }; } const arr = [1, 2, 3, 4] Object.prototype.toString.call(arr) === '[Object Array]' // true
四、constructor
除了以上的方式之外,我們還可以通過構造函數來判定:
const arr = [1, 2, 3, 4] arr.constructor === Array // true arr.__proto__.constructor === Array //true
弊端
instanceof和constructor的判定也存在一些弊端,他們判定的數組必須定義在同一個頁面,否則將會判定為false。
如果在iframe中的數組判定,就會出錯。
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); xArray = window.frames[window.frames.length-1].Array; var arr = new xArray(1,2,3); // [1,2,3] // Correctly checking for Array Array.isArray(arr); // true // Considered harmful, because doesn't work through iframes arr instanceof Array; // false arr.constructor === Array; // false
總結
由上述幾個方法判定,可以得出,其實polyfill的判定是最合理的,也最具有兼容性的一種判定。
利用toString判定,勝出。