JavaScript中的类数组对象

在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)。

时间: 2025-01-05 20:41:37

JavaScript中的类数组对象的相关文章

Javascript中的arguments数组对象

(1)在函数体中,可以直接使用arguments数组对象,这个数组的元素是调用此函数时实际传入的所有参数 (2)其实在调用函数时,传入的参数个数可以和声明函数时不同,传入不同类型的参数也会导致结果不符合预期 (3)由于js的函数的返回值和参数个数以及参数类型都很灵活,我们在调用的时候应该确保传入函数期望的参数 示例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.

javascript 中的类数组和数组

什么是类数组呢? 我们先来看一段代码: function fn() { console.dir(arguments); } fn(1,2,3,4,5,6,7,8,9,10); 这段代码的执行后,在 chrome 浏览器的控制台中,结果如下: 函数 fn 执行的时候,函数内的 arguments 对象就是一个类数组.它和数组一样,以从小到大的数字作为属性名,而且还有一个 length 属性,而这个 length 属性的值恰好就是  10, 和数字作为下标的属性名的个数一致.这点和数组很一致,但是同

js中的类数组对象---NodeList

动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是一种特殊类型的对象. DOM Level 3 spec 规范 对 HTMLCollection 对象的描述如下: DOM中的 NodeList 和 NamedNodeMap 对象是动态的(live); 也就是说,对底层文档结构的修改会动态地反映到相关的集合NodeList 和 NamedNodeMa

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历,都内置forEach方法. 数组 遍历 普通遍历 最简单的一种,也是使用频率最高的一种. let arr = ['a', 'b', 'c', 'd', 'e'] for (let i = 0; i < ar

08.18 javascript 06 数组 数组的概念 创建数组 读取数组中的元素 稀疏数组 添加和删除数组的元素 数组遍历 多维数组 数组的方法 类数组对象 作为数组的字符串

# 数组 ### 数组的概念 * 数组是值的有序集合 * 数组中的每个值 称之为 元素 * 每个元素可以是任意数据类型的值 * 每个元素都有索引(下标) * 元素的索引从0开始,按照顺序递增. 元素最大的索引 2^32-2 ### 创建数组 * 直接量 `[]` * 构造函方式  `new Array()` ### 读写数组中的元素 * 数组名[索引] ### 稀疏数组 * js数组的索引是连续的 * 没有连续的给元素赋值 , 没有赋值的元素会自动赋值 undefined ### 添加和删除 数

[Javascript]类数组对象为什么不能用for in进行遍历

上来说重点,再废话 类数组对象不能使用for(var key in  elements)进行遍历,这是因为类数组的最后一个哈希的键值对是length:n   n代表数组长度 在Javascript中,我们在DOM树上面获取页面的元素, 例如使用var emls=getElementsByTagName () var emls=querySelectedAll() 获得的elements包含多个dom元素,在学习的过程中,我没有使用for(var i=0;i<elements.length;i++

Effective JavaScript Item 51 在类数组对象上重用数组方法

Array.prototype对象上的标准方法被设计为也可以在其它对象上重用 - 即使不是继承自Array的对象.因此,在JavaScript中存折一些类数组对象(Array-like Objects). 一个典型的例子是函数的arguments对象,在Item 22中对它进行过介绍.该对象并不继承自Array.prototype,所以我们不能直接调用arguments.forEach来对其中的元素进行遍历.但是,我们可以通过首先得到forEach方法的对象,然后调用call方法(可以参考Ite

javascript 类数组对象

原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做是个非负整数串来理解) 不具有数组所具有的方法 类数组示例: var a = {'1':'gg','2':'love','4':'meimei',length:5}; Array.prototype.join.call(a,'+');//'+gg+love++meimei' 非类数组示例: var

javascript:类数组 -- 对象

在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 类数组:本质是一个对象,只是这个 对象  的属性有点特殊,模拟出数组的一些特性. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    //取obj对象的attr1属性 a[1];              //取数组a中的第二个元素 但是,有些时候,也会将一个对象"伪装"成一个数组来用,我们把这种对象称为"类数组对象",再