JavaScript中Array.isArray判斷數(shù)組的幾種方法
在 JavaScript 中，如何判斷一個(gè)值是否為數(shù)組是很常見(jiàn)的需求，一般有以下幾種方法。
1、方式一：JSON.stringify
可以通過(guò) JSON.stringify 序列化字符串，然后判斷字符串是否以 [" 開頭，以 "] 結(jié)尾來(lái)判斷是否為數(shù)組。這其實(shí)和使用 JSON.stringify(obj) === '{}' 判斷一個(gè)對(duì)象是否是空對(duì)象的思路類似。
const arr = [];
console.log(JSON.stringify(arr).startsWith('[') && JSON.stringify(arr).endsWith(']')); // true
優(yōu)點(diǎn)：
- 兼容性好。
缺點(diǎn)：
- 需要序列化性能較差。
- 無(wú)法處理循環(huán)引用的數(shù)據(jù)，會(huì)報(bào)錯(cuò)
TypeError: Converting circular structure to JSON。 - 判斷代碼也較為復(fù)雜。
const arr = [];
arr[0] = arr; // 添加循環(huán)引用
console.log(JSON.stringify(arr).startsWith('[') && JSON.stringify(arr).endsWith(']')); // 報(bào)錯(cuò) TypeError: Converting circular structure to JSON
2、方式二：instanceof
instanceof 可以判斷某個(gè)實(shí)例是否屬于某種類型，它內(nèi)部會(huì)通過(guò)原型鏈往上一級(jí)一級(jí)查找，直到找到和當(dāng)前對(duì)象的原型相等的原型。
console.log([] instanceof Array); // true
console.log({} instanceof Array); // false
但是原型鏈?zhǔn)强梢员恍薷牡?/strong>，所以 instanceof 判斷結(jié)果可能不準(zhǔn)確。比如我們可以利用 Object.setPrototypeOf(target, newProto) 來(lái)修改原型。
const arr = {};
Object.setPrototypeOf(arr, Array.prototype);
console.log(arr instanceof Array); // true
還有一種情況，就是跨 iframe 進(jìn)行判斷時(shí)，instanceof 判斷結(jié)果可能不準(zhǔn)確。
<!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>
這里其實(shí) iframeArr 是一個(gè)數(shù)組，但是 instanceof 判斷結(jié)果卻是 false。
優(yōu)點(diǎn)：
- 簡(jiǎn)單直觀。
缺點(diǎn)：
- 通過(guò)
Object.setPrototypeOf修改原型后判斷不準(zhǔn)確。 - 跨
iframe失效。
3、方式三：constructor 屬性
每個(gè)實(shí)例對(duì)象都有一個(gè) constructor 屬性，指向它的構(gòu)造函數(shù)，所以通過(guò) constructor 屬性可以判斷一個(gè)實(shí)例是否屬于某個(gè)類型。
console.log([].constructor === Array); // true
console.log({}.constructor === Array); // false
然而和原型一樣，constructor 屬性也是可以被修改的。
const arr = []; arr.constructor = Object; // 修改 constructor console.log(arr.constructor === Array); // false（被修改了導(dǎo)致判斷錯(cuò)誤）
優(yōu)點(diǎn)：
- 簡(jiǎn)單直觀。
缺點(diǎn)：
constructor可被修改，判斷不準(zhǔn)確。
4、方式四：Object.prototype.toString.call
Object.prototype.toString.call() 是 JavaScript 中一個(gè)非常強(qiáng)大的類型檢測(cè)方法，它可以獲取任意值的內(nèi)部 [[Class]] 屬性，并以字符串形式返回其類型。
const arr = []; console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
它是一個(gè)檢測(cè)數(shù)據(jù)類型的標(biāo)準(zhǔn)方法，它不僅可以檢查數(shù)組 Array、對(duì)象 Object，基本數(shù)據(jù)類型和其它引用類型像日期 Date、 正則 regexp 等都可以判斷出來(lái)，實(shí)際開發(fā)中通常會(huì)把它封裝成一個(gè)通用的類型檢測(cè)方法。
// 判斷特定類型
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出現(xiàn)之后，可以通過(guò) Symbol.toStringTag 屬性來(lái)控制其返回值，也會(huì)導(dǎo)致其判斷不準(zhǔn)確。
const arr = {
[Symbol.toStringTag]: 'Array'
}
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
Symbol.toStringTag 也可以支持設(shè)置為任意值。
const obj = {
[Symbol.toStringTag]: '111' // 可以設(shè)置為任意值
}
console.log(Object.prototype.toString.call(obj)); // [object 111]
優(yōu)點(diǎn)：
- 簡(jiǎn)單直觀。
- 不僅可以判斷數(shù)組，基本數(shù)據(jù)類型和其它引用數(shù)據(jù)類型
Date、Regexp也可以。
缺點(diǎn)：
- 代碼較長(zhǎng)，并且可通過(guò)
Symbol.toStringTag修改判斷結(jié)果。
5、方式五：Array.isArray（最推薦）
Array.isArray() 是 Array 的一個(gè)靜態(tài)方法，可以判斷一個(gè)值是否為數(shù)組。
const arr = []; console.log(Array.isArray(arr)); // true
優(yōu)點(diǎn)：
- 最可靠。
- 簡(jiǎn)單直觀。
缺點(diǎn)：
- 兼容性問(wèn)題，只支持
IE9+。
為什么 Array.isArray 是最靠譜的呢？
1. 通過(guò)判斷內(nèi)部存儲(chǔ)的數(shù)據(jù)結(jié)構(gòu)是否符合數(shù)組的數(shù)據(jù)結(jié)構(gòu)定義。
數(shù)組是一種數(shù)據(jù)結(jié)構(gòu)：
- 它是一種線性表數(shù)據(jù)結(jié)構(gòu)，也就是它里面的數(shù)據(jù)是排成一條線一樣的，它的數(shù)據(jù)只有前和后兩個(gè)方向。除了數(shù)組，隊(duì)列、棧、鏈接也是線性表數(shù)據(jù)結(jié)構(gòu)。
- 連續(xù)的內(nèi)存空間。就是說(shuō)數(shù)據(jù)中的元素在內(nèi)存中是連續(xù)存儲(chǔ)的，正是因?yàn)檫@個(gè)特性，所以數(shù)據(jù)可以實(shí)現(xiàn)隨機(jī)訪問(wèn)，也就是訪問(wèn)數(shù)據(jù)中的每個(gè)元素花的時(shí)間就是一樣的，時(shí)間復(fù)雜度都是 O(1)，查詢數(shù)據(jù)特別快。
2. 它是一個(gè)原生方法，內(nèi)部 C++ 編碼實(shí)現(xiàn)，我們從 js 代碼層面無(wú)法判斷數(shù)據(jù)內(nèi)部的存儲(chǔ)結(jié)構(gòu)，也就無(wú)法模擬實(shí)現(xiàn)。
小結(jié)
| 判斷是否是數(shù)組的方法 | 優(yōu)點(diǎn) | 缺點(diǎn) | 推薦度 |
|---|---|---|---|
| Array.isArray() | 標(biāo)準(zhǔn)、跨環(huán)境、最可靠 | 兼容性問(wèn)題，只支持IE9+ | ????? |
| Object.prototype.toString.call() | 最兼容、可靠 | 代碼較長(zhǎng)，并且可通過(guò) Symbol.toStringTag 修改判斷結(jié)果 | ???? |
| instanceof | 簡(jiǎn)單直觀 | 通過(guò) Object.setPrototypeOf 修改原型后判斷不準(zhǔn)確，跨 iframe 失效 | ??? |
| constructor | 簡(jiǎn)單 | constructor 可被修改 | ?? |
| JSON.stringify | 兼容性好 | 無(wú)法處理循環(huán)引用、性能差 | ? |
在平時(shí)實(shí)際前端項(xiàng)目開發(fā)中，如果需要判斷是否是數(shù)組，直接用 Array.isArray() 就好了，它內(nèi)部通過(guò) C++ 編碼實(shí)現(xiàn)，判斷其存儲(chǔ)結(jié)構(gòu)是否為數(shù)組，是最可靠的判斷方法，如果需要封裝一個(gè)通用的數(shù)據(jù)類型判斷方法，可以采用 Object.prototype.toString.call()。
到此這篇關(guān)于JavaScript中Array.isArray判斷數(shù)組的幾種方法的文章就介紹到這了,更多相關(guān)JavaScript Array.isArray判斷數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果
這篇文章主要給大家介紹了關(guān)于three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
IntelliJ IDEA 安裝vue開發(fā)插件的方法
本篇文章主要介紹了IntelliJ IDEA 安裝vue開發(fā)插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Window.Open如何在同一個(gè)標(biāo)簽頁(yè)打開
這篇文章主要介紹了Window.Open如何在同一個(gè)標(biāo)簽頁(yè)打開,需要的朋友可以參考下2014-06-06
js實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果（簡(jiǎn)單易懂）
本文主要介紹了js實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果的示例代碼，簡(jiǎn)單易懂。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
Javascript技術(shù)難點(diǎn)之a(chǎn)pply，call與this之間的銜接
這篇文章主要介紹了Javascript技術(shù)難點(diǎn)之a(chǎn)pply，call與this之間的銜接的相關(guān)資料,需要的朋友可以參考下2015-12-12
解決canvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決canvas畫布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
JS 截取字符串substr 和 substring方法的區(qū)別
JS 截取字符串substr 和 substring方法的區(qū)別,需要的朋友可以參考下，根據(jù)需要自行選擇。2009-10-10
這篇文章主要介紹了小程序接入騰訊位置服務(wù)的詳細(xì)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了微信小程序圖表插件(wx-charts)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01
Sample script that deletes a SQL Server database
Sample script that deletes a SQL Server database...2007-06-06