摘要:比如我們今天要討論的,在當中如何判斷一個數組是數組。在數組的原型鏈上也能找到構造函數由上面的幾行代碼可以看出,使用運算符可以分辨數組和對象,可以判斷數組是數組。用判斷實例化的數組擁有一個屬性,這個屬性指向生成這個數組的方法。
如果你沒有注意過這個問題,那么這個標題應該會讓你感到困惑,判斷數據類型這么基礎的問題能有什么坑呢?
少年,你不能太天真了,我們朝夕面對的這門語言,可是JavaScript呀,任何你覺得已經習以為常的東西都可能瞬間轉化成一個大坑,令人百思不得其解。
但是正是因為同樣的原因,我們可以在學習和使用JavaScript這門語言的時候提出和討論一些這門語言獨有的,十分有趣的問題。比如我們今天要討論的,在JavaScript當中如何判斷一個數組是數組。
JavaScript有五種方法可以確定一個值到底是什么類型,分別是typeof運算符,constructor法,instanceof運算符,Object.prototype.toString方法以及Array.isArray法.
1.用typeof運算符來判斷typeof是javascript原生提供的判斷數據類型的運算符,它會返回一個表示參數的數據類型的字符串,例如:
const s = "hello"; console.log(typeof(s))//String
以下是我在MDN的文檔中找到的一張包含typeof運算法的針對不同參數的輸出結果的表格:
從這張表格可以看出,數組被歸到了Any other object當中,所以typeof返回的結果應該是Object,并沒有辦法區分數組,對象,null等原型鏈上都有Object的數據類型。
const a = null; const b = {}; const c= []; console.log(typeof(a)); //Object console.log(typeof(b)); //Object console.log(typeof(c)); //Object
運行上面的代碼就會發現,在參數為數組,對象或者null時,typeof返回的結果都是object,可以使用這種方法并不能識別出數組,因此,在JavaScript項目中用typeof來判斷一個位置類型的數據是否為數組,是非常不靠譜的。
2.用instanceof判斷既然typeof無法用于判斷數組是否為數組,那么用instance運算符來判斷是否可行呢?要回答這個問題,我們首先得了解instanceof運算法是干嘛用的。
instanceof運算符可以用來判斷某個構造函數的prototype屬性所指向的對象是否存在于另外一個要檢測對象的原型鏈上。在使用的時候語法如下:
object instanceof constructor
用我的理解來說,就是要判斷一個Object是不是數組(這里不是口誤,在JavaScript當中,數組實際上也是一種對象),如果這個Object的原型鏈上能夠找到Array構造函數的話,那么這個Object應該及就是一個數組,如果這個Object的原型鏈上只能找到Object構造函數的話,那么它就不是一個數組。
const a = []; const b = {}; console.log(a instanceof Array);//true console.log(a instanceof Object);//true,在數組的原型鏈上也能找到Object構造函數 console.log(b instanceof Array);//false
由上面的幾行代碼可以看出,使用instanceof運算符可以分辨數組和對象,可以判斷數組是數組。
3.用constructor判斷實例化的數組擁有一個constructor屬性,這個屬性指向生成這個數組的方法。
const a = []; console.log(a.constructor);//function Array(){ [native code] }
以上的代碼說明,數組是有一個叫Array的函數實例化的。
如果被判斷的對象是其他的數據類型的話,結果如下:
const o = {}; console.log(o.constructor);//function Object(){ [native code] } const r = /^[0-9]$/; console.log(r.constructor);//function RegExp() { [native code] } const n = null; console.log(n.constructor);//報錯
看到這里,你可能會覺得這也是一種靠譜的判斷數組的方法,我們可以用以下的方式來判斷:
const a = []; console.log(a.constructor == Array);//true
但是,很遺憾的通知你,constructor屬性是可以改寫的,如果你一不小心作死改了constructor屬性的話,那么使用這種方法就無法判斷出數組的真是身份了,寫到這里,我不禁想起了無間道的那段經典對白,梁朝偉:“對不起,我是警察。”劉德華:“誰知道呢?”。
//定義一個數組 const a = []; //作死將constructor屬性改成了別的 a.contrtuctor = Object; console.log(a.constructor == Array);//false (哭臉) console.log(a.constructor == Object);//true (哭臉) console.log(a instanceof Array);//true (instanceof火眼金睛)
可以看出,constructor屬性被修改之后,就無法用這個方法判斷數組是數組了,除非你能保證不會發生constructor屬性被改寫的情況,否則用這種方法來判斷數組也是不靠譜的。
4.用Object的toString方法判斷另一個行之有效的方法就是使用Object.prototype.toString方法來判斷,每一個繼承自Object的對象都擁有toString的方法。
如果一個對象的toString方法沒有被重寫過的話,那么toString方法將會返回"[object type]",其中的type代表的是對象的類型,根據type的值,我們就可以判斷這個疑似數組的對象到底是不是數組了。
你可能會糾結,為什么不是直接調用數組,或則字符串自己的的toString方法呢?我們試一試就知道了。
const a = ["Hello","Howard"]; const b = {0:"Hello",1:"Howard"}; const c = "Hello Howard"; a.toString();//"Hello,Howard" b.toString();//"[object Object]" c.toString();//"Hello,Howard"
從上面的代碼可以看出,除了對象之外,其他的數據類型的toString返回的都是內容的字符創,只有對象的toString方法會返回對象的類型。所以要判斷除了對象之外的數據的數據類型,我們需要“借用”對象的toString方法,所以我們需要使用call或者apply方法來改變toString方法的執行上下文。
const a = ["Hello","Howard"]; const b = {0:"Hello",1:"Howard"}; const c = "Hello Howard"; Object.prototype.toString.call(a);//"[object Array]" Object.prototype.toString.call(b);//"[object Object]" Object.prototype.toString.call(c);//"[object String]"
使用apply方法也能達到同樣的效果:
const a = ["Hello","Howard"]; const b = {0:"Hello",1:"Howard"}; const c = "Hello Howard"; Object.prototype.toString.apply(a);//"[object Array]" Object.prototype.toString.apply(b);//"[object Object]" Object.prototype.toString.apply(c);//"[object String]"
總結一下,我們就可以用寫一個方法來判斷數組是否為數組:
const isArray = (something)=>{ return Object.prototype.toString.call(something) === "[object Array]"; } cosnt a = []; const b = {}; isArray(a);//true isArray(b);//false
但是,如果你非要在創建這個方法之前這么來一下,改變了Object原型鏈上的toString方法,那我真心幫不了你了...
//重寫了toString方法 Object.prototype.toString = () => { alert("你吃過了么?"); } //調用String方法 const a = []; Object.prototype.toString.call(a);//彈框問你吃過飯沒有
當然了,只有在瀏覽器當中才能看到alert彈框,這個我就不解釋了。
5.用Array對象的isArray方法判斷為什么把這種方法放在最后講呢?因為它是我目前遇到過的最靠譜的判斷數組的方法了,當參數為數組的時候,isArray方法返回true,當參數不為數組的時候,isArray方法返回false。
const a = []; const b = {}; Array.isArray(a);//true Array.isArray(b);//false
我試著在調用這個方法之前重寫了Object.prototype.toString方法:
Object.prototype.toString = ()=>{ console.log("Hello Howard"); } const a = []; Array.isArray(a);//true
并不影響判斷的結果。
我又試著修改了constructor對象:
const a = []; const b = {}; a.constructor = b.constructor; Array.isArray(a);//true
OK,還是不影響判斷的結果。
可見,它與instance運算符判斷的方法以及Object.prototype.toString法并不相同,一些列的修改并沒有影響到判斷的結果。
你可以放心大膽的使用Array.isArray去判斷一個對象是不是數組。
除非你不小心重寫了Array.isArray方法本身。。
重要補充:有讀者朋友在評論中提醒我,Array.isArray是ES5標準中增加的方法,部分比較老的瀏覽器可能會有兼容問題,所以為了增強健壯性,建議還是給Array.isArray方法進行判斷,增強兼容性,重新封裝的方法如下:
if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === "[object Array]"; }; }
作者:方浩,轉載請注明出處!!!
文章源鏈接:https://segmentfault.com/a/11...
我的微信公眾號:webcoding ,歡迎掃碼關注
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90850.html
摘要:專題系列共計篇,主要研究日常開發中一些功能點的實現,比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等,特點是研究專題之函數組合專題系列第十六篇,講解函數組合,并且使用柯里化和函數組合實現模式需求我們需要寫一個函數,輸入,返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇,講解如何從零實現一個 jQuery 的 ext...
摘要:開發人員自定義的任何構造函數都將返回。在任何值上直接調用的原生方法,都會返回格式的字符串,每個類內部都有一個屬性,這個屬性中就指定了上述字符串中構造函數名。 JavaScript 在類型判斷上確實是有比較多的坑,在不使用 ES5 的 Array.isArray() 的情況下,如何判斷呢? 首先放棄typeof javascript 弱類型的語言就是有比較多的坑,單純的typeof 是很...
摘要:專題系列第六篇,講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶數組的淺拷貝如果是數組,我們可以利用數組的一些方法比如返回一個新數組的特性來實現拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇,講解深淺拷貝的技巧和以及實現深淺拷貝的思路 前言 拷貝也是面試經典吶! 數組的淺拷貝 如果是數組,我們可以利用數組的一些方法比如:slice、co...
摘要:基本類型類對象純對象類數組其中部分參考了的函數實現。比如說所以如果此時對象不是由內置構造函數生成的對象,這個為。判斷對于類數組對象,只要該對象中存在屬性并且為非負整數且在有限范圍之內即可判斷為類數組對象。 本文主要講解如何準確判斷JavaScript中出現的各種類型和對象。(基本類型、Object類、Window對象、純對象plainObject、類數組)其中部分參考了jQuery的函...
摘要:中并沒有明確的數組數據類型。返回數組對象的原始值。專門用于篩選出數組中符合函數判斷條件的元素組成的心數組。專門用于對原數組中每個元素執行相同的函數對象規定的操作。 概述 一維數組 數組是一個有序的數據集合,可以通過數組名稱和索引進行訪問。JavaScript中并沒有明確的數組數據類型。 二維數組 數組是可以嵌套的,這就意味著一個數組可以作為一個袁旭被包含在另一個數組里面。利用JavaS...
閱讀 3715·2021-11-17 09:33
閱讀 2725·2021-09-22 15:12
閱讀 3344·2021-08-12 13:24
閱讀 2439·2019-08-30 11:14
閱讀 1733·2019-08-29 14:09
閱讀 1326·2019-08-26 14:01
閱讀 3061·2019-08-26 13:49
閱讀 1775·2019-08-26 12:16