如何在JavaScript中手動創建類數組對象

前言

關於什么是js的類數組對象這里不再贅述。可以參考這個鏈接,還有這里。

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

例： arguments ， NodeList ， HTMLCollection ， jQuery 等

 

類數組對象特性

1、擁有 length 屬性

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

 

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

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

 

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() 方法轉換類數組對象

// results is for internal usage only
makeArray: function( arr, results ) {
    var ret = results || [];

    if ( arr != null ) {
        if ( isArraylike( Object(arr) ) ) {
            jQuery.merge( ret,
                typeof arr === "string" ?
                [ arr ] : arr
            );
        } else {
            core_push.call( ret, arr );
        }
    }

    return ret;
},
merge: function( first, second ) {
    var l = second.length,
        i = first.length,
        j = 0;

    if ( typeof l === "number" ) {
        for ( ; j < l; j++ ) {
            first[ i++ ] = second[ j ];
        }
    } else {
        while ( second[j] !== undefined ) {
            first[ i++ ] = second[ j++ ];
        }
    }

    first.length = i;

    return first;
}

function isArraylike( obj ) {
    var length = obj.length,
        type = jQuery.type( obj );

    if ( jQuery.isWindow( obj ) ) {
        return false;
    }

    if ( obj.nodeType === 1 && length ) {
        return true;
    }

    return type === "array" || type !== "function" &&
        ( length === 0 ||
        typeof length === "number" && length > 0 && ( length - 1 ) in obj );
}

 

 

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 ] );

 

TypeScript中創建使用類數組對象

詳見 這篇文章

 

相關鏈接：

http://stackoverflow.com/questions/11886578/creating-array-like-objects-in-javascript

https://gist.github.com/elijahmanor/4759928

http://xahlee.info/js/js_convert_array-like.html

 

原文地址-小小滄海：http://www.cnblogs.com/xxcanghai/p/4834683.html