HTML5学堂-码匠 HTML5学堂

您当前位于:JavaScript基础 ——> JavaScript中的伪数组
上一篇:经典的斐波那契数列与arguments.callee 下一篇:没有了

JavaScript中的伪数组

2016/04/07 07:36:11 | 作者:HTML5学堂(码匠) | 分类:JavaScript基础 | 关键词:伪数组,arguments,NodeList,标签列表

伪数组

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学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:经典的斐波那契数列与arguments.callee 下一篇:没有了