JavaScript判斷數(shù)組類型的方法
前言
JavaScript中關(guān)于數(shù)組的判定問題,一直都是一個必須要掌握的點,那么,運用知識,如何判斷一個類型是數(shù)組,就需要有對JavaScript使用有著深入的了解。
判斷方法
一、Array.isArray
ES5新增的數(shù)組方法,Array.isArray應該是我們最先想到的判定方式,現(xiàn)在應用的也比較廣泛。
const arr = [1,2,3,4] Array.isArray(arr) // true
如果是在支持ES5的瀏覽器中,用這樣的方式自然沒什么問題,但是如果是在IE9以下版本,這個方法并未受到支持,這時候我們就要用別的方式來判斷數(shù)組。
二、instanceof
一般來說,instanceof關(guān)鍵字,是用來判斷某個元素是否某對象構(gòu)造函數(shù)實例。在數(shù)組判斷上,instanceof關(guān)鍵字也可以進行數(shù)組的判定。
const arr = [1, 2, 3, 4] arr instanceof Array // true
instanceof支持的瀏覽器版本比較多,所以一般來說,用instanceof判斷,會比Array.isArray判定的范圍要廣泛。
三、toString
對象的toString方式也可以判定數(shù)組類型,一般來說這種方式的判定是各大庫的一種Array.isArray的代替實現(xiàn)。
例如,polyfill中,就是如此實現(xiàn):
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
const arr = [1, 2, 3, 4]
Object.prototype.toString.call(arr) === '[Object Array]' // true
四、constructor
除了以上的方式之外,我們還可以通過構(gòu)造函數(shù)來判定:
const arr = [1, 2, 3, 4] arr.constructor === Array // true arr.__proto__.constructor === Array //true
弊端
instanceof和constructor的判定也存在一些弊端,他們判定的數(shù)組必須定義在同一個頁面,否則將會判定為false。
如果在iframe中的數(shù)組判定,就會出錯。
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]
// Correctly checking for Array
Array.isArray(arr); // true
// Considered harmful, because doesn't work through iframes
arr instanceof Array; // false
arr.constructor === Array; // false
總結(jié)
由上述幾個方法判定,可以得出,其實polyfill的判定是最合理的,也最具有兼容性的一種判定。
利用toString判定,勝出。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript使用avalon綁定實現(xiàn)checkbox全選
checkbox全選應該是一個比較實用的前端技巧吧,很多時候我們都需要點擊一個checkbox,然后將所有的復選框自動全部選中,一些CMS系統(tǒng)的后臺中,使用本JS效果后,會大大增強了操作體驗,那么究竟是如何實現(xiàn)這一功能的呢?2015-05-05
layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
這篇文章主要介紹了layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能,結(jié)合實例形式分析了layui顯示數(shù)據(jù)表格、搜索和修改功能具體界面布局、功能實現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
禁用backspace網(wǎng)頁回退功能的實現(xiàn)代碼
下面小編就為大家?guī)硪黄胋ackspace網(wǎng)頁回退功能的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11

