javascript如何定義類數(shù)組對(duì)象

這篇文章主要介紹“javascript如何定義類數(shù)組對(duì)象”，在日常操作中，相信很多人在javascript如何定義類數(shù)組對(duì)象問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”javascript如何定義類數(shù)組對(duì)象”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

javascript定義類數(shù)組對(duì)象的方法是：1、首先創(chuàng)建一個(gè)空對(duì)象；2、為對(duì)象直接定義數(shù)字下標(biāo)的屬性；3、關(guān)鍵點(diǎn)，為對(duì)象設(shè)置length屬性和splice屬性為數(shù)字和函數(shù)。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

js中類數(shù)組對(duì)象很多，概念簡(jiǎn)單的講就是看上去像數(shù)組，又不是數(shù)組，可以使用數(shù)字下標(biāo)方式訪問(wèn)又沒(méi)有數(shù)組方法。

例： arguments ， NodeList ， HTMLCollection ， jQuery 等

類數(shù)組對(duì)象特性

1、擁有 length 屬性

var a=document.getElementsByTagName("p");
a.__proto__;// HTMLCollection {} 屬于類數(shù)組對(duì)象a.length;//62

2、可以使用數(shù)字下標(biāo)的方式訪問(wèn)對(duì)象

a[0];//<p class="aspNetHidden">…</p>

3、不能使用數(shù)組原型的方法(如 slice ， pop 等)

a.slice;//undefined Error!
a.pop;//undefined Error!

4、使用 instanceof 操作不屬于 Array

[] instanceof Array;//true
a instanceof Array;//false

5、可以轉(zhuǎn)換為真數(shù)組對(duì)象

var arr = Array.prototype.slice.call(a);
arr instanceof Array;//true

PS:注意在IE8下部分對(duì)象無(wú)法使用slice方法轉(zhuǎn)換為真數(shù)組對(duì)象。

建議使用jquery提供的 $.makeArray() 方法轉(zhuǎn)換類數(shù)組對(duì)象

6、通常可定義有其他自定義屬性

a.item;//function item() { [native code] }

類數(shù)組對(duì)象優(yōu)點(diǎn)

關(guān)于優(yōu)點(diǎn)我相信不用太多描述，可以讓js和其他后臺(tái)語(yǔ)言擁有相同的操作方式。

如C#的某些list集合，可以使用數(shù)字下標(biāo) list[0] 來(lái)訪問(wèn)或是使用字符串名稱 list['name'] 來(lái)訪問(wèn)同一對(duì)象

同時(shí)還擁有各種自定義方法，自定義屬性，看jquery對(duì)象的優(yōu)雅的訪問(wèn)方式即可知是如此美妙的對(duì)象。

如何手動(dòng)創(chuàng)建類數(shù)組對(duì)象

回歸主題，如何手動(dòng)創(chuàng)建類數(shù)組對(duì)象。

1、首先創(chuàng)建一個(gè)空對(duì)象

var array_like = {};//創(chuàng)建一個(gè)空對(duì)象

2、為對(duì)象直接定義數(shù)字下標(biāo)的屬性，這在其他語(yǔ)言里是絕對(duì)不允許的，對(duì)象屬性不能使用數(shù)字開(kāi)頭，但JS里是可以的，甚至使用中文都可以

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3";

3、關(guān)鍵點(diǎn)，為對(duì)象設(shè)置length屬性和splice屬性為數(shù)字和函數(shù)

//關(guān)鍵點(diǎn)
array_like.length = 4;//為對(duì)象設(shè)置length屬性
array_like.splice = [].splice;//同時(shí)設(shè)置splice屬性為一個(gè)函數(shù)

PS:設(shè)定splice屬性其實(shí)是為了欺騙瀏覽器的控制臺(tái)，另其顯示出數(shù)組的模樣，可以參考這里

4、測(cè)試

//設(shè)定自定義屬性
array_like.test0=array_like[0];
array_like.test1=array_like[1];
//直接輸出
console.log( array_like );//['test 0','test 1'...]
//類型
console.log( $.type( array_like ) );//"object"
//數(shù)字下標(biāo)訪問(wèn)
console.log( array_like[ 0 ] );//"test 0"
//自定義屬性訪問(wèn)
array_like.test0;//"test 0"
//不是數(shù)組對(duì)象
array_like instanceof Array;//false
//轉(zhuǎn)換為真數(shù)組對(duì)象
var Arr=Array.prototype.slice.call(array_like);
Arr instanceof Array;//true

5、全部代碼：

var array_like = {};

array_like[ 0 ] = "test 0";
array_like[ 1 ] = "test 1";
array_like[ 2 ] = "test 2";
array_like[ 3 ] = "test 3";

array_like.length = 4;
array_like.splice = [].splice;

console.log( array_like );
console.log( $.type( array_like ) );
console.log( array_like[ 2 ] );

到此，關(guān)于“javascript如何定義類數(shù)組對(duì)象”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！