JavaScript|伪数组

来源:
每日新闻头条
最后修订:
2017-03-21 21:48:50

摘要:HTML5学堂(码匠):熟悉JavaScript的人对document.getElementsByTagName再熟悉不过,对arguments也多有耳闻,我们时常针对其进行遍历,通过数组下标进行访问...

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

何为伪数组

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

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

常见的伪数组

arguments参数:arguments是一个对象,而非一个数组。

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

将伪数组转换为数组

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

数组转换的实例

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

JavaScript|伪数组

HTML5学堂(码匠) - 数组转换的实例

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

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

JavaScript|伪数组

HTML5学堂(码匠) - 数组转换的实例

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

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

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

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

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

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

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

JavaScript|伪数组

HTML5学堂(码匠) - https://weixin.mj216.com/