卡卡網(wǎng)

在上一文中，介紹了JavaScript檢查對(duì)象是否數(shù)組的5種方法，不過未對(duì)它們的性能進(jìn)行比較，本文將介紹，這5種方法中，哪種方法最好用？哪種方法運(yùn)行起來是最快的？

各種方法的速度比較

有開發(fā)人員使用 jsPerf 比較了在 JavaScript 中檢查數(shù)組的各種方法，下面是得到的結(jié)果：

點(diǎn)擊圖片放大

你如果對(duì)這幾種方法還不夠了解，請(qǐng)參看文章JavaScript檢查對(duì)象是否數(shù)組的5種方法。

結(jié)果顯示，Array.isArray() 和 .constructor 或者 instanceof 一樣快，但是 Object.prototype.toString.call([]) 比較慢。

這個(gè)結(jié)果可能讓一些人比較失望，因?yàn)楦嗳耸褂玫姆椒ㄊ?Object.prototype.toString.call([])，而這種方法卻是最慢的。

結(jié)果顯示Array.isArray()的速度是最快的，盡管你的個(gè)人偏好可能并不是它。

使用帶有空檢查的 .constructor，運(yùn)行速度排在倒數(shù)第二。

但是，如果你是 Object.prototype.toString.call([]) 的粉絲，請(qǐng)不要擔(dān)心！差異表明，這種稍慢的方法仍然非?？欤涸谖业募矣?PC 上每秒執(zhí)行超過 700,000,000 次操作。

因此，除非你進(jìn)行數(shù)萬億次數(shù)組檢查，否則通過將任何一種方法換成另一種方法，你不會(huì)看到代碼速度的顯著差異。 

5種檢查方法使用哪種合適？

因?yàn)殛P(guān)鍵字 typeof 為 null 和所有對(duì)象（包括數(shù)組）返回“object”，所以檢查數(shù)組需要另外的方法。

特定于數(shù)組的方法

ES5 輔助方法 Array.isArray() 將快速簡單地告訴你任何 JavaScript 變量是否為數(shù)組： Array.isArray([]) // true，它適用于 null 和 undefined（但不適用于未聲明的變量）。

自 Internet Explorer 9 以來，所有瀏覽器都廣泛支持 Array.isArray() 方法，因?yàn)樗?ECMAScript 5 規(guī)范的一部分。

你可能會(huì)看到使用了 instanceof：[] instanceof Array // true，但不推薦使用 instanceof，因?yàn)樗?iframe 中不起作用。

適用于任何對(duì)象的方法

有幾種方法可用于檢查數(shù)組，因?yàn)樗鼈兛捎糜诖_定任何 JavaScript 對(duì)象的類型。

更通用的方法 Object.prototype.toString.call([]) // "[object Array]" 將告訴你任何值是什么類型的對(duì)象，包括原語。

為了只捕獲類型，可以使用 .slice() 處理該字符串： Object.prototype.toString.call([]).slice(8,-1) // Array

同樣， .constructor 屬性將返回 JavaScript 值的構(gòu)造函數(shù)。對(duì)于數(shù)組，這是內(nèi)置的全局函數(shù) Array()。

該函數(shù)可以與全局對(duì)象進(jìn)行比較，或者構(gòu)造函數(shù)的 .name 屬性可以作為字符串訪問：[].constructor.name // "Array"。

但是，.constructor 的缺點(diǎn)是可以為其分配一個(gè)新值，從而否定你的數(shù)組檢查： [].constructor = 3 // 有效

檢查未聲明的數(shù)組

關(guān)鍵字 typeof 不會(huì)將數(shù)組與其他對(duì)象區(qū)分開來，盡管 typeof 對(duì)于篩選出未聲明的變量仍然很有用。

當(dāng) typeof 關(guān)鍵字返回“object”時(shí)，我們知道變量已被聲明并分配了一個(gè)對(duì)象或一個(gè)空值。

同時(shí)，typeof 將為未聲明的變量返回“undefined”而不是拋出 ReferenceError，如果你認(rèn)為你可能正在使用未聲明的變量，則首先檢查 typeof 很有用。

一旦我們知道變量是使用 typeof 聲明的（無論是 === "object" 還是 !== "undefined"），我們就可以確定地使用 Array.isArray()。

檢查空數(shù)組

最后，當(dāng)我們確定我們有一個(gè)數(shù)組時(shí)（即當(dāng) Array.isArray() 返回 true 時(shí)），我們可以使用 .length 檢查數(shù)組是否為空。

.length 為 0 表示一個(gè)空的 JavaScript 數(shù)組 [] ，而一個(gè) .length > 0 的數(shù)組表示一個(gè)非空數(shù)組。

請(qǐng)注意，空數(shù)組 [] 是真實(shí)的，這意味著它在評(píng)估為布爾值時(shí)返回 true。（[] 是真實(shí)的，因?yàn)樗袑?duì)象都是真實(shí)的。）

檢查數(shù)組的最佳方法

我介紹了 5 種不同的檢查 JavaScript 數(shù)組的方法。我在編碼時(shí)通常使用 Array.isArray() 有幾個(gè)原因：

• Array.isArray() 快速且得到廣泛支持。
• Array.isArray() 是顯式的，使您的代碼更具可讀性。
• Array.isArray() 為 null 和未定義返回 false。

有時(shí)，在我擔(dān)心未聲明變量的罕見情況下，我會(huì)將數(shù)組檢查包含在 if(typeof !== "undefined") 語句中。

總結(jié)

本文介紹了JavaScript檢查對(duì)象是否數(shù)組的幾種方法的速度比較，以及各種方法的優(yōu)點(diǎn)和缺點(diǎn)。在使用任何一種方法的時(shí)候，都應(yīng)該考慮其存在的問題，以免判斷失準(zhǔn)。

參考文章

• 詳細(xì)介紹5種方法檢查JavaScript對(duì)象是否數(shù)組
• 【實(shí)例比較】JS檢查變量是否數(shù)組的2種方法

相關(guān)文章

• 5個(gè)示例介紹如何在JS中解構(gòu)數(shù)組和對(duì)象
• 兩種簡潔又安全的JS遍歷對(duì)象屬性的寫法
• 5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)
• 3種方法JS和jQuery判斷對(duì)象是否為空
• 3種方法判斷JS對(duì)象是否具有某一屬性
• 【如何合理使用】JavaScript訪問對(duì)象屬性的3種方法
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

標(biāo)簽: 數(shù)組  對(duì)象