问题引出

在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取。同样的,在使用getElementsByName等DOM遍历方法中,我们也习惯性会去使用数组方法来进行操作,如数字索引、用length属性访问长度并遍历等等。久而久之,很多人都一直认为DOM遍历方法返回的是一个数组。  实际上。。。。。。

返回了一个HTMLCollection对象

假如我们用一个数组来表示:

  返回的当然是一个数组对象了哈哈哈哈哈

上面两个运行环境截图给萌新们展示了,DOM遍历方法返回的不是数组对象,而是一个HTMLCollection对象,下面来说说这种特别像数组却又不是数组的对象:

JavaScript对象

JavaScript是一个基于对象的语言,正所谓万物皆是对象。JavaScript对对象的定义是:属性的无序集合,每个属性存放一个原始值、对象或函数。这句话可以通俗理解为,每个对象就是一个键值对的集合,键即是属性名,而值就是属性值,可以是原始值、对象或者函数。

这里用字面量的方法定义了一个对象

而访问对象的属性有以下两种办法:

  1. 用‘.’来访问,直接用 对象.属性名 的方法来获取
  2. 用[]来访问:对象[属性名]

数组对象

而数组对象,则是一个特殊的对象,可以看作是键名(属性名)只能是数字(注意是绝对意义上的数字,而不是内容为数字的字符串)、并且只能从0开始顺次递增1的整数的对象。数组对象继承了对象的方法与特性,同时在自己这一层又定义了很多自己的方法,比如push()、shift()等等,这就构建了我们平时所使用的数组。

从上可以看到一个数组,除了所存储的键值对属性外,还具有length和__proto__两个属性,length不用多说,而__proto__指向该对象所继承的元素,可以理解为指向父类。  这里可以看到一个普通的数组对象继承自Array[0],在Array[0]中定义了数组的各种方法,而Array[0]则继承自Object.

类数组对象及转换

这里再来说我们的类数组对象,相信就容易理解多了。 类数组对象是JavaScript中一类特殊的对象,他们也继承自Object对象,具有length属性,可以使用[]进行访问(这样也就可以使用for进行循环遍历)、并且键是自然数序列。但是他们并不继承自Array对象,也就不具有数组对象的种种方法了~

而JavaScript中的类数组对象并不只有HTMLCollection一个,另外常用的还有Arguments(函数的参数列表)、NodeList(节点列表)、StyleSheetList(样式列表)等等,这里就不详细介绍了,大家可以自己试试他们各自的使用方法、属性与方法。除了JavaScript内置的一些类数组对象之外,我们也可以自己来构建、甚至定义类数组对象来使用,比如甚至 。。。。。。

另外一个要提是类数组对象向数组对象的转换。虽然我现在还没有遇到过需要做如此转换的情景,不过还是介绍下这个方法。除了“用for循环遍历访问类数组对象中的元素并装入另外定义的一个数组”这样的方法外,博客大神们还提供了另外一个方法,如下:

这里使用了call方法,本菜鸟目前对JS继承链上Function这个分支还没怎么深入研究,不太懂这个方法。留作以后解释吧。。。。。。

简述JavaScript对象、数组对象与类数组对象的更多相关文章

  1. 浅谈JavaScript和DOM中的类数组对象

    JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...

  2. JavaScript、ES6中的类和对象

           面向对象可以用于描述现实世界的事物,但是事物分为具体的(特指的)事物和抽象的(泛指的)事物. 面向对象思维的特点: 1.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板) 2. ...

  3. dotnet 数组自动转基类数组提示 Co-variant array conversion 是什么问题

    在 C# 的语法,可以提供自动将某个类的数组自动转这个类的基类数组的方法,但是这样的转换在 Resharper 会提示 Co-variant array conversion 这是什么问题? 在 C# ...

  4. day 23 对象的名称空间 类,对象属性和方法 封装 接口提供

    一.对象的特有名称空间 # 对象独有的名称空间:在产生对象时就赋初值 '''class ted: def func(): 当func里不存在参数时,调用时不需要给值 print('hah')ted.f ...

  5. 1.面向过程编程 2.面向对象编程 3.类和对象 4.python 创建类和对象 如何使用对象 5.属性的查找顺序 6.初始化函数 7.绑定方法 与非绑定方法

    1.面向过程编程 面向过程:一种编程思想在编写代码时 要时刻想着过程这个两个字过程指的是什么? 解决问题的步骤 流程,即第一步干什么 第二步干什么,其目的是将一个复杂的问题,拆分为若干的小的问题,按照 ...

  6. JavaScript类数组对象参考

    JavaScript和DOM中有很多类数组对象,它们有以下特点 1.有length属性 2.可以使用[]通过下标访问 3.部分类数组对象使用[]访问成员时不只可以使用下标,还可以使用id或name 4 ...

  7. javascript 类数组对象

    原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...

  8. javascript:类数组 -- 对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 类数组:本质是一个对象,只是这个 对象  的属性有点特殊,模拟出数组的一些特性. 一般来说,如果我们有一个 ...

  9. JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890转1,234,567,890;argruments 对象(类数组)转换成数组

    一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746 ...

随机推荐

  1. 在Centos中部署redis运行状态图形化监控工具 — RedisLive

    写在前面 前两天看到张善友老师的一篇文章<先定个小目标, 使用C# 开发的千万级应用>,里面给出了一张腾讯OA基础服务中redis运行情况的一张监控图,然后想到自己的项目中前不久也上了re ...

  2. Burp Suite 使用教程(上传突破利器)

    Burp Suite是一个免费的网站攻击工具. 它包括proxy.spider.intruder.repeater四项功能.该程序使用Java写成,需要 JRE 1.4 以上版本 下载该程序的源代码, ...

  3. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  4. WPF相关开源项目

    MahApps 排名第一的是MahApps框架. 该框架不错.详细信息请去官网. cefsharp 能让你在应用中嵌入谷歌浏览器页

  5. Tomcat 学习心得

    Tomcat Server的结构图 Tomcat服务器的启动是基于一个server.xml文件的,Tomcat启动的时候首先会启动一个Server,Server里面就会启动Service,Servic ...

  6. 在Oracle中恢复被DROP掉的表

    在Oracle中可能不小心会DROP掉一个表,如果没有定期做备份的话,将会带来很大的麻烦.如果有的情况下,每天的数据都很重要,而定期备份的周期又稍长,情况恐怕也不容乐观!以前只知道Windows有个回 ...

  7. Win10搭建Linux开发环境之网络连接设定

    一直想在家自己搭建一个LINUX服务器,好在上面安装个ORACLE数据库玩玩. 上次用了Ubuntu,结果ORACLE没装成功,现在换个思路,采用CentOS 7作为Linux服务器, 之后再进行构建 ...

  8. c#泛型的使用[转]

    在2005年底微软公司正式发布了C# 2.0,与C# 1.x相比,新版本增加了很多新特性,其中最重要的是对泛型的支持.通过泛型,我们可以定义类型安全的数据结构,而无需使用实际的数据类型.这能显著提高性 ...

  9. Yii2 时间控件之把layDate做成widget

    实现效果如下 1.把layDate封装成Yii2的widget,存在 "\common\widgets"目录下,命名为DycLayDate,具体引用查看代码. 2.对应的model ...

  10. 60阶单群同构于A5的证明

    设$G$是$60$阶的单群,我们来证明他同构于$A_5$,一个比较直观地思路是考虑群表示$\phi:G\to S(\Sigma)$,由同态基本定理得到$$G/{\rm Ker}\phi \simeq ...