這篇文章給大家介紹詳解javascript中的類數(shù)組,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)來(lái)賓免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。顧名思義,這玩意兒肯定是個(gè)長(zhǎng)得像數(shù)組,但又不算數(shù)組的東西。那到底是個(gè)啥,其實(shí)它就是一個(gè)對(duì)象,一個(gè)長(zhǎng)的像數(shù)組的對(duì)象。
那類數(shù)組和數(shù)組有啥區(qū)別:
1、都有l(wèi)ength屬性
2、類數(shù)組也可以for循環(huán)遍歷,有的類數(shù)組還可以通過(guò) for of 遍歷
3、類數(shù)組不具備數(shù)組的原型方法,因此類數(shù)組不可調(diào)用相關(guān)數(shù)組方法(如,push,slicec,concat等等)
常見的類數(shù)組有
函數(shù)的參數(shù)arguments
通過(guò)getElementsByTagName,getElementsByClassName,getElementsByName等方法獲取的dom列表(也叫 HTMLCollection)
通過(guò)querySelectorAll()方法獲取的NodeList節(jié)點(diǎn)列表
下面,我們來(lái)分別看一下這3類 類數(shù)組
arguments
arguments是javascript的一個(gè)關(guān)鍵字。專指函數(shù)的參數(shù)集合,它包含了函數(shù)的所有參數(shù)以及其他屬性。它無(wú)需定義,可直接在函數(shù)體內(nèi)使用
function args(a, b, c) { console.log(arguments) console.log(typeof arguments) console.log({}.toString.call(arguments)) } args('a', 'b', 'c')
我們看看輸出結(jié)果
可以看出,arguments包含所有參數(shù),并且存在length屬性,同時(shí)可以看出,他的類型是object,并且轉(zhuǎn)換為string后 是 object Arguments,代表是Arguments對(duì)象。同時(shí),可以看到,他還有一個(gè)屬性callee,而這個(gè)屬性的值好像就是我們定義的這個(gè)函數(shù)體,那么我們輸出看一下
function args(a, b, c) { console.log(arguments.callee) } args('a', 'b', 'c')
可以看到,輸出的確實(shí)是我們函數(shù)自己。那既然表示的自己,請(qǐng)不要隨便去調(diào)用這個(gè)屬性,因?yàn)橐坏┱{(diào)用,會(huì)不斷的調(diào)用自己,進(jìn)入死循環(huán),直到棧溢出。就像下面這樣
function args (a, b, c) { console.log(123) arguments.callee() } args('a', 'b', 'c')
dom列表(HTMLCollection)
這一類是指通過(guò)getElementsByTagName或者 getElementsByClassName 或者 getElementsByName獲取到的dom列表的集合。
今天天氣不太好因?yàn)橄掠炅?/div>可以看出,domList也存在length屬性。并且,轉(zhuǎn)換為string后是 object HTMLCollection。代表是HTMLCollection對(duì)象
節(jié)點(diǎn)列表(NodeList)
通過(guò)document.querySelectorAll()所獲取的節(jié)點(diǎn)的集合
今天天氣不太好因?yàn)橄掠炅?/div>可以看出,nodeList同樣存在length屬性,且轉(zhuǎn)換成string后是 object NodeList,代表是NodeList對(duì)象。該對(duì)象是一個(gè)符合Iterator接口規(guī)范的對(duì)象,故它可以被for…of遍歷(什么是Iterator我就不在這里講述了,大家可以自己去看 什么是Iterator)
特點(diǎn)
類數(shù)組都不存在數(shù)組的原型方法,但當(dāng)類數(shù)組需要調(diào)用數(shù)組方法去做任何事情時(shí),可以通過(guò)以下方式
利用call,apply進(jìn)行方法借用,借用數(shù)組的各自方法
將類數(shù)組轉(zhuǎn)換為數(shù)組。然后再調(diào)用數(shù)組方法
call,apply進(jìn)行方法借用
其實(shí)我們上面也已經(jīng)用過(guò)這個(gè)方法了,類數(shù)組轉(zhuǎn)為字符串時(shí),我們上面是不是借用了對(duì)象的toString()方法啊
下面我們?cè)俣嗔袔讉€(gè)
function args(a, b, c) { Array.prototype.push.call(arguments, '123') console.log(arguments) Array.prototype.splice.call(arguments, 0, 1) console.log(arguments) Array.prototype.unshift.apply(arguments, [1,2,3]) console.log(arguments) } args('a', 'b', 'c')類數(shù)組轉(zhuǎn)數(shù)組
將類數(shù)組轉(zhuǎn)成數(shù)組后,就可以隨意調(diào)用各自數(shù)組方法,那么類數(shù)組如何轉(zhuǎn)成數(shù)組呢!
可借用數(shù)組的一些方法生成一個(gè)新數(shù)組
function args(a, b, c) { let arr = Array.prototype.slice.call(arguments) console.log(arr) arr = Array.prototype.concat.apply([], arguments) console.log(arr) } args('a', 'b', 'c')利用ES6新增方法轉(zhuǎn)換為數(shù)組
ES6新增了一個(gè)Array.from方法,可將類數(shù)組轉(zhuǎn)為數(shù)組。還提供了展開運(yùn)算符,可以直接在一個(gè)數(shù)組中展開類數(shù)組
function args(a, b, c) { let arr = Array.from(arguments) console.log(arr) arr = [...arguments] console.log(arr) } args('a', 'b', 'c')關(guān)于詳解javascript中的類數(shù)組就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
新聞標(biāo)題:詳解javascript中的類數(shù)組-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源:http://weahome.cn/article/eoshd.html