伪数组

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 条评论
登录 后参与评论

相关文章

来自专栏社区的朋友们

sizeof 知多少? (下)

稍熟悉 C/C++ 的朋友,对于 sizeof 肯定不陌生,通过它我们可以知晓某个类型或者实例的内存大小( 以字节计 ),网上关于这个话题的信息其实挺多的,但是...

930
来自专栏编程

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

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

1785
来自专栏LEo的网络日志

c库函数strncat出现乱字符

3657
来自专栏小樱的经验随笔

【正则表达式学习笔记之一】简单认识正则表达式

一、引言   正则表达式是什么东东?   在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句...

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

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

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

2257
来自专栏梦魇小栈

重新介绍 JavaScript(JS全面系列教程)

为什么会有这一篇“重新介绍”呢?因为 JavaScript 堪称世界上被人误解最深的编程语言。虽然常被嘲为“玩具语言”,但在它看似简洁的外衣下,还隐藏着强大的语...

891
来自专栏我和我大前端的故事

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

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

2132
来自专栏Golang语言社区

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

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

3368
来自专栏java学习

java每日一练(2017/9/16)

本期题目 (单选题) 1、代码String str=”123456a”;int i=Integer.parseInt(str);会报异常的是() A java...

3548
来自专栏青玉伏案

窥探Swift之函数与闭包的应用实例

今天的博客算是比较基础的,还是那句话,基础这东西在什么时候都是最重要的。说到函数,只要是写过程序就肯定知道函数是怎么回事,今天就来讨论一下Swift中的函数的特...

1865

扫码关注云+社区