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