JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined、Null、Boolean、Number、String)和复杂数据类型(1种:Object)。Object是ECMAScript中使用最多的一个类型,所有的引用类型的值都是Object类型的实例。引用类型,本质上是一种数据结构,用于将数据和功能组织在一起。对象是某个特定引用类型的实例。

在JavaScript中,有一种特殊的对象,被称为类数组(array-like)对象,其在书中的定义为:

  • 拥有length属性,其它属性(索引)为非负整数
  • 不具有数组所具有的方法

类数组示例:

1:

var a = {'1':'gg','2':'love','4':'meimei',length:5};

2:

var a= {};

for(var i=0; i<10 ; i++){
  a[i] = i*i;
} a.length = i;

可以看出,通过将对象的每个属性名设为递增的非负整数,且动态定义一个length属性来表示元素个数,就可以使用对象来模拟数组。类数组对象可以像数组一样,使用[]通过下标访问。但它们终究只是类似数组,而不是数组,所以并不能使用数组的特有方法,如splice、indexOf、pop等。

类数组对象和数组的区别:

  1. 一个是对象,一个是数组
  2. 当新元素被添加时,数组的length属性的值会自动更新,类数组对象则不会
  3. 设置数组的length属性可扩展或截断数组,而对于类数组对象来说仅仅是改变了一个属性的值而已
  4. 类数组不能调用数组方法

类数组判断:

《javascript权威指南》上给出了代码用来判断一个对象是否属于“类数组”:

// Determine if o is an array-like object.
// Strings and functions have numeric length properties, but are
// excluded by the typeof test. In client-side JavaScript, DOM text
// nodes have a numeric length property, and may need to be excluded
// with an additional o.nodeType != 3 test.
function isArrayLike(o) {
if (o && // o is not null, undefined, etc.
typeof o === 'object' && // o is an object
isFinite(o.length) && // o.length is a finite number
o.length >= 0 && // o.length is non-negative
o.length===Math.floor(o.length) && // o.length is an integer
o.length < 4294967296) // o.length < 2^32
return true; // Then o is array-like
else
return false; // Otherwise it is not
}

类数组转换:

有些时候,我们需要将一个类数组对象转换为一个真正的数组,转换之后可使用数组方法

Array.prototype.slice.call(Object)

对于IE9以前的版本(DOM实现基于COM),可以使用makeArray来实现:

// 伪数组转化成数组
var makeArray = function(obj) {
if (!obj || obj.length === 0) {
return [];
}
// 非伪类对象,直接返回最好
if (!obj.length) {
return obj;
}
// 针对IE8以前 DOM的COM实现
try {
return [].slice.call(obj);
} catch (e) {
var i = 0,
j = obj.length,
res = [];
for (; i < j; i++) {
res.push(obj[i]);
}
return res;
}
};

常见类数组对象:

1.arguments

//属性:
length //长度
callee //正在执行的函数

arguments是最常见的类数组对象,在函数内部使用,示例:arguments[0] 或 functionName.arguments[0]

在JS的DOM中,有三个常用到的类数组对象:NodeList  NamedNodeMap 和 HTMLCollection

2.NodeList

//属性:
length //长度 //方法:
item(idx) //通过索引访问节点

以下代码形式返回类型为NodeList:

childNodes
getElementsByClassName(className)
getElementsByTagName(tagName)

3.NamedNodeMap

//属性:
length //长度 //方法:
item(idx) //通过索引访问节点
getNamedItem(NS) //通过名称(和命名空间)访问节点
setNamedItem(NS) //通过名称(和命名空间)设置节点
removeNamedItem(NS) //根据名称(和命名空间)删除节点

以下代码形式返回类型为NamedNodeMap:

element.attributes

4.HTMLCollection

//属性:
length //长度 //方法:
item(idx) //通过索引访问节点
namedItem(name) //通过name 属性或 id 属性访问节点

以下代码形式返回类型为HTMLCollection:

document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.anchors //所有带name属性的a元素
document.forms //所有form元素
document.scripts //所有script元素
tBodies(table元素)
rows(table、tbody、thead、tfoot元素)
cells(tr元素)

HTMLCollection  NodeList以及NamedNodeMap都是“动态的”,每当文档结构发生变化时,他们都会得到更新,始终会保存着最新,最准确的信息

浅谈JavaScript和DOM中的类数组对象的更多相关文章

  1. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  2. JavaScript、ES6中的类和对象

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

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

    动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...

  4. JavaScript类数组对象参考

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

  5. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

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

    原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...

  7. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  8. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  9. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

随机推荐

  1. twemproxy代理主干流程——剖析twemproxy代码正编

    在twemproxy的发送和接收流程剖析中,我们已经完全弄清楚twemproxy如何将客户端以及服务端发来的包切分成msg,获得一个独立的msg后twemproxy应该如何处理?这是本文这次需要重点介 ...

  2. angular中的$q服务

    $q的一共有四个api: 1.$q.when(value, successFn, errorFn, progressFn),返回值为一个promise对象 --value可以是一个任意数据,也可以是一 ...

  3. MySQL访问控制实现原理

    MySQL访问控制实现原理 MySQL 访问控制实际上由两个功能模块共同组成,从第一篇的第二章架构组成中可以看到,一个是负责 “看守 MySQL 大门”的用户管理模块,另一个就是负责监控来访者每一个动 ...

  4. C#—泛型_推迟一切可以推迟的东西

    泛型(generic)是C#语言2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定一个或多个具 ...

  5. css样式表。作用是美化HTML网页.

    样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...

  6. 自动化测试—monkeyrunner

    步骤:     1. 在 pycharm 中编写一个 python的脚本,注意:在运行脚本时不要有注释,不然会报错                 2. 在 dos 窗口中运行脚本.         ...

  7. Java 异常处理笔记

    Java程序运行过程中所发生的异常事件可分为两类: §错误(Error):JVM系统内部错误.资源耗尽等严重情况 §违例(Exception): 其它因编程错误或偶然的外在因素导致的一般性问题,例如: ...

  8. wifi扩展设置

    一.主路由器设置 网络参数 LAN口设置查到 MAC地址,用于设置扩展路由器 Bridge功能设置时 AP1的地址 2.无线基本设置,桥的 SSID BSSID 为扩展 3.无线安全设置 二.扩展路由 ...

  9. Java之数字处理类浅析

    包装类: 数据类型相对的包装类:byte---Byteshort---Shortint---Integerlong---Long float---Floatdouble---Double boolea ...

  10. Django学习(八)---修改文章和添加文章

    博客页面的修改文章和添加新文章 从主页点击不同文章的超链接进入文章页面,就是传递了一个id作为参数,然后后台代码根据这个参数从数据库中取出来对应的文章,并把它传递到前端页面 修改文章和添加新文章,是要 ...