JavaScript中如何判斷數組類型

前言

JavaScript中關於數組的斷定問題，一直都是一個必需要掌握的點，那麼，運用知識，如何判斷一個類型是數組，就須要有對JavaScript使用有着深刻的瞭解。

判斷方法

1、Array.isArray

ES5新增的數組方法，Array.isArray應該是咱們最早想到的斷定方式，如今應用的也比較普遍。

const arr = [1,2,3,4]
Array.isArray(arr)    // true

　　

若是是在支持ES5的瀏覽器中，用這樣的方式天然沒什麼問題，可是若是是在IE9如下版本，這個方法並未受到支持，這時候咱們就要用別的方式來判斷數組。

2、instanceof

通常來講，instanceof關鍵字，是用來判斷某個元素是否某對象構造函數實例。在數組判斷上，instanceof關鍵字也能夠進行數組的斷定。

const arr = [1, 2, 3, 4]
arr instanceof Array   // true

　　

instanceof支持的瀏覽器版本比較多，因此通常來講，用instanceof判斷，會比Array.isArray斷定的範圍要普遍。

3、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

　　

4、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斷定，勝出。

 

個人博客：http://www.gaoyunjiao.fun/?p=165