為什么判斷數(shù)組這么難？

在 JavaScript 中，數(shù)組本質(zhì)上也是一種對象。

console.log(typeof []); // "object"
console.log(typeof {}); // "object"

因?yàn)?typeof 只能區(qū)分基本類型（string, number, boolean, undefined, symbol, bigint）和引用類型（統(tǒng)一返回 object，函數(shù)返回 function），所以它無法直接告訴我們：“嘿，這是個(gè)數(shù)組！”

我們需要更高級的手段來揭開它的真面目。

1. 王者方案：Array.isArray()

這是 ES5 引入的標(biāo)準(zhǔn)方法，也是現(xiàn)代開發(fā)中的首選。

console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray("hello")); // false
console.log(Array.isArray(null)); // false

優(yōu)點(diǎn)

• 語義清晰：代碼可讀性極高，一眼就能看懂意圖。
• 準(zhǔn)確可靠：內(nèi)部實(shí)現(xiàn)機(jī)制完善，能正確處理各種邊界情況。
• 跨上下文安全：即使數(shù)組來自不同的 iframe 或 window，它依然能正確識(shí)別（因?yàn)樗灰蕾囋玩溊^承關(guān)系，而是檢查內(nèi)部標(biāo)簽）。

缺點(diǎn)

• 兼容性：不支持 IE8 及以下版本（但在 2024 年，這幾乎不再是問題）。

博主建議：
無腦選它！ 除非你有極其特殊的兼容需求，否則 Array.isArray 就是你的唯一選擇。

2. 經(jīng)典方案：instanceof

instanceof 運(yùn)算符用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對象的原型鏈上。

const arr = [];
console.log(arr instanceof Array); // true

const obj = {};
console.log(obj instanceof Array); // false

優(yōu)點(diǎn)

• 直觀：符合面向?qū)ο缶幊痰乃季S邏輯，“這個(gè)實(shí)例是不是由 Array 構(gòu)造函數(shù)創(chuàng)建的？”

缺點(diǎn)

跨上下文失效：這是最大的坑！
如果頁面中有多個(gè) iframe，每個(gè) iframe 都有自己獨(dú)立的執(zhí)行環(huán)境（也就是獨(dú)立的 Array 構(gòu)造函數(shù)）。

// 假設(shè) iframe 中的數(shù)組傳到了主窗口
iframeArray instanceof Array; // false!
// 因?yàn)?iframeArray 的原型鏈指向的是 iframe 里的 Array.prototype，
// 而主窗口里的 Array 是另一個(gè)構(gòu)造函數(shù)。

• 可被篡改：如果開發(fā)者手動(dòng)修改了原型鏈，instanceof 可能會(huì)給出錯(cuò)誤結(jié)果。

3. 通用方案：Object.prototype.toString

這是一種“黑科技”寫法，利用對象內(nèi)部的 [[Class]] 屬性（在 ES5 之前稱為 Class 內(nèi)部屬性，現(xiàn)在通過 toString 暴露）。

const arr = [];
console.log(Object.prototype.toString.call(arr)); // "[object Array]"

const obj = {};
console.log(Object.prototype.toString.call(obj)); // "[object Object]"

const str = "hello";
console.log(Object.prototype.toString.call(str)); // "[object String]"

優(yōu)點(diǎn)

• 萬能 鑰匙：不僅能判斷數(shù)組，還能精準(zhǔn)判斷 Date, RegExp, Function, Null, Undefined 等所有內(nèi)置類型。
• 跨上下文安全：和 Array.isArray 一樣，它不受不同 window/iframe 的影響，因?yàn)樗x取的是底層引擎標(biāo)記。

缺點(diǎn)

• 寫法繁瑣：Object.prototype.toString.call(obj) 太長，容易寫錯(cuò)。
• 可讀性差：新手可能看不懂這是在干嘛。

技巧：
你可以封裝一個(gè)工具函數(shù)：

const typeCheck = (obj) => Object.prototype.toString.call(obj).slice(8, -1);
console.log(typeCheck([])); // "Array"

4. 避坑指南：typeof與constructor

陷阱 1：typeof

如前所述，typeof [] 返回 "object"，完全無法區(qū)分?jǐn)?shù)組和普通對象。千萬別用！

陷阱 2：constructor

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

看起來不錯(cuò)？但它有兩個(gè)致命弱點(diǎn)：

可被修改：arr.constructor 是可以被人為賦值的，不可信。

arr.constructor = String;
console.log(arr.constructor === Array); // false (誤判!)

null/undefined 報(bào)錯(cuò)：null 和 undefined 沒有構(gòu)造函數(shù)，訪問會(huì)報(bào)錯(cuò)。

5. 跨框架/跨窗口場景的特殊陷阱

這是高級前端面試的?？汀?/p>

場景：你的主頁面嵌入了一個(gè) iframe，iframe 里有一個(gè)數(shù)組 iframeArr，你把它傳回主頁面。

結(jié)論：
在涉及多窗口、Web Worker 或微前端架構(gòu)時(shí)，嚴(yán)禁使用 instanceof 判斷數(shù)組，必須使用 Array.isArray 或 toString 方法。

6.  總結(jié)與最佳實(shí)踐

博主寄語：
判斷數(shù)組看似簡單，實(shí)則暗藏玄機(jī)。

記住一條鐵律：
永遠(yuǎn)優(yōu)先使用 Array.isArray()。
它不僅是最標(biāo)準(zhǔn)的 API，也是最安全、最易讀的選擇。
只有在需要同時(shí)判斷多種類型（如寫一個(gè)通用的 typeOf 工具庫）時(shí)，才考慮使用 Object.prototype.toString。

以上就是JS精準(zhǔn)判斷一個(gè)對象是不是數(shù)組的方法的詳細(xì)內(nèi)容，更多關(guān)于JS判斷對象是不是數(shù)組的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論