JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別
偽數(shù)組和數(shù)組
在JavaScript中,除了5種原始數(shù)據(jù)類(lèi)型之外,其他所有的都是對(duì)象,包括函數(shù)(Function)。
對(duì)象與數(shù)組的關(guān)系
在說(shuō)區(qū)別之前,需要先提到另外一個(gè)知識(shí),就是 JavaScript 的原型繼承。
所有 JavaScript 的內(nèi)置構(gòu)造函數(shù)都是繼承自 Object.prototype 。
在這個(gè)前提下,可以理解為使用 new Array() 或 [] 創(chuàng)建出來(lái)的數(shù)組對(duì)象,都會(huì)擁有 Object.prototype 的屬性值。
var obj = {};// 擁有 Object.prototype 的屬性值 var arr = []; //使用數(shù)組直接量創(chuàng)建的數(shù)組,由于 Array.prototype 的屬性繼承自 Object.prototype, //那么,它將同時(shí)擁有 Array.prototype 和 Object.prototype 的屬性值
可以得到對(duì)象和數(shù)組的第一個(gè)區(qū)別:對(duì)象沒(méi)有數(shù)組 Array.prototype 的屬性值。
什么是數(shù)組
數(shù)組具有一個(gè)最基本特征:索引,這是對(duì)象所沒(méi)有的,下面來(lái)看一段代碼:
var obj = {}; var arr = []; obj[2] = 'a'; arr[2] = 'a'; console.log(obj[2]); // => a console.log(arr[2]); // => a console.log(obj.length); // => undefined console.log(arr.length); // => 3
- obj[2]輸出'a',是因?yàn)閷?duì)象就是普通的鍵值對(duì)存取數(shù)據(jù)
- 而arr[2]輸出'a' 則不同,數(shù)組是通過(guò)索引來(lái)存取數(shù)據(jù),arr[2]之所以輸出'a',是因?yàn)閿?shù)組arr索引2的位置已經(jīng)存儲(chǔ)了數(shù)據(jù)
- obj.length并不具有數(shù)組的特性,并且obj沒(méi)有保存屬性length,那么自然就會(huì)輸出undefined
- 而對(duì)于數(shù)組來(lái)說(shuō),length是數(shù)組的一個(gè)內(nèi)置屬性,數(shù)組會(huì)根據(jù)索引長(zhǎng)度來(lái)更改length的值
- 為什么arr.length輸出3,而不是1
- 在給數(shù)組添加元素時(shí),并沒(méi)有按照連續(xù)的索引添加,所以導(dǎo)致數(shù)組的索引不連續(xù),那么就導(dǎo)致索引長(zhǎng)度大于元素個(gè)數(shù)
- 在給數(shù)組添加元素時(shí),并沒(méi)有按照連續(xù)的索引添加,所以導(dǎo)致數(shù)組的索引不連續(xù),那么就導(dǎo)致索引長(zhǎng)度大于元素個(gè)數(shù)
什么是偽數(shù)組
- 擁有 length 屬性,其它屬性(索引)為非負(fù)整數(shù)(對(duì)象中的索引會(huì)被當(dāng)做字符串來(lái)處理,這里你可以當(dāng)做是個(gè)非負(fù)整數(shù)串來(lái)理解)
- 不具有數(shù)組所具有的方法
偽數(shù)組,就是像數(shù)組一樣有 length 屬性,也有 0、1、2、3 等屬性的對(duì)象,看起來(lái)就像數(shù)組一樣,但不是數(shù)組,比如:
var fakeArray = { "0": "first", "1": "second", "2": "third", length: 3 }; for (var i = 0; i < fakeArray.length; i++) { console.log(fakeArray[i]); } Array.prototype.join.call(fakeArray,'+');
常見(jiàn)的偽數(shù)組有:
- 函數(shù)內(nèi)部的 arguments
- DOM 對(duì)象列表(比如通過(guò) document.getElementsByTags 得到的列表)
- jQuery 對(duì)象(比如 $("div") )
偽數(shù)組是一個(gè) Object,而真實(shí)的數(shù)組是一個(gè) Array。
偽數(shù)組存在的意義,是可以讓普通的對(duì)象也能正常使用數(shù)組的很多方法,比如:
var arr = Array.prototype.slice.call(arguments); Array.prototype.forEach.call(arguments, function(v) { // 循環(huán)arguments對(duì)象 }); // push // some // every // filter // map // ...
以上在借用數(shù)組的原型方法的時(shí)候都可以通過(guò)數(shù)組直接量來(lái)簡(jiǎn)化使用:
var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 } ;[].push.call(obj, 'd') console.log([].slice.call(obj)) ;[].forEach.call(obj, function (num, index) { console.log(num) })
二者區(qū)別
1.長(zhǎng)度:
- 真數(shù)組的長(zhǎng)度是可變的
- 偽數(shù)組的長(zhǎng)度不可變
2.方法的使用:
- 真數(shù)組可以使用數(shù)組中的方法
- 偽數(shù)組不可以使用數(shù)組中的方法
小結(jié)
對(duì)象沒(méi)有數(shù)組 Array.prototype 的屬性值,類(lèi)型是 Object ,而數(shù)組類(lèi)型是 Array
數(shù)組是基于索引的實(shí)現(xiàn), length 會(huì)自動(dòng)更新,而對(duì)象是鍵值對(duì)
使用對(duì)象可以創(chuàng)建偽數(shù)組,偽數(shù)組可以正常使用數(shù)組的大部分方法
總結(jié)
到此這篇關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript偽數(shù)組和數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 關(guān)于javascript中偽數(shù)組和真數(shù)組的一些小秘密
- JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)示例
- JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組?
- JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
- JavaScript偽數(shù)組用法實(shí)例分析
- js中將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組的代碼
- javascript 偽數(shù)組實(shí)現(xiàn)方法
- JavaScript中的偽數(shù)組用法及說(shuō)明
相關(guān)文章
element-ui?實(shí)現(xiàn)輸入框下拉樹(shù)組件功能
這篇文章主要介紹了element-ui?實(shí)現(xiàn)輸入框下拉樹(shù)組件功能,使用element-ui的?el-input,el-tree,el-popover組件組合封裝,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05詳解javascript立即執(zhí)行函數(shù)表達(dá)式IIFE
本文主要介紹了javascript立即執(zhí)行函數(shù)表達(dá)式IIFE的相關(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02JS+HTML實(shí)現(xiàn)的圓形可點(diǎn)擊區(qū)域示例【3種方法】
這篇文章主要介紹了JS+HTML實(shí)現(xiàn)的圓形可點(diǎn)擊區(qū)域,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML元素屬性實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域相關(guān)操作技巧,需要的朋友可以參考下2018-08-08一個(gè)頁(yè)面元素appendchild追加到另一個(gè)頁(yè)面元素的問(wèn)題
一般都是自己創(chuàng)建元素然后append到頁(yè)面的但是如果是頁(yè)面本身有的元素append到另一個(gè)頁(yè)面元素呢,很多的新手朋友對(duì)此問(wèn)題比較好奇,本人也是如此啊,好了不多說(shuō),切入主題,感興趣的朋友可以了解下哦2013-01-01js獲取鼠標(biāo)點(diǎn)擊的位置實(shí)現(xiàn)思路及代碼
常用的是 event.clientX和event.clientY分別獲取橫向的和縱向的位置,但僅使用這個(gè)方法是不夠的,感興趣的朋友可以了解本文2014-05-05Laravel中常見(jiàn)的錯(cuò)誤與解決方法小結(jié)
大家在用Laravel框架期間可能會(huì)遇到了不少問(wèn)題,現(xiàn)在我將自己遇到的一些問(wèn)題總結(jié)出來(lái),有一些調(diào)試起來(lái)著實(shí)不太容易,本文篩選出幾個(gè),希望這篇文章能讓大家在PHP開(kāi)發(fā)中少走一些彎路。2016-08-08