在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:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类数组</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
//当我们通过标签选择器获取<div>,并在控制台打印时,返回的值便是一个典型的类数组。
var divs = document.getElementsByTagName("div");
console.log(divs)
//定义一个数组
var arr = ["jack","mack","sunny"];
//定义一个类数组对象
var obj = {
0 : "jack",
1 : "mack",
2 : "sunny",
length : 3,
push : Array.prototype.push,
splice : Array.prototype.splice
} arr.push("张三")
obj.push("张三")
console.log(arr)
console.log(obj)
//循环遍历
for(var i = 0;i < arr.length;i++){
console.log(arr[i])
}
for(var j = 0;j < obj.length;j++){
console.log(obj[j])
}
</script>
</body>
</html>

程序运行结果如下:

1. 当第15行运行 打印的结果可以看到,完全与我们常见的数组一样 -- [div,div,div,div],并且也有length属性

2.定义数组 arr 运行结果如下

3. 当我们将第25行(splice : Array.prototype.splice)注释掉,我们可以看到,打印结果是花括号 { },与我们常见的对象表现形式一样,

类数组说到底还是一个对象,只是这个对象的属性有点特殊,模拟出数组的一些特性。

当我们将第23,24行注释掉,我们原先用在数组中的方法(例如:push,length),在这个类数组中是用不了的,最后只会报错,但是当我们在这个对象中追加(写入)它push,length属性,我们在数组中用的方法在这个对象中也能实现。(当然push实在原型里添加,有不理解的可以参考我的javascript:原型与原型链,可以更好的理解。)

结合上下数组arr与类数组obj的执行结果可以看到,并没有什么区别,都能push“张三”进去。

4.当我们遍历 arr 与 obj 最后的执行结果是一样的,这便是所谓的 -- 类数组(假数组)。

javascript:类数组 -- 对象的更多相关文章

  1. JavaScript类数组对象参考

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

  2. javascript 类数组对象

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

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

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

  4. Javascript 类数组(Array-like)对象

    Javascript中的类数组对象(Array-like object)指的是一些看起来像数组但又不是数组的对象.Javascript中的arguments变量.document.getElement ...

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

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

  6. Javascript数组与类数组对象

    问题来由: 之前面试X公司的时候,问我关于原型链知道多少,于是我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__p ...

  7. JavaScript中的类数组对象

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

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

    Array.prototype对象上的标准方法被设计为也能够在其他对象上重用 - 即使不是继承自Array的对象. 因此,在JavaScript中存折一些类数组对象(Array-like Object ...

  9. JavaScript 浅析数组对象与类数组对象

    数组(Array对象) 数组的操作 创建数组方法 添加与修改数组元素 删除数组元素 使用数组元素 遍历数组元素 多维数组 数组相关的函数 concat() join() pop() push() sh ...

随机推荐

  1. Quartz深入浅出(一)

    什么是Quartz Quartz是一个开源的作业调度框架,由java编写,在.NET平台为Quartz.Net,通过Quart可以快速完成任务调度的工作. Quartz能干什么/应用场景 如网页游戏中 ...

  2. iOS-自定义NavigationItem返回按钮【pop返回按钮】

    在用navigationVC时,返回按钮有时候不想用系统的,这里用继承的方式把按钮替换了,同时也可以实现系统的右滑返回,很简单: 1.创建基类 BasePopViewController 创建一个用于 ...

  3. 04-01 Java switch、for、while、do while语句,循环嵌套,跳转语句break、continue、return

    语句 1:switch语句(掌握) (1)格式: switch(表达式) { case 值1: 语句体1; break; case 值2: 语句体2; break; ... default: 语句体n ...

  4. MySQL笔记(5)---索引与算法

    1.前言 本章记录MySQL中的索引机制,了解索引可以让数据库更快.索引太多会造成性能损耗,索引太少肯定查询效率不高. 2.InnoDB存储引擎所有概述 InnoDB中常见的索引有: B+树索引 全文 ...

  5. PLSQL Developer概念学习系列之如何正确登录连接上Oracle(图文详解)

    不多说,直接上干货! 进入PLSQL Developer 1.双击 2.得到 比如,我这里安装的是 全网最详细的Windows系统里Oracle 11g R2 Database服务器端(64bit)的 ...

  6. Element ui级联地址省市区插件

    安装 npm install element-china-area-data -S 使用 import { provinceAndCityData, regionData, provinceAndCi ...

  7. 根据js来判断手机是操作系安卓还是ios

    平常开发很常见的功能,在移动端需要根据javaScript来判断手机是安卓还是ios进行应用市场跳转. 通过js提供的Navigator可以来判断手机是安卓还是ios系统,代码如下 1.js判断是否为 ...

  8. hibernate对连接池的支持和HQL查询

    hibernate对连接池的支持 连接池, 作用: 管理连接:提升连接的利用效率! 常用的连接池: C3P0连接池 Hibernate 自带的也有一个连接池,且对C3P0连接池也有支持! 只维护一个连 ...

  9. Leetcode 746. Min Cost Climbing Stairs

    思路:动态规划. class Solution { //不能对cost数组进行写操作,因为JAVA中参数是引用 public int minCostClimbingStairs(int[] cost) ...

  10. CentOS6.5 QT5.3 找不到GLIBCXX3.4.15解决方法

    下载安装后 启动的时候提示 GLIBCXX_3.4.15,发现libstdc++.so.6的版本过, 在安装qt-creator的时候运行这个IDE就出现了这个问题,是由于libstdc++.so.6 ...