快捷導(dǎo)航

JS區(qū)分Object與Aarry的六種方法總結(jié)

更新時(shí)間：2017年02月27日 10:30:07 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS區(qū)分Object與Aarry的六種方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、經(jīng)常遇見(jiàn)的問(wèn)題：

JS中判斷一個(gè)對(duì)象的類型時(shí)，通常使用typeof，這時(shí)候問(wèn)題就來(lái)了，因?yàn)閠ypeof()辨別數(shù)組的時(shí)候返回的是object,所以JS

中判斷一個(gè)對(duì)象是不是數(shù)組需要一些特殊的處理方式，下面將介紹個(gè)人總結(jié)的六種處理方法。

二、開(kāi)門見(jiàn)山

開(kāi)發(fā)中要判斷一個(gè)對(duì)象是不是數(shù)組，推薦使用下面這個(gè)函數(shù)：

function isArray(obj){
  if(Array.isArray){
    return Array.isArray(obj);
  }else{
   return Object.prototype.toString.call(obj)==="[object Array]";
  }
}

上面這個(gè)函數(shù)是方便急于解決問(wèn)題的人，下面我將具體述說(shuō)六種方法，因?yàn)榭赡苊嬖嚨臅r(shí)候考官需要一個(gè)知識(shí)全面的你；

三、六種方案詳解：

（1）方法一：利用toString方法

通過(guò)調(diào)用toString( )方法試著將該變量轉(zhuǎn)化為代表其類型的string。該方法對(duì)于真正的array可行；參數(shù)對(duì)象轉(zhuǎn)化為string時(shí)

返回[object Arguments]會(huì)轉(zhuǎn)化失??；此外，對(duì)于含有數(shù)字長(zhǎng)度屬性的object類也會(huì)轉(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("對(duì)象的結(jié)果："+isArrayOne(obj));
	console.log("數(shù)組的結(jié)果："+isArrayOne(arr));
 </script>
 </head>
 <body>
 
 </body>
</html>

結(jié)果如圖：

注意：推薦使用“===”全等于而不使用“==”等等于，因?yàn)樾矢撸?/p>

（2）方法二：通過(guò)isArray：

使用Javascript 1.8.5（ECMAScript 5），變量名字.isArray( )可以實(shí)現(xiàn)這個(gè)目的，前提是有支持這一函數(shù)，其實(shí)isArray就是

方法一的封裝使用。

使用方法十分簡(jiǎn)單：

Array.isArray(obj); //obj是待檢測(cè)的對(duì)象

返回true或false，如果為true則為數(shù)組

（3）方法三：通過(guò)instanceof運(yùn)算符來(lái)判斷，

注意：instanceof運(yùn)算符左邊是子對(duì)象（待測(cè)對(duì)象），右邊是父構(gòu)造函數(shù)（這里是Array），

即：子對(duì)象 instanceof 父構(gòu)造函數(shù)

instance: 實(shí)例：凡是用new 構(gòu)造函數(shù)()創(chuàng)建出的對(duì)象，都稱為是構(gòu)造函數(shù)的實(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處理對(duì)象的結(jié)果："+(obj instanceof Array));
	console.log("Instanceof處理數(shù)組的結(jié)果："+(arr instanceof Array));
 </script>
 </head>
 <body>
 
 </body>
</html>

運(yùn)行結(jié)果如下：

（4）使用isPrototypeOf()函數(shù)

原理：檢測(cè)一個(gè)對(duì)象是否是Array的原型（或處于原型鏈中，不但可檢測(cè)直接父對(duì)象，還可檢測(cè)整個(gè)原型鏈上的所有父對(duì)象）

使用方法: parent.isPrototypeOf(child)來(lái)檢測(cè)parent是否為child的原型;

需注意的是isPrototypeOf()函數(shù)實(shí)現(xiàn)的功能和instancof運(yùn)算符非常類似；

具體代碼：

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(對(duì)象)+類型名結(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é)果如下：

這種方法其實(shí)有局限性，有的同學(xué)可能一下就破解了，那就是要是

要是對(duì)象中不巧定義了這屬性怎么辦