伪数组

HTML5学堂：熟悉JavaScript的人对document.getElementsByTagName再熟悉不过，对arguments也多有耳闻，我们时常针对其进行遍历，通过数组下标进行访问，但是它们却是数组中的“冒牌货”，一起来看今天要说的“伪数组”。

何为伪数组

伪数组（类数组）：无法直接调用数组方法，也无法使用length属性实现什么特殊的行为，但是！可以使用真正数组遍历的方法（for循环配合数组下标）来遍历它们。

说的浅显一些，就是：存在着length属性，可以通过数组下标的方式进行每个元素的访问，但是不能够使用push等数组的方法。

常见的伪数组

arguments参数：arguments是一个对象，而非一个数组。

调用document.getElementsByTagName、getElementsByClassName等各类获取元素的方法。这些方法返回的是一个NodeList（节点列表），也并不是一个数组。

将伪数组转换为数组

可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

数组转换的实例

伪数组情况下，使用push方法

1. <div id="con">
2.     <span>HTML5学堂</span>
3.     <span>利利-独行冰海</span>
4.     <span>堡堡-梦幻雪冰</span>
5. </div>
6. <script>
7.     var contents = document.getElementById('con').getElementsByTagName('span');
8.     contents.push('h5course');
9.     console.log(contents);
10. </script>

控制台会报出错误：Uncaught TypeError: contents.push is not a function

使用slice进行了转换，将伪数组转换成数组之后

1. <div id="con">
2.     <span>HTML5学堂</span>
3.     <span>利利-独行冰海</span>
4.     <span>堡堡-梦幻雪冰</span>
5. </div>
6. <script>
7.     var contents = document.getElementById('con').getElementsByTagName('span');
8.     contents = Array.prototype.slice.call(contents);
9.     contents.push('h5course');
10.     console.log(contents);
11. </script>

此时控制台返回的内容就成了[span, span, span, "h5course"]

为何能够使用slice实现转换呢？

其实这个和我们之前提到的克隆一个数组的方法类似，我们之前在一篇文章中提到，可以使用slice和concat方法进行数组的复制。

slice( )方法，是基于当前数组中的一个或多个项，创建一个新数组，并返回新数组。

concat( )方法，是基于当前数组中的所有项创建一个新数组，返回新数组。

不过这两种方法在这里的表现并不完全相同。

slice方法，返回的内容如上，三个span元素与"h5course"是同级的。

concat方法，使用时代码为：contents = Array.prototype.concat.apply(contents);控制台返回的内容为：[HTMLCollection[3], "h5course"]。换句话说，将三个span元素作为了一个单独的数组而存放。

关于数组的复制/克隆方法

如果你对数组的复制/克隆方法感兴趣，可以点击——>复制各类变量的方法（是否应该在原型上绑定事件？）进行访问。如果你是我们的微信用户，可以在公众号中发送“克隆数组”或“复制数组”。

HTML5小编-利利 耗时2.0h

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注