自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

在JavaScript中,如何判斷數(shù)組是數(shù)組?(alpha)

開發(fā) 開發(fā)工具
JavaScript有五種方法可以確定一個(gè)值到底是什么類型,分別是typeof運(yùn)算符,constructor法,instanceof運(yùn)算符,Object.prototype.toString方法以及Array.isArray法.

[[169454]]

如果你沒有注意過這個(gè)問題,那么這個(gè)標(biāo)題應(yīng)該會讓你感到困惑,判斷數(shù)據(jù)類型這么基礎(chǔ)的問題能有什么坑呢?

少年,你不能太天真了,我們朝夕面對的這門語言,可是JavaScript呀,任何你覺得已經(jīng)習(xí)以為常的東西都可能瞬間轉(zhuǎn)化成一個(gè)大坑,令人百思不得其解。

但是正是因?yàn)橥瑯拥脑颍覀兛梢栽趯W(xué)習(xí)和使用JavaScript這門語言的時(shí)候提出和討論一些這門語言獨(dú)有的,十分有趣的問題。比如我們今天要討論的,在JavaScript當(dāng)中如何判斷一個(gè)數(shù)組是數(shù)組。

JavaScript有五種方法可以確定一個(gè)值到底是什么類型,分別是typeof運(yùn)算符,constructor法,instanceof運(yùn)算符,Object.prototype.toString方法以及Array.isArray法.

1.用typeof運(yùn)算法來判斷

typeof是javascript原生提供的判斷數(shù)據(jù)類型的運(yùn)算符,它會返回一個(gè)表示參數(shù)的數(shù)據(jù)類型的字符串,例如:

 

  1. const s = 'hello'
  2.  
  3. console.log(typeof(s))//String 

 

以下是我在MDN的文檔中找到的一張包含typeof運(yùn)算法的針對不同參數(shù)的輸出結(jié)果的表格: 

[[169455]]

 從這張表格可以看出,數(shù)組被歸到了Any other object當(dāng)中,所以typeof返回的結(jié)果應(yīng)該是Object,并沒有辦法區(qū)分?jǐn)?shù)組,對象,null等原型鏈上都有Object的數(shù)據(jù)類型。

 

  1. const a = null
  2.  
  3. const b = {}; 
  4.  
  5. const c= []; 
  6.  
  7. console.log(typeof(a)); //Object 
  8.  
  9. console.log(typeof(b)); //Object 
  10.  
  11. console.log(typeof(c)); //Object 

 

運(yùn)行上面的代碼就會發(fā)現(xiàn),在參數(shù)為數(shù)組,對象或者null時(shí),typeof返回的結(jié)果都是object,可以使用這種方法并不能識別出數(shù)組,因此,在JavaScript項(xiàng)目中用typeof來判斷一個(gè)位置類型的數(shù)據(jù)是否為數(shù)組,是非常不靠譜的。

2.用instanceof判斷

既然typeof無法用于判斷數(shù)組是否為數(shù)組,那么用instance運(yùn)算符來判斷是否可行呢?要回答這個(gè)問題,我們首先得了解instanceof運(yùn)算法是干嘛用的。

instanceof運(yùn)算符可以用來判斷某個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對象是否存在于另外一個(gè)要檢測對象的原型鏈上。在使用的時(shí)候語法如下:

 

  1. object instanceof constructor 

用我的理解來說,就是要判斷一個(gè)Object是不是數(shù)組(這里不是口誤,在JavaScript當(dāng)中,數(shù)組實(shí)際上也是一種對象),如果這個(gè) Object的原型鏈上能夠找到Array構(gòu)造函數(shù)的話,那么這個(gè)Object應(yīng)該及就是一個(gè)數(shù)組,如果這個(gè)Object的原型鏈上只能找到Object 構(gòu)造函數(shù)的話,那么它就不是一個(gè)數(shù)組。

 

  1. const a = []; 
  2.  
  3. const b = {}; 
  4.  
  5. console.log(a instanceof Array);//true 
  6.  
  7. console.log(a instanceof Object);//true,在數(shù)組的原型鏈上也能找到Object構(gòu)造函數(shù) 
  8.  
  9. console.log(b instanceof Array);//false 

 

由上面的幾行代碼可以看出,使用instanceof運(yùn)算符可以分辨數(shù)組和對象,可以判斷數(shù)組是數(shù)組。

3.用constructor判斷

實(shí)例化的數(shù)組擁有一個(gè)constructor屬性,這個(gè)屬性指向生成這個(gè)數(shù)組的方法。

 

  1. const a = []; 
  2.  
  3. console.log(a.constructor);//function Array(){ [native code] } 

 

以上的代碼說明,數(shù)組是有一個(gè)叫Array的函數(shù)實(shí)例化的。

如果被判斷的對象是其他的數(shù)據(jù)類型的話,結(jié)果如下:

 

  1. const o = {}; 
  2.  
  3. console.log(o.constructor);//function Object(){ [native code] } 
  4.  
  5. const r = /^[0-9]$/; 
  6.  
  7. console.log(r.constructor);//function RegExp() { [native code] } 
  8.  
  9. const n = null
  10.  
  11. console.log(n.constructor);//報(bào)錯(cuò) 

 

看到這里,你可能會覺得這也是一種靠譜的判斷數(shù)組的方法,我們可以用以下的方式來判斷:

 

  1. const a = []; 
  2.  
  3. console.log(a.constructor == Array);//true 

 

但是,很遺憾的通知你,constructor屬性是可以改寫的,如果你一不小心作死改了constructor屬性的話,那么使用這種方法就無法判斷出數(shù)組的真是身份了,寫到這里,我不禁想起了無間道的那段經(jīng)典對白,梁朝偉:“對不起,我是警察。”劉德華:“誰知道呢?”。

 

  1. //定義一個(gè)數(shù)組 
  2.  
  3. const a = []; 
  4.  
  5. //作死將constructor屬性改成了別的 
  6.  
  7. a.contrtuctor = Object; 
  8.  
  9. console.log(a.constructor == Array);//false (哭臉) 
  10.  
  11. console.log(a.constructor == Object);//true (哭臉) 
  12.  
  13. console.log(a instanceof Array);//true (instanceof火眼金睛) 

 

可以看出,constructor屬性被修改之后,就無法用這個(gè)方法判斷數(shù)組是數(shù)組了,除非你能保證不會發(fā)生constructor屬性被改寫的情況,否則用這種方法來判斷數(shù)組也是不靠譜的。

4.用Object的toString方法判斷

另一個(gè)行之有效的方法就是使用Object.prototype.toString方法來判斷,每一個(gè)繼承自O(shè)bject的對象都擁有toString的方法。

如果一個(gè)對象的toString方法沒有被重寫過的話,那么toString方法將會返回"[object type]",其中的type代表的是對象的類型,根據(jù)type的值,我們就可以判斷這個(gè)疑似數(shù)組的對象到底是不是數(shù)組了。

你可能會糾結(jié),為什么不是直接調(diào)用數(shù)組,或則字符串自己的的toString方法呢?我們試一試就知道了。

 

  1. const a = ['Hello','Howard']; 
  2.  
  3. const b = {0:'Hello',1:'Howard'}; 
  4.  
  5. const c = 'Hello Howard'
  6.  
  7. a.toString();//"Hello,Howard" 
  8.  
  9. b.toString();//"[object Object]" 
  10.  
  11. c.toString();//"Hello,Howard" 

 

從上面的代碼可以看出,除了對象之外,其他的數(shù)據(jù)類型的toString返回的都是內(nèi)容的字符創(chuàng),只有對象的toString方法會返回對象的類型。所以要判斷除了對象之外的數(shù)據(jù)的數(shù)據(jù)類型,我們需要“借用”對象的toString方法,所以我們需要使用call或者apply方法來改變 toString方法的執(zhí)行上下文。

 

  1. const a = ['Hello','Howard']; 
  2.  
  3. const b = {0:'Hello',1:'Howard'}; 
  4.  
  5. const c = 'Hello Howard'
  6.  
  7. Object.prototype.toString.call(a);//"[object Array]" 
  8.  
  9. Object.prototype.toString.call(b);//"[object Object]" 
  10.  
  11. Object.prototype.toString.call(c);//"[object String]" 

 

使用apply方法也能達(dá)到同樣的效果:

 

  1. const a = ['Hello','Howard']; 
  2.  
  3. const b = {0:'Hello',1:'Howard'}; 
  4.  
  5. const c = 'Hello Howard'
  6.  
  7. Object.prototype.toString.apply(a);//"[object Array]" 
  8.  
  9. Object.prototype.toString.apply(b);//"[object Object]" 
  10.  
  11. Object.prototype.toString.apply(c);//"[object String]" 

 

總結(jié)一下,我們就可以用寫一個(gè)方法來判斷數(shù)組是否為數(shù)組:

 

  1. const isArray = (something)=>{ 
  2.  
  3. return Object.prototype.toString.call(something) === '[object Array]'
  4.  
  5.  
  6. cosnt a = []; 
  7.  
  8. const b = []; 
  9.  
  10. isArray(a);//true 
  11.  
  12. isArray(b);//false 

 

但是,如果你非要在創(chuàng)建這個(gè)方法之前這么來一下,改變了Object原型鏈上的toString方法,那我真心幫不了你了...

 

  1. //重寫了toString方法 
  2.  
  3. Object.prototype.toString = () => { 
  4.  
  5. alert('你吃過了么?'); 
  6.  
  7.  
  8. //調(diào)用String方法 
  9.  
  10. const a = []; 
  11.  
  12. Object.prototype.toString.call(a);//彈框問你吃過飯沒有 

 

當(dāng)然了,只有在瀏覽器當(dāng)中才能看到alert彈框,這個(gè)我就不解釋了。

5.用Array對象的isArray方法判斷

為什么把這種方法放在***講呢?因?yàn)樗俏夷壳坝龅竭^的最靠譜的判斷數(shù)組的方法了,當(dāng)參數(shù)為數(shù)組的時(shí)候,isArray方法返回true,當(dāng)參數(shù)不為數(shù)組的時(shí)候,isArray方法返回false。

 

  1. const a = []; 
  2.  
  3. const b = {}; 
  4.  
  5. Array.isArray(a);//true 
  6.  
  7. Array.isArray(b);//false 

 

我試著在調(diào)用這個(gè)方法之前重寫了Object.prototype.toString方法:

 

  1. Object.prototype.toString = ()=>{ 
  2.  
  3. console.log('Hello Howard'); 
  4.  
  5.  
  6. const a = []; 
  7.  
  8. Array.isArray(a);//true 

 

并不影響判斷的結(jié)果。

我又試著修改了constructor對象:

 

  1. const a = []; 
  2.  
  3. const b = {}; 
  4.  
  5. a.constructor = b.constructor; 
  6.  
  7. Array.isArray(a);//true 

 

OK,還是不影響判斷的結(jié)果。

可見,它與instance運(yùn)算符判斷的方法以及Object.prototype.toString法并不相同,一些列的修改并沒有影響到判斷的結(jié)果。

你可以放心大膽的使用Array.isArray去判斷一個(gè)對象是不是數(shù)組。

除非你不小心重寫了Array.isArray方法本身。。

責(zé)任編輯:龐桂玉 來源: segmentfault
相關(guān)推薦

2021-03-11 23:43:20

JavaScript數(shù)組開發(fā)

2021-03-18 10:45:02

JavaScript數(shù)組運(yùn)算符

2018-10-11 09:40:53

前端JavaScript編程語言

2020-10-14 06:18:20

Golang字符串數(shù)組

2024-09-27 08:35:33

數(shù)組JavaScript性能

2020-05-18 10:52:00

前端JavaScript html

2020-11-26 08:12:24

JavaScript對象數(shù)組

2024-08-30 08:43:24

JavaScriptforEachfor循環(huán)

2016-10-13 19:33:10

javascript數(shù)組indexOf

2021-07-26 05:20:47

JavaScript解構(gòu)賦值數(shù)組解構(gòu)

2024-07-17 11:35:31

JavaScript解構(gòu)賦值

2024-09-10 15:34:18

JavaScript解構(gòu)賦值

2024-06-18 10:28:46

2016-12-27 10:19:42

JavaScriptindexOf

2021-09-22 23:17:09

Java開發(fā)數(shù)組

2020-12-08 08:07:41

JavaScript中等分?jǐn)?shù)組

2025-01-09 09:14:44

2022-12-01 08:30:10

JavaScript構(gòu)造函數(shù)

2021-02-14 00:47:02

JavaScript開發(fā)數(shù)組

2022-06-01 08:12:32

JS類數(shù)組對象
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號