一、前言

如何判斷一個(gè)對(duì)象或一個(gè)值是否是一個(gè)數(shù)組，在面試或工作中我們常常會(huì)遇到這個(gè)問題，既然出現(xiàn)頻率高，想著還是做個(gè)整理，那么本文主要基于幾種判斷方式，以及方式判斷的原理，是否存在問題展開討論。

二、判斷對(duì)象是否是數(shù)組的幾種方式

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相同。

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

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

Object.prototype.toString().call()可以獲取到對(duì)象的不同類型，例如

let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]';//true

它強(qiáng)大的地方在于不僅僅可以檢驗(yàn)是否為數(shù)組，比如是否是一個(gè)函數(shù)，是否是數(shù)字等等

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

甚至對(duì)于多全局環(huán)境時(shí)， Object.prototype.toString().call()也能符合預(yù)期處理判斷。

//為body創(chuàng)建并添加一個(gè)iframe標(biāo)簽
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
//取得iframe對(duì)象的構(gòu)造數(shù)組方法
xArray = window.frames[window.frames.length-1].Array;
//通過構(gòu)造函數(shù)獲取一個(gè)實(shí)例
var arr = new xArray(1,2,3); 
console.log(Object.prototype.toString.call(arr) === '[object Array]');//true

4.通過Array.isArray()判斷

Array.isArray() 用于確定傳遞的值是否是一個(gè)數(shù)組，返回一個(gè)布爾值。

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

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

三、判斷數(shù)組方法的最終推薦

當(dāng)然還是用Array.isArray()，從ES5新增isArray()方法正是為了提供一個(gè)穩(wěn)定可用的數(shù)組判斷方法，不可能專門為此提出的好東西不用，而對(duì)于ES5之前不支持此方法的問題，我們其實(shí)可以做好兼容進(jìn)行自行封裝，像這樣：

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

那么對(duì)于數(shù)組判斷的幾種方式也說完了，合理的推薦也給出了，有什么問題或者錯(cuò)誤的地方歡迎大家支持

參考資料：

Determining with absolute accuracy whether or not a JavaScript object is an array

Array.isArray()---MDN

instanceof---MDN

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

最新評(píng)論