伪数组

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

何为伪数组

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

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

常见的伪数组

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

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

将伪数组转换为数组

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

数组转换的实例

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

<div id="con">
    <span>HTML5学堂</span>
    <span>利利-独行冰海</span>
    <span>堡堡-梦幻雪冰</span>
</div>
<script>
    var contents = document.getElementById('con').getElementsByTagName('span');
    contents.push('h5course');
    console.log(contents);
</script>

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

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

<div id="con">
    <span>HTML5学堂</span>
    <span>利利-独行冰海</span>
    <span>堡堡-梦幻雪冰</span>
</div>
<script>
    var contents = document.getElementById('con').getElementsByTagName('span');
    contents = Array.prototype.slice.call(contents);
    contents.push('h5course');
    console.log(contents);
</script>

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

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

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

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

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

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

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

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

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

如果你对数组的复制/克隆方法感兴趣,可以查看——>复制各类变量的方法(是否应该在原型上绑定事件?)进行访问。如果你是我们的微信用户,可以在公众号中发送“克隆数组”或“复制数组”。(文章标题为在对象的原型上添加方法?)

HTML5小编-利利 耗时2.0h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-04-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

2017余额不足,Python来充值:迭代和生成器

时光虽然脚步轻轻,但它透过2018却悄然露出了狐狸尾巴,岁月的时钟显示2017已然余额不足。 怎么办呢?继续用Python来充值吧! Python的击出语法里,...

1745
来自专栏深度学习与计算机视觉

C++ 指针常量与常量指针

吐槽一下: 指针常量与常量指针的翻译就好比机器学习中Regularization翻译成正则化一样,讲真,正则化这个说法确实要比规则化显得高端些,但是到了理解...

2147
来自专栏小白客

Python基础学习-操作列表

一 :遍历整个列表 1:使用for循环来遍历列表: 例: ? 输出: ? 二:避免缩进错误 1:Python根据缩进来判断代码行与前一个代码行的关系。 2:...

2774
来自专栏前端学习心得

JavaScript预解释是一种毫无节操的机制

1217
来自专栏sunseekers

初探 TypeScript函数基本类型泛型接口类内置对象

前段时间有朋友和我推荐 TypeScript ,他说写起来特别爽,让我去试一试,那时候我还在那是啥高深莫测的东西。刚好那段时间忙,一直没有时间看。最近也很忙,还...

1112
来自专栏鸿的学习笔记

Python漫谈

列表切片的标准是lst[a:b:c] a是列表切片的开头,b是切片的结尾,c是step。 这里的表示从第一个元素开始,按照每隔一步,到第三个元素结束

873
来自专栏Golang语言社区

厚土Go学习笔记 | 17. 结构体及用指针访问结构体

结构体是个很有用的东西,在用计算机语言描述现实世界里的东西时,不得不大量的使用它。把现实世界的某一样东西的各种属性,用一个一个的变量记录下来。 最简单的比如:平...

3338
来自专栏文武兼修ing——机器学习与IC设计

JavaScript入门笔记(2)字符串相关列表对象

字符串相关 字符串基础 字符串历来是各种编程语言坑最多的地方(个人认为),不同软件语言在字符串上的操作的差别比软件语言和硬件描述语言的差距都大(一样是个人认为)...

2986
来自专栏python3

python3--元组(tuple),列表(list),字典dict,其它(for,enumerate,range)

元组被称为只读列表,即数据可以被查询,但不能被修改,所以,字符串的切片操作同样适用于元组

1281
来自专栏移动端开发

Swift 面向对象解析(二)

 接着上面一篇说的内容: 一 继承:      苹果继承与水果,苹果是水果的子类,则苹果是一种特殊的水果;这就是继承的关系,这个我们学OC的时候相信也都理解了...

2127

扫码关注云+社区