摘要：比如我們今天要討論的，在當(dāng)中如何判斷一個(gè)數(shù)組是數(shù)組。在數(shù)組的原型鏈上也能找到構(gòu)造函數(shù)由上面的幾行代碼可以看出，使用運(yùn)算符可以分辨數(shù)組和對(duì)象，可以判斷數(shù)組是數(shù)組。用判斷實(shí)例化的數(shù)組擁有一個(gè)屬性，這個(gè)屬性指向生成這個(gè)數(shù)組的方法。

如果你沒有注意過這個(gè)問題，那么這個(gè)標(biāo)題應(yīng)該會(huì)讓你感到困惑，判斷數(shù)據(jù)類型這么基礎(chǔ)的問題能有什么坑呢？

少年，你不能太天真了，我們朝夕面對(duì)的這門語(yǔ)言，可是JavaScript呀，任何你覺得已經(jīng)習(xí)以為常的東西都可能瞬間轉(zhuǎn)化成一個(gè)大坑，令人百思不得其解。

但是正是因?yàn)橥瑯拥脑?，我們可以在學(xué)習(xí)和使用JavaScript這門語(yǔ)言的時(shí)候提出和討論一些這門語(yǔ)言獨(dú)有的，十分有趣的問題。比如我們今天要討論的，在JavaScript當(dāng)中如何判斷一個(gè)數(shù)組是數(shù)組。

JavaScript有五種方法可以確定一個(gè)值到底是什么類型，分別是typeof運(yùn)算符，constructor法，instanceof運(yùn)算符，Object.prototype.toString方法以及Array.isArray法.

typeof是javascript原生提供的判斷數(shù)據(jù)類型的運(yùn)算符，它會(huì)返回一個(gè)表示參數(shù)的數(shù)據(jù)類型的字符串，例如：

const s = "hello";
console.log(typeof(s))//String

以下是我在MDN的文檔中找到的一張包含typeof運(yùn)算法的針對(duì)不同參數(shù)的輸出結(jié)果的表格：

從這張表格可以看出，數(shù)組被歸到了Any other object當(dāng)中，所以typeof返回的結(jié)果應(yīng)該是Object，并沒有辦法區(qū)分?jǐn)?shù)組，對(duì)象，null等原型鏈上都有Object的數(shù)據(jù)類型。

const a = null;
const b = {};
const c= [];
console.log(typeof(a)); //Object
console.log(typeof(b)); //Object
console.log(typeof(c)); //Object

運(yùn)行上面的代碼就會(huì)發(fā)現(xiàn)，在參數(shù)為數(shù)組，對(duì)象或者null時(shí)，typeof返回的結(jié)果都是object，可以使用這種方法并不能識(shí)別出數(shù)組，因此，在JavaScript項(xiàng)目中用typeof來(lái)判斷一個(gè)位置類型的數(shù)據(jù)是否為數(shù)組，是非常不靠譜的。

既然typeof無(wú)法用于判斷數(shù)組是否為數(shù)組，那么用instance運(yùn)算符來(lái)判斷是否可行呢？要回答這個(gè)問題，我們首先得了解instanceof運(yùn)算法是干嘛用的。

instanceof運(yùn)算符可以用來(lái)判斷某個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象是否存在于另外一個(gè)要檢測(cè)對(duì)象的原型鏈上。在使用的時(shí)候語(yǔ)法如下：

object instanceof constructor

用我的理解來(lái)說，就是要判斷一個(gè)Object是不是數(shù)組（這里不是口誤，在JavaScript當(dāng)中，數(shù)組實(shí)際上也是一種對(duì)象），如果這個(gè)Object的原型鏈上能夠找到Array構(gòu)造函數(shù)的話，那么這個(gè)Object應(yīng)該及就是一個(gè)數(shù)組，如果這個(gè)Object的原型鏈上只能找到Object構(gòu)造函數(shù)的話，那么它就不是一個(gè)數(shù)組。

const a = [];
const b = {};
console.log(a instanceof Array);//true
console.log(a instanceof Object);//true,在數(shù)組的原型鏈上也能找到Object構(gòu)造函數(shù)
console.log(b instanceof Array);//false

由上面的幾行代碼可以看出，使用instanceof運(yùn)算符可以分辨數(shù)組和對(duì)象，可以判斷數(shù)組是數(shù)組。

實(shí)例化的數(shù)組擁有一個(gè)constructor屬性，這個(gè)屬性指向生成這個(gè)數(shù)組的方法。

const a = [];
console.log(a.constructor);//function Array(){ [native code] }

以上的代碼說明，數(shù)組是有一個(gè)叫Array的函數(shù)實(shí)例化的。
如果被判斷的對(duì)象是其他的數(shù)據(jù)類型的話，結(jié)果如下：

const o = {};
console.log(o.constructor);//function Object(){ [native code] }
const r = /^[0-9]$/;
console.log(r.constructor);//function RegExp() { [native code] }
const n = null;
console.log(n.constructor);//報(bào)錯(cuò)

看到這里，你可能會(huì)覺得這也是一種靠譜的判斷數(shù)組的方法，我們可以用以下的方式來(lái)判斷:

const a = [];
console.log(a.constructor == Array);//true

但是，很遺憾的通知你，constructor屬性是可以改寫的，如果你一不小心作死改了constructor屬性的話，那么使用這種方法就無(wú)法判斷出數(shù)組的真是身份了，寫到這里，我不禁想起了無(wú)間道的那段經(jīng)典對(duì)白，梁朝偉：“對(duì)不起，我是警察?！眲⒌氯A：“誰(shuí)知道呢？”。

//定義一個(gè)數(shù)組
const a = [];
//作死將constructor屬性改成了別的
a.contrtuctor = Object;
console.log(a.constructor == Array);//false (哭臉)
console.log(a.constructor == Object);//true (哭臉)
console.log(a instanceof Array);//true (instanceof火眼金睛)

可以看出，constructor屬性被修改之后，就無(wú)法用這個(gè)方法判斷數(shù)組是數(shù)組了，除非你能保證不會(huì)發(fā)生constructor屬性被改寫的情況，否則用這種方法來(lái)判斷數(shù)組也是不靠譜的。

另一個(gè)行之有效的方法就是使用Object.prototype.toString方法來(lái)判斷，每一個(gè)繼承自O(shè)bject的對(duì)象都擁有toString的方法。

如果一個(gè)對(duì)象的toString方法沒有被重寫過的話，那么toString方法將會(huì)返回"[object type]"，其中的type代表的是對(duì)象的類型，根據(jù)type的值，我們就可以判斷這個(gè)疑似數(shù)組的對(duì)象到底是不是數(shù)組了。

你可能會(huì)糾結(jié)，為什么不是直接調(diào)用數(shù)組，或則字符串自己的的toString方法呢？我們?cè)囈辉嚲椭懒恕?/p>

const a = ["Hello","Howard"];
const b = {0:"Hello",1:"Howard"};
const c = "Hello Howard";
a.toString();//"Hello,Howard"
b.toString();//"[object Object]"
c.toString();//"Hello,Howard"

從上面的代碼可以看出，除了對(duì)象之外，其他的數(shù)據(jù)類型的toString返回的都是內(nèi)容的字符創(chuàng)，只有對(duì)象的toString方法會(huì)返回對(duì)象的類型。所以要判斷除了對(duì)象之外的數(shù)據(jù)的數(shù)據(jù)類型，我們需要“借用”對(duì)象的toString方法，所以我們需要使用call或者apply方法來(lái)改變toString方法的執(zhí)行上下文。

const a = ["Hello","Howard"];
const b = {0:"Hello",1:"Howard"};
const c = "Hello Howard";
Object.prototype.toString.call(a);//"[object Array]"
Object.prototype.toString.call(b);//"[object Object]"
Object.prototype.toString.call(c);//"[object String]"

使用apply方法也能達(dá)到同樣的效果：

const a = ["Hello","Howard"];
const b = {0:"Hello",1:"Howard"};
const c = "Hello Howard";
Object.prototype.toString.apply(a);//"[object Array]"
Object.prototype.toString.apply(b);//"[object Object]"
Object.prototype.toString.apply(c);//"[object String]"

總結(jié)一下，我們就可以用寫一個(gè)方法來(lái)判斷數(shù)組是否為數(shù)組：

const isArray = (something)=>{
    return Object.prototype.toString.call(something) === "[object Array]";
}

cosnt a = [];
const b = {};
isArray(a);//true
isArray(b);//false

但是，如果你非要在創(chuàng)建這個(gè)方法之前這么來(lái)一下，改變了Object原型鏈上的toString方法，那我真心幫不了你了...

//重寫了toString方法
Object.prototype.toString = () => {
    alert("你吃過了么？");
}
//調(diào)用String方法
const a = [];
Object.prototype.toString.call(a);//彈框問你吃過飯沒有

當(dāng)然了，只有在瀏覽器當(dāng)中才能看到alert彈框，這個(gè)我就不解釋了。

為什么把這種方法放在最后講呢？因?yàn)樗俏夷壳坝龅竭^的最靠譜的判斷數(shù)組的方法了，當(dāng)參數(shù)為數(shù)組的時(shí)候，isArray方法返回true，當(dāng)參數(shù)不為數(shù)組的時(shí)候，isArray方法返回false。

const a = [];
const b = {};
Array.isArray(a);//true
Array.isArray(b);//false

我試著在調(diào)用這個(gè)方法之前重寫了Object.prototype.toString方法：

Object.prototype.toString = ()=>{
    console.log("Hello Howard");
}
const a = [];
Array.isArray(a);//true

并不影響判斷的結(jié)果。
我又試著修改了constructor對(duì)象：

const a = [];
const b = {};
a.constructor = b.constructor;
Array.isArray(a);//true

OK，還是不影響判斷的結(jié)果。

可見，它與instance運(yùn)算符判斷的方法以及Object.prototype.toString法并不相同，一些列的修改并沒有影響到判斷的結(jié)果。

你可以放心大膽的使用Array.isArray去判斷一個(gè)對(duì)象是不是數(shù)組。
除非你不小心重寫了Array.isArray方法本身。。

重要補(bǔ)充：有讀者朋友在評(píng)論中提醒我，Array.isArray是ES5標(biāo)準(zhǔn)中增加的方法，部分比較老的瀏覽器可能會(huì)有兼容問題，所以為了增強(qiáng)健壯性，建議還是給Array.isArray方法進(jìn)行判斷，增強(qiáng)兼容性，重新封裝的方法如下：

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

作者：方浩，轉(zhuǎn)載請(qǐng)注明出處?。?！
文章源鏈接：https://segmentfault.com/a/11...

我的微信公眾號(hào)：webcoding ,歡迎掃碼關(guān)注