面試官提問： “在 JavaScript 中，如何判斷一個變量是不是數(shù)組？你能說出幾種方法？為什么 instanceof 在某些場景下會失效？”

判斷數(shù)組看似是基礎題，實則是考察你對 原型鏈、執(zhí)行環(huán)境 (Realm) 以及 ES 規(guī)范 理解深度的試金石。本文將從“快速結(jié)論”到“底層原理”為你全面解析。

一、 核心結(jié)論與快速回答

如果面試官要求快速回答，直接拋出以下結(jié)論：在現(xiàn)代開發(fā)中，唯一推薦的方法是 Array.isArray()。

二、 深度解析：四種方法的原理與陷阱

1. Array.isArray() (強烈推薦)

這是 ECMAScript 5 新增的靜態(tài)方法，專門用于判斷一個值是否為數(shù)組。它不涉及原型鏈的查找，是語言層面最標準、最直接的判斷方法。

• 優(yōu)點： 簡潔、準確、不受原型鏈污染、沒有跨 iframe 問題。
• 核心原理： 它檢查的是對象內(nèi)部的 “底層標簽” (Internal Slot)。這個標簽是根據(jù)對象本質(zhì)生成的，無論它來自哪個執(zhí)行環(huán)境，本質(zhì)上都是“數(shù)組”。

深度追問：為什么要設計這個方法？(Cross-Realm 問題)

這是面試中的高頻考點：為什么有了 instanceof 還需要 isArray？

根本原因在于：瀏覽器允許多個全局執(zhí)行環(huán)境（Realms）。

• 場景： 頁面 A 嵌入了一個 iframe B。
• 問題： 頁面 A 的 Array 構造函數(shù)和頁面 B 的 Array 構造函數(shù)是兩個完全不同的對象（內(nèi)存地址不同）。
• 結(jié)果：

1. 你在 B 里面聲明一個數(shù)組 let arr = []。
2. 你把 arr 傳給 A。
3. 在 A 里面執(zhí)行 arr instanceof Array。
4. 判斷邏輯： 實際上是在問 arr.__proto__ === window.Array.prototype 嗎？
5. 答案是 False。因為 arr 的原型指向的是 B.window.Array.prototype，而不是 A.window.Array.prototype。

Array.isArray 的優(yōu)勢就在于它無視這些環(huán)境差異，直接檢查對象本質(zhì)。

2. Object.prototype.toString.call() (兼容性之王)

在 ES5 之前，這是最通用的“萬能類型檢測法”。

• 原理： 對象的 toString() 方法默認返回 [object Type] 格式的字符串。但數(shù)組重寫了 toString，所以需要通過 call() 強制調(diào)用 Object 原型上的方法，獲取對象內(nèi)部的 [[Class]] 屬性值。
• 代碼示例：

Object.prototype.toString.call([]) === '[object Array]'; // true
Object.prototype.toString.call(new Date()); // "[object Date]"

• 優(yōu)點： 兼容性最好（可用于 IE6+），能準確區(qū)分出 JavaScript 的內(nèi)置類型（如 Date, RegExp, Function 等）。
• 缺點： 寫法繁瑣，需要大量的字符。

3. instanceof (原型鏈查找陷阱)

• 原理： A instanceof B 的核心是判斷 B 的原型是否在 A 的原型鏈上。

[] instanceof Array // true
// 因為 Array.prototype 在 [] 的原型鏈上

• 陷阱（面試重點）：

1. 跨 iframe 問題： 如上文所述，不同窗口環(huán)境下的構造函數(shù)不同，導致判斷失效。
2. 原型鏈可被修改： 如果有人惡意或不小心修改了原型鏈，會導致判斷錯誤。

4. constructor (極不可靠)

• 原理： 每個實例對象都有 constructor 屬性，指向創(chuàng)建該實例的構造函數(shù)。
• 代碼：

[].constructor === Array // true

• 陷阱： constructor 屬性非常容易被重寫，完全依賴于開發(fā)者自覺，因此極不可靠。

let obj = {};
obj.constructor = Array; // 隨意修改
console.log(obj.constructor === Array); // true，但它不是數(shù)組

三、 手寫 Polyfill (加分項)

如果面試官讓你實現(xiàn)一個兼容老舊瀏覽器的 Array.isArray，你可以直接寫出以下代碼。核心就是利用 Object.prototype.toString 進行降級處理。

if (!Array.isArray) {
  Array.isArray = function(arg) {
    // 核心原理：利用 Object.prototype.toString 獲取內(nèi)部 [[Class]] 屬性
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

四、 總結(jié)與最佳實踐

在現(xiàn)代前端項目開發(fā)中，請優(yōu)先且唯一使用 Array.isArray()。

• 理由： 它是 ES 規(guī)范定義的標準方法，語義最清晰，執(zhí)行效率高，且完美解決了跨窗口（iframe）判斷數(shù)組的痛點。
• 僅在需要兼容極低版本瀏覽器（如 IE8 及以下）且沒有 Polyfill 的極端情況下，才考慮使用 Object.prototype.toString。 

附：相關問答FAQs

1. 如何使用JavaScript判斷數(shù)組中是否存在重復元素？

通常可以使用以下方法來判斷一個數(shù)組中是否存在重復元素：

• 方法一： 使用Set數(shù)據(jù)結(jié)構。將數(shù)組轉(zhuǎn)化為Set，如果Set的長度小于原數(shù)組的長度，則說明存在重復元素。
• 方法二： 使用對象字面量來判斷。遍歷數(shù)組，將數(shù)組的元素作為對象的屬性，如果屬性值已經(jīng)存在，則說明存在重復元素。

2. JavaScript中如何找出數(shù)組中的重復元素？

如果你需要找出數(shù)組中的重復元素，可以使用以下方法：

• 方法一： 使用兩個循環(huán)來比較數(shù)組中的每個元素，如果發(fā)現(xiàn)相同的元素，則將其添加到一個新的數(shù)組中。
• 方法二： 使用對象字面量來統(tǒng)計元素出現(xiàn)的次數(shù)，然后篩選出出現(xiàn)次數(shù)大于1的元素。

3. 如何使用JavaScript刪除數(shù)組中的重復元素？

如果你想要刪除數(shù)組中的重復元素，可以嘗試以下方法：

• 方法一： 使用Set數(shù)據(jù)結(jié)構。將數(shù)組轉(zhuǎn)化為Set，然后再將Set轉(zhuǎn)化回數(shù)組。
• 方法二： 使用filter方法。遍歷數(shù)組，使用filter方法來篩選出只出現(xiàn)一次的元素，生成一個新的數(shù)組。
• 方法三： 使用reduce方法。遍歷數(shù)組，使用reduce方法來將重復元素過濾掉，生成一個新的數(shù)組。

到此這篇關于JavaScript判斷是不是數(shù)組的四種方法總結(jié)的文章就介紹到這了,更多相關JS判斷是不是數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論