前言
关于什么是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() 方法转换类数组对象
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 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; }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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、全部代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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