伪数组

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

相关文章

来自专栏北京马哥教育

Awk是什么?一文带运维小白快速掌握Linux Awk用法

作者:a8 Awk、sed与grep,俗称Linux下的三剑客,它们之间有很多相似点,但是同样也各有各的特色,相似的地方是它们都可以匹配文本,其中sed和aw...

3376
来自专栏androidBlog

归并排序 递归版和非递归版的实现(java)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

621
来自专栏技术博文

php 使用函数中遇到的坑之----list

1. list 把数组中的值赋给一些变量 <?php $info = array('coffee', 'brown', 'caffeine'); // 列出所有...

2536
来自专栏Golang语言社区

Golang语言--【社区推荐阅读】 fmt用法

fmt 包中的函数和方法 // format.go -------------------------------------------------- /...

32911
来自专栏猿人谷

最小的K个数:用快排的思想去解相关问题

实现快速排序算法的关键在于先在数组中选择一个数字,接下来把数组中的数字分为两部分,比选择的数字小的数字移到数组的左边,比选择的数字大的数字移到数组的右边。 这个...

1716
来自专栏沈唁志

jQuery中的9个选择器

1132
来自专栏性能与架构

nginx location配置

location在nginx中起着重要作用,对nginx接收到的请求字符串进行处理,如地址定向、数据缓存、应答控制、代理转发等 location语法 locat...

3196
来自专栏散尽浮华

统计文件中出现的单词次数

这里以kevin.txt文件内容(单词由一个或多个空格字符分隔)为例进行简单说明 [root@centos6-test06 ~]# cat /root/kevi...

2779
来自专栏达摩兵的技术空间

与我一起学正则

1、校验密码强度 密码的强度必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间 ^(?=.\d)(?=.[a-z])(?=.*[A-Z])...

603
来自专栏从零开始学自动化测试

Selenium2+python自动化36-判断元素存在

前言 最近有很多小伙伴在问如何判断一个元素是否存在,这个方法在selenium里面是没有的,需要自己写咯。 元素不存在的话,操作元素会报错,或者元素有多个,不唯...

2737

扫描关注云+社区