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

1、通過instanceof判斷

instanceof運(yùn)算符用于檢驗(yàn)構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置，返回一個(gè)布爾值。

let a = [];
a instanceof Array; //true
let b = {};
b instanceof Array; //false

在上方代碼中，instanceof運(yùn)算符檢測(cè)Array.prototype屬性是否存在于變量a的原型鏈上，顯然a是一個(gè)數(shù)組，擁有Array.prototype屬性，所以為true。

需要注意的是，prototype屬性是可以修改的，所以并不是最初判斷為true就一定永遠(yuǎn)為真。

其次，當(dāng)我們的腳本擁有多個(gè)全局環(huán)境，例如html中擁有多個(gè)iframe對(duì)象，instanceof的驗(yàn)證結(jié)果可能不會(huì)符合預(yù)期，例如：

//為body創(chuàng)建并添加一個(gè)iframe對(duì)象
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
//取得iframe對(duì)象的構(gòu)造數(shù)組方法
xArray = window.frames[0].Array;
//通過構(gòu)造函數(shù)獲取一個(gè)實(shí)例
var arr = new xArray(1,2,3); 
arr instanceof Array;//false

導(dǎo)致這種問題是因?yàn)閕frame會(huì)產(chǎn)生新的全局環(huán)境，它也會(huì)擁有自己的Array.prototype屬性，讓不同環(huán)境下的屬性相同很明顯是不安全的做法，所以Array.prototype !== window.frames[0].Array.prototype，想要arr instanceof Array為true，你得保證arr是由原始Array構(gòu)造函數(shù)創(chuàng)建時(shí)才可行。

2、通過constructor判斷

我們知道，實(shí)例的構(gòu)造函數(shù)屬性constructor指向構(gòu)造函數(shù)，那么通過constructor屬性也可以判斷是否為一個(gè)數(shù)組。

let a = [1,3,4];
a.constructor === Array;//true

同樣，這種判斷也會(huì)存在多個(gè)全局環(huán)境的問題，導(dǎo)致的問題與instanceof相同。

3、通過Object.prototype.toString.call()判斷

Object.prototype.toString().call()可以獲取到對(duì)象的不同類型，多個(gè)全局環(huán)境也適用

// 檢驗(yàn)是否是數(shù)組
 let a = [1,2,3]
 Object.prototype.toString.call(a) === '[object Array]';//true
 //檢驗(yàn)是否是函數(shù)
 let b = function () {};
 Object.prototype.toString.call(b) === '[object Function]';//true
 //檢驗(yàn)是否是數(shù)字
 let c = 1;
 Object.prototype.toString.call(c) === '[object Number]';//true

4、通過Array.isArray()判斷

簡單好用，而且對(duì)于多全局環(huán)境，Array.isArray() 同樣能準(zhǔn)確判斷，但有個(gè)問題，Array.isArray() 是在ES5中提出，也就是說在ES5之前可能會(huì)存在不支持此方法的情況。

let a = [1,2,3]
Array.isArray(a);//true

最終推薦方法

if (!Array.isArray) {
 Array.isArray = function(arg) {
  return Object.prototype.toString.call(arg) === '[object Array]';
 };
}

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

最新評(píng)論