腳本之家服務器常用軟件

快捷導航

JavaScript中Array.isArray判斷數組的幾種方法

更新時間：2026年05月25日 08:28:21 作者：程序員小寒

在JavaScript中,判斷一個值是否為數組是很常見的需求,本文就來介紹一下Array.isArray判斷數組的幾種方法,具有一定的參考價值,感興趣的可以了解一下

1、方式一：JSON.stringify

可以通過 JSON.stringify 序列化字符串，然后判斷字符串是否以 [" 開頭，以 "] 結尾來判斷是否為數組。這其實和使用 JSON.stringify(obj) === '{}' 判斷一個對象是否是空對象的思路類似。

const arr = [];
console.log(JSON.stringify(arr).startsWith('[') && JSON.stringify(arr).endsWith(']')); // true

優(yōu)點：

兼容性好。

缺點：

需要序列化性能較差。
無法處理循環(huán)引用的數據，會報錯 TypeError: Converting circular structure to JSON。
判斷代碼也較為復雜。

const arr = [];
arr[0] = arr; // 添加循環(huán)引用
console.log(JSON.stringify(arr).startsWith('[') && JSON.stringify(arr).endsWith(']')); // 報錯 TypeError: Converting circular structure to JSON

2、方式二：instanceof

instanceof 可以判斷某個實例是否屬于某種類型，它內部會通過原型鏈往上一級一級查找，直到找到和當前對象的原型相等的原型。

console.log([] instanceof Array);      // true
console.log({} instanceof Array);      // false

但是原型鏈是可以被修改的，所以 instanceof 判斷結果可能不準確。比如我們可以利用 Object.setPrototypeOf(target, newProto) 來修改原型。

const arr = {};
Object.setPrototypeOf(arr, Array.prototype);
console.log(arr instanceof Array); // true

還有一種情況，就是跨 iframe 進行判斷時，instanceof 判斷結果可能不準確。

<!DOCTYPE html>
<html lang="en">

<body>
  <script>
    const iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    const iframeArray = iframe.contentWindow.Array;
    const iframeArr = new iframeArray();
    console.log(iframeArr instanceof Array);  // false
  </script>
</body>

</html>

這里其實 iframeArr 是一個數組，但是 instanceof 判斷結果卻是 false。

優(yōu)點：

簡單直觀。

缺點：

通過 Object.setPrototypeOf 修改原型后判斷不準確。
跨 iframe 失效。

3、方式三：constructor 屬性

每個實例對象都有一個 constructor 屬性，指向它的構造函數，所以通過 constructor 屬性可以判斷一個實例是否屬于某個類型。

console.log([].constructor === Array);  // true
console.log({}.constructor === Array);  // false

然而和原型一樣，constructor 屬性也是可以被修改的。

const arr = [];
arr.constructor = Object; // 修改 constructor
console.log(arr.constructor === Array); // false（被修改了導致判斷錯誤）

優(yōu)點：

簡單直觀。

缺點：

constructor 可被修改，判斷不準確。

4、方式四：Object.prototype.toString.call

Object.prototype.toString.call() 是 JavaScript 中一個非常強大的類型檢測方法，它可以獲取任意值的內部 [[Class]] 屬性，并以字符串形式返回其類型。

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

它是一個檢測數據類型的標準方法，它不僅可以檢查數組 Array、對象 Object，基本數據類型和其它引用類型像日期 Date、 正則 regexp 等都可以判斷出來，實際開發(fā)中通常會把它封裝成一個通用的類型檢測方法。

// 判斷特定類型
function isType(value, type) {
    return Object.prototype.toString.call(value) === `[object ${type}]`;
}

console.log(isType([], 'Array'));     // true
console.log(isType({}, 'Object'));    // true
console.log(isType(new Date(), 'Date')); // true
console.log(isType(/abc/, 'RegExp')); // true

但是在 es6 的 Symbol出現之后，可以通過 Symbol.toStringTag 屬性來控制其返回值，也會導致其判斷不準確。

const arr = {
  [Symbol.toStringTag]: 'Array'
}
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true

Symbol.toStringTag 也可以支持設置為任意值。

const obj = {
  [Symbol.toStringTag]: '111' // 可以設置為任意值
}
console.log(Object.prototype.toString.call(obj)); // [object 111]

優(yōu)點：

簡單直觀。
不僅可以判斷數組，基本數據類型和其它引用數據類型 Date、Regexp 也可以。

缺點：

代碼較長，并且可通過 Symbol.toStringTag 修改判斷結果。

5、方式五：Array.isArray（最推薦）

Array.isArray() 是 Array 的一個靜態(tài)方法，可以判斷一個值是否為數組。

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

優(yōu)點：

最可靠。
簡單直觀。

缺點：

兼容性問題，只支持 IE9+。

為什么 Array.isArray 是最靠譜的呢？

1. 通過判斷內部存儲的數據結構是否符合數組的數據結構定義。

數組是一種數據結構：

它是一種線性表數據結構，也就是它里面的數據是排成一條線一樣的，它的數據只有前和后兩個方向。除了數組，隊列、棧、鏈接也是線性表數據結構。
連續(xù)的內存空間。就是說數據中的元素在內存中是連續(xù)存儲的，正是因為這個特性，所以數據可以實現隨機訪問，也就是訪問數據中的每個元素花的時間就是一樣的，時間復雜度都是 O(1)，查詢數據特別快。

2. 它是一個原生方法，內部 C++ 編碼實現，我們從 js 代碼層面無法判斷數據內部的存儲結構，也就無法模擬實現。

小結

判斷是否是數組的方法	優(yōu)點	缺點	推薦度
Array.isArray()	標準、跨環(huán)境、最可靠	兼容性問題，只支持IE9+	?????
Object.prototype.toString.call()	最兼容、可靠	代碼較長，并且可通過 Symbol.toStringTag 修改判斷結果	????
instanceof	簡單直觀	通過 Object.setPrototypeOf 修改原型后判斷不準確，跨 iframe 失效	???
constructor	簡單	constructor 可被修改	??
JSON.stringify	兼容性好	無法處理循環(huán)引用、性能差	?

在平時實際前端項目開發(fā)中，如果需要判斷是否是數組，直接用 Array.isArray() 就好了，它內部通過 C++ 編碼實現，判斷其存儲結構是否為數組，是最可靠的判斷方法，如果需要封裝一個通用的數據類型判斷方法，可以采用 Object.prototype.toString.call()。

到此這篇關于JavaScript中Array.isArray判斷數組的幾種方法的文章就介紹到這了,更多相關JavaScript Array.isArray判斷數組內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: