快捷導(dǎo)航

JavaScript判斷數(shù)組類型的方法

更新時(shí)間：2019年10月23日 16:58:23 作者：得閑讀書

這篇文章主要介紹了JavaScript判斷數(shù)組類型的方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

JavaScript中關(guān)于數(shù)組的判定問題，一直都是一個(gè)必須要掌握的點(diǎn)，那么，運(yùn)用知識(shí)，如何判斷一個(gè)類型是數(shù)組，就需要有對(duì)JavaScript使用有著深入的了解。

判斷方法

一、Array.isArray

ES5新增的數(shù)組方法，Array.isArray應(yīng)該是我們最先想到的判定方式，現(xiàn)在應(yīng)用的也比較廣泛。

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

如果是在支持ES5的瀏覽器中，用這樣的方式自然沒什么問題，但是如果是在IE9以下版本，這個(gè)方法并未受到支持，這時(shí)候我們就要用別的方式來判斷數(shù)組。

二、instanceof

一般來說，instanceof關(guān)鍵字，是用來判斷某個(gè)元素是否某對(duì)象構(gòu)造函數(shù)實(shí)例。在數(shù)組判斷上，instanceof關(guān)鍵字也可以進(jìn)行數(shù)組的判定。

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

instanceof支持的瀏覽器版本比較多，所以一般來說，用instanceof判斷，會(huì)比Array.isArray判定的范圍要廣泛。

三、toString

對(duì)象的toString方式也可以判定數(shù)組類型，一般來說這種方式的判定是各大庫的一種Array.isArray的代替實(shí)現(xiàn)。

例如，polyfill中，就是如此實(shí)現(xiàn)：

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

除了以上的方式之外，我們還可以通過構(gòu)造函數(shù)來判定：

const arr = [1, 2, 3, 4]
arr.constructor === Array // true
arr.__proto__.constructor === Array //true

弊端

instanceof和constructor的判定也存在一些弊端，他們判定的數(shù)組必須定義在同一個(gè)頁面，否則將會(huì)判定為false。

如果在iframe中的數(shù)組判定，就會(huì)出錯(cuò)。

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

總結(jié)

由上述幾個(gè)方法判定，可以得出，其實(shí)polyfill的判定是最合理的，也最具有兼容性的一種判定。

利用toString判定，勝出。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: