JavaScript中如何判斷數組類型


前言

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判定,勝出。

 

我的博客:http://www.gaoyunjiao.fun/?p=165


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM