伪数组
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
- Leetcode 274. H-Index
- 值得 .NET 开发者了解的15个特性
- Angular和Vue.js 深度对比
- 前端开发者常用的9个JavaScript图表库
- 1000多个项目中的十大JavaScript错误以及如何避免
- SoapUI实践:自动化测试、压力测试、持续集成
- 如何把kotlin+spring boot开发的项目部署在tomcat上
- 使用开源项目Alipay.AopSdk.Core完成支付宝网页登录
- vhost-user 简介
- 把玩爬虫框架Gecco
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-Web打印
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(89)-EF执行SQL语句与存储过程
- GitHub上大热的Deep Photo终于有TensorFlow版了!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 0794-5.16.2-Hive和Imapla查询decimal类型结果不同异常
- 利用TFRecords存储于读取带标签的图片
- matlab sum函数
- [tensorflow损失函数系列]softmax_cross_entropy_with_logits
- RESTful API 设计最佳实践
- Spring 是如何解决循环依赖的?
- 移动webhead参数
- 看了这篇泛型,下次设计链表别傻傻的用int 表示node节点的值了
- 标准TensorFlow格式 TFRecords
- LeetCode 05最长回文子串
- 基于NCNN的3x3可分离卷积再思考盒子滤波
- [译]Buidler 新手教程
- tf.train.shuffle_batch函数解析
- 网页小图标Favicon
- ASP.net Core MVC项目给js文件添加版本号