javascript如何定義類數組對象

這篇文章主要介紹“javascript如何定義類數組對象”，在日常操作中，相信很多人在javascript如何定義類數組對象問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript如何定義類數組對象”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

javascript定義類數組對象的方法是：1、首先創建一個空對象；2、為對象直接定義數字下標的屬性；3、關鍵點，為對象設置length屬性和splice屬性為數字和函數。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

js中類數組對象很多，概念簡單的講就是看上去像數組，又不是數組，可以使用數字下標方式訪問又沒有數組方法。

例： arguments ， NodeList ， HTMLCollection ， jQuery 等

類數組對象特性

1、擁有 length 屬性

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

2、可以使用數字下標的方式訪問對象

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

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

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

4、使用 instanceof 操作不屬于 Array

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

5、可以轉換為真數組對象

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

PS:注意在IE8下部分對象無法使用slice方法轉換為真數組對象。

建議使用jquery提供的 $.makeArray() 方法轉換類數組對象

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

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

類數組對象優點

關于優點我相信不用太多描述，可以讓js和其他后臺語言擁有相同的操作方式。

如C#的某些list集合，可以使用數字下標 list[0] 來訪問或是使用字符串名稱 list['name'] 來訪問同一對象

同時還擁有各種自定義方法，自定義屬性，看jquery對象的優雅的訪問方式即可知是如此美妙的對象。

如何手動創建類數組對象

回歸主題，如何手動創建類數組對象。

1、首先創建一個空對象

var array_like = {};//創建一個空對象

2、為對象直接定義數字下標的屬性，這在其他語言里是絕對不允許的，對象屬性不能使用數字開頭，但JS里是可以的，甚至使用中文都可以

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

3、關鍵點，為對象設置length屬性和splice屬性為數字和函數

//關鍵點
array_like.length = 4;//為對象設置length屬性
array_like.splice = [].splice;//同時設置splice屬性為一個函數

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

4、測試

//設定自定義屬性
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"
//數字下標訪問
console.log( array_like[ 0 ] );//"test 0"
//自定義屬性訪問
array_like.test0;//"test 0"
//不是數組對象
array_like instanceof Array;//false
//轉換為真數組對象
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 ] );

到此，關于“javascript如何定義類數組對象”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！