JavaScript中的类数组对象

Posted 2020-06-18 湾岸技研 Wangan Tech

    在javascript中，对象与数组都是这门语言的原生规范中的基本数据类型，处于并列的位置。

一般来说，如果我们有一个对象obj和一个数组a：

obj["attr1"];    //取obj对象的attr1属性

           a[1];   //取数组a中的第二个元素

    但是，有些时候，也会将一个对象“伪装”成一个数组来用，我们把这种对象称为“类数组对象”，再此我们可以給它下一个定义，请看如下的代码：

var a= {};

var i = 0;

for(i=0; i<10 ; i++){

　　a[i] = i*i;

}

a.length = i;

var total = 0;

for(var j=0; j< a.length; j++){

　　total += a[j];

}

上述代码中的a就是一个类数组对象，因此，我们可以在这里给类数组对象下一个定义：任何一个具有length属性以及对应的非负整数属性的对象作为一种数组。

但是，类数组对象毕竟本质上是一个Object，而不是真正的Array，那么二者的区别在哪里呢？

1、一个是对象，一个是数组

2、数组的length属性，当新的元素添加到列表中的时候，其值会自动更新。类数组对象的不会。

3、设置数组的length属性可以扩展或截断数组。

4、数组也是Array的实例可以调用Array的方法，比如push,pop等等。

一些个类数组对象的实例：

1、function内部的arguments对象就是一个类数组对象，它用arguments[2]来代表传入的第3个参数。

2、DOM方法document.getElementsByTagName()，返回的也是一个类数组对象

3、jQuery中的应用： 我们知道可以通过 $(‘#id‘)[0]来从jQuery对象获取原生的dom对象，但是jQuery中是如何实现的呢，$(‘#id‘)获取的jQuery对象到底是一个对象还是一个数组呢，答案是：一个类数组对象

     我们看一下jQuery的源代码：

jQuery = window.jQuery = window.$ = function( selector, context ) {
　　　　　　　　return new jQuery.fn.init( selector, context );
　　　　},
jQuery.fn = jQuery.prototype = {
　　　　init: function( selector, context ) {
　　　　　　　　selector = selector || document;

　　　　　　　　// Handle $(DOMElement)
　　　　　　　　if ( selector.nodeType ) {
　　　　　　　　　　this[0] = selector;
　　　　　　　　　　this.length = 1;
　　　　　　　　　　this.context = selector;
　　　　　　　　　　return this;
　　　　　　　　　}

　　　　...

红色字部分，构造了一个类数组对象，this指向的是通过jQuery(‘#id‘)构造的jQuery对象，而selector就是原生的dom对象，在此，把dom对象存在jQuery对象的0属性里了（属性名就叫0）。