前言

关于什么是js的类数组对象这里不再赘述。可以参考这个链接,还有这里。

js中类数组对象很多，概念简单的讲就是看上去像数组，又不是数组，可以使用数字下标方式访问又没有数组方法。

例： arguments ， NodeList ， HTMLCollection ， jQuery 等

类数组对象特性

1、拥有 length 属性

var a=document.getElementsByTagName("div");

a.__proto__;// HTMLCollection {} 属于类数组对象

a.length;//

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;

}

jQuery.makeArray源码

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

}

jQuery的isArraylike判定方法

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中创建使用类数组对象

详见这篇文章

秒客网

如何在JavaScript中手动创建类数组对象

前言

类数组对象特性

类数组对象优点

如何手动创建类数组对象

TypeScript中创建使用类数组对象

相关文章