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)。
JavaScript中的类数组对象的更多相关文章
- 浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...
- javascript 中的类数组和数组
什么是类数组呢? 我们先来看一段代码: function fn() { console.dir(arguments); } fn(1,2,3,4,5,6,7,8,9,10); 这段代码的执行后,在 c ...
- java基础64 JavaScript中的Arrays数组对象和prototype原型属性(网页知识)
1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...
- javaScript中定义类或对象的五种方式
第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Obj ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...
- 如何在JavaScript中手动创建类数组对象
前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...
- javascript 类数组对象
原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...
随机推荐
- Python学习记录day7
目录 Python学习记录day7 1. 面向过程 VS 面向对象 编程范式 2. 面向对象特性 3. 类的定义.构造函数和公有属性 4. 类的析构函数 5. 类的继承 6. 经典类vs新式类 7. ...
- oracle pl/sql程序
简单的pl/sql程序 declare begin dbms_output.put_line('hello world'); end; 什么是PL/SQL? pl/sql(Procedure lang ...
- uploadify在chrome下初始化失败,在Firefox下却可以原因探析
如果没有报错,在其他浏览器下没问题,那就只有一种可能:浏览器flash加载失败,解决办法是,更改浏览器对站点flash的设置.参考下图:
- MacOs安装mysql与修改root密码
1.下载安装包 http://www.mysql.com/downloads/ 找到如下内容下载 mysql-5.7.21-1-macos10.13-x86_64.dmg下载地址是 https://c ...
- DB2 SQL1477N问题
ERROR [55019] [IBM][DB2/NT] SQL1477N For table "DB_YHJX.YHJX_FHDKFHZ" an object "521 ...
- 06 爬虫框架:scrapy
爬虫框架:scrapy 一 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前S ...
- jQuery 插件使用记录
Validate 表单验证 ver 1.6 浏览更多 默认情况下,当表单 submit 时,那些验证不通过的 field 旁边会出现错误消息提示,有时很方便,但有时看起来很不美观.可以关闭此消息提示. ...
- 2018.06.28 BZOJ1014 [JSOI2008]火星人prefix(非旋treap+hash)
[JSOI2008]火星人prefix Time Limit: 10 Sec Memory Limit: 162 MB Submit: 8951 Solved: 2860 Description 火星 ...
- 2018.07.23 hdu5828 Rikka with Sequence(线段树)
传送门 这道题维护区间加,区间开根,区间求和. 线段树常规操作. 首先回忆两道简单得多的线段树. 第一个:区间覆盖,区间加,区间求和. 第二个:区间开根,区间求和. 这两个是名副其实的常规操作. 但这 ...
- 2018.07.06 POJ1556 The Doors(最短路)
The Doors Time Limit: 1000MS Memory Limit: 10000K Description You are to find the length of the shor ...