JS區(qū)分Object與Aarry的六種方法總結(jié)
一、經(jīng)常遇見的問題:
JS中判斷一個對象的類型時,通常使用typeof,這時候問題就來了,因為typeof()辨別數(shù)組的時候返回的是object,所以JS
中判斷一個對象是不是數(shù)組需要一些特殊的處理方式,下面將介紹個人總結(jié)的六種處理方法。
二、開門見山
開發(fā)中要判斷一個對象是不是數(shù)組,推薦使用下面這個函數(shù):
function isArray(obj){
if(Array.isArray){
return Array.isArray(obj);
}else{
return Object.prototype.toString.call(obj)==="[object Array]";
}
}
上面這個函數(shù)是方便急于解決問題的人,下面我將具體述說六種方法,因為可能面試的時候考官需要一個知識全面的你;
三、六種方案詳解:
(1)方法一:利用toString方法
通過調(diào)用toString( )方法試著將該變量轉(zhuǎn)化為代表其類型的string。該方法對于真正的array可行;參數(shù)對象轉(zhuǎn)化為string時
返回[object Arguments]會轉(zhuǎn)化失?。淮送?, 對于含有數(shù)字長度屬性的object類也會轉(zhuǎn)化失敗。
方法如下:
<!DOCTYPE html>
<html>
<head>
<title>Array的判斷方法</title>
<meta charset="utf-8"/>
<script>
function isArrayOne(arr){
return <span style="color:#cc0000;">Object.prototype.toString.call(arr) === "[object Array]";</span>
}
var obj = {"k1":"v1"};
var arr = [1,2];
console.log("對象的結(jié)果:"+isArrayOne(obj));
console.log("數(shù)組的結(jié)果:"+isArrayOne(arr));
</script>
</head>
<body>
</body>
</html>
結(jié)果如圖:

注意:推薦使用“===”全等于而不使用“==”等等于,因為效率更高!
(2)方法二:通過isArray:
使用Javascript 1.8.5(ECMAScript 5),變量名字.isArray( )可以實現(xiàn)這個目的,前提是有支持這一函數(shù),其實isArray就是
方法一的封裝使用。
使用方法十分簡單:
Array.isArray(obj); //obj是待檢測的對象
返回true或false,如果為true則為數(shù)組
(3)方法三:通過instanceof運算符來判斷,
注意:instanceof運算符左邊是子對象(待測對象),右邊是父構(gòu)造函數(shù)(這里是Array),
即:子對象 instanceof 父構(gòu)造函數(shù)
instance: 實例:凡是用new 構(gòu)造函數(shù)()創(chuàng)建出的對象,都稱為是構(gòu)造函數(shù)的實例
扯半天都迷糊了,還是直接看代碼好:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var obj = {"k1":"v1"};
var arr = [1,2];
console.log("Instanceof處理對象的結(jié)果:"+(obj instanceof Array));
console.log("Instanceof處理數(shù)組的結(jié)果:"+(arr instanceof Array));
</script>
</head>
<body>
</body>
</html>
運行結(jié)果如下:

(4)使用isPrototypeOf()函數(shù)
原理:檢測一個對象是否是Array的原型(或處于原型鏈中,不但可檢測直接父對象,還可檢測整個原型鏈上的所有父對象)
使用方法: parent.isPrototypeOf(child)來檢測parent是否為child的原型;
需注意的是isPrototypeOf()函數(shù)實現(xiàn)的功能和instancof運算符非常類似;
具體代碼:
Array.prototype.isPrototypeOf(arr) //true表示是數(shù)組,false不是數(shù)組
(5)利用構(gòu)造函數(shù)constructor
具體代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
var obj = {'k':'v'};
var t1 = new Array(1);
var t2 = t1;
console.log(obj.constructor == Array);
console.log(t1.constructor == Array);
console.log(t2.constructor == Array);
</script>
</head>
<body>
</body>
</html>
結(jié)果如圖

(6)使用typeof(對象)+類型名結(jié)合判斷:
代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function isArrayFour(arr){
if(typeof(arr)==="object"){
if(arr.concat){
return "This is Array";
}else{
return "This Not Array";
}
}
}
var arr = [1];
var obj = {'k':'v'};
console.log(typeof(arr));
console.log(typeof(obj));
console.log(isArrayFour(arr));
console.log(isArrayFour(obj));
</script>
</head>
<body>
</body>
</html>
結(jié)果如下:
這種方法其實有局限性,有的同學可能一下就破解了,那就是要是
要是對象中不巧定義了這屬性怎么辦
var obj = {'concat':'Teast me?'};

我只能說哥你贏了!??!
以上這篇JS區(qū)分Object與Aarry的六種方法總結(jié)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析
這篇文章主要介紹了JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析,需要的朋友可以參考下2018-07-07
詳解bootstrap-fileinput文件上傳控件的親身實踐
這篇文章主要介紹了詳解bootstrap-fileinput文件上傳控件的親身實踐,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
JS實現(xiàn)數(shù)組去重方法總結(jié)(六種方法)
這篇文章給大家總結(jié)下JS實現(xiàn)數(shù)組去重方法(六種方法),面試中也經(jīng)常會遇到這個問題。文中給大家引申的還有合并數(shù)組并去重的方法,感興趣的朋友跟隨腳本之家小編一起學習吧2017-07-07
用js實現(xiàn)計算代碼行數(shù)的簡單方法附代碼
用js實現(xiàn)計算代碼行數(shù)的簡單方法附代碼...2007-08-08
微信小程序網(wǎng)絡(luò)數(shù)據(jù)請求的實現(xiàn)詳解
這篇文章主要為大家介紹了微信小程序網(wǎng)絡(luò)數(shù)據(jù)請求的實現(xiàn)講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08
layui添加動態(tài)菜單與選項卡 AJAX請求的例子
今天小編就為大家分享一篇layui添加動態(tài)菜單與選項卡 AJAX請求的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

