伪数组

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

相关文章

来自专栏大前端_Web

深入理解JS异步编程(一)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1555
来自专栏测试开发架构之路

C语言之Sleep函数

Sleep函数: 功 能: 执行挂起一段时间   用 法: unsigned sleep(unsigned seconds);   注意:   在VC中使用带上...

3568
来自专栏前端布道

JavaScript设计模式与开发实践 - 高阶函数的应用

定义 高阶函数是指至少满足下列条件之一的函数: 函数可以作为参数被传递; 函数可以作为返回值输出。 JavaScript语言中的函数显然满足高阶函数的条件,在实...

3073
来自专栏码农二狗

防止因事务未提交导致的死锁

844
来自专栏阿凯的Excel

Python读书笔记5(字符串相关应用)

上期分享了Python相关的字符串应用,重点分享了转义字符。今天和大家分享和字符串相关的函数和应用。 一、字符串的合并! ? Python用“+”号可以连接...

3415
来自专栏nnngu

Hibernate的关联映射

首先我们了解一个名词ORM,全称是(Object Relational Mapping),即对象关系映射。ORM的实现思想就是将关系型数据库中表的数据映射成对象...

2715
来自专栏生信宝典

Linux学习 - SED操作,awk的姊妹篇

awk和sed想一对兄妹,一个出现,就会问起另一个。现在,都来了。 sed基本参数解释 sed是stream editor的简称,擅长对文件进行各种正则操作、插...

1776
来自专栏维C果糖

史上最简单的 MySQL 教程(十三)「列属性 之 空属性、列描述和默认值」

列属性:实际上,真正约束字段的是数据类型,但是数据类型的约束比较单一,因此就需要额外的一些约束来保证数据的有效性,这就是列属性。

3666
来自专栏Crossin的编程教室

【Python 第55课】 正则表达式(1)

今天来挖个新坑,讲讲正则表达式。 什么是正则表达式?在回答这个问题之前,先来看看为什么要有正则表达式。 在编程处理文本的过程中,经常会需要按照某种规则去查找一些...

2677
来自专栏cnblogs

Javascript的内存泄漏分析

     作为程序员(更高大尚的称谓:研软件研发)的我们,无论是用Javascript,还是.net, java语言,肯定都遇到过内存泄漏的问题。只不过他们都有...

822

扫码关注云+社区