javascript：类数组 -- 对象 javascript：原型与原型链

时间 2019-12-07

原文原文链接

在javascript中，对象与数组都是这门语言的原生规范中的基本数据类型，处于并列的位置。javascript

类数组:本质是一个对象,只是这个对象的属性有点特殊,模拟出数组的一些特性。

通常来讲，若是咱们有一个对象obj和一个数组a：html

obj["attr1"]; //取obj对象的attr1属性java

a[1]; //取数组a中的第二个元素数组

可是，有些时候，也会将一个对象“假装”成一个数组来用，咱们把这种对象称为“类数组对象”，再此咱们能够給它下一个定义，请看以下的代码：post

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就是一个类数组对象，所以，咱们能够在这里给类数组对象下一个定义：url

任何一个具备length属性以及对应的非负整数属性的对象做为一种数组。spa

可是，类数组对象毕竟本质上是一个Object，而不是真正的Array，那么两者的区别在哪里呢？prototype

一、一个是对象，一个是数组3d

二、数组的length属性，当新的元素添加到列表中的时候，其值会自动更新。类数组对象的不会。code

三、设置数组的length属性能够扩展或截断数组。

四、数组也是Array的实例能够调用Array的方法，好比push,pop等等。

实例1：

 1 <!DOCTYPE html>
 2 <html> 
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>类数组</title>
 6     </head>
 7     <body>
 8         <div></div>
 9         <div></div>
10         <div></div>
11         <div></div>
12         <script type="text/javascript">
13             //当咱们经过标签选择器获取<div>，并在控制台打印时，返回的值即是一个典型的类数组。
14             var divs = document.getElementsByTagName("div"); 
15             console.log(divs)
16             //定义一个数组
17             var arr = ["jack","mack","sunny"];    
18             //定义一个类数组对象
19             var obj = {
20                 0 : "jack",
21                 1 : "mack",
22                 2 : "sunny",
23                 length : 3,
24                 push : Array.prototype.push,
25                 splice : Array.prototype.splice
26             }
27             
28             arr.push("张三")
29             obj.push("张三")
30             console.log(arr)
31             console.log(obj)
32             //循环遍历
33             for(var i = 0;i < arr.length;i++){
34                 console.log(arr[i])
35             }
36             for(var j = 0;j < obj.length;j++){
37                 console.log(obj[j])
38             }
39         </script>
40     </body>
41 </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：类数组 -- 对象 javascript：原型与原型链

类数组:本质是一个对象,只是这个 对象 的属性有点特殊,模拟出数组的一些特性。

实例1：

程序运行结果以下：

类数组:本质是一个对象,只是这个对象的属性有点特殊,模拟出数组的一些特性。