将HTMLCollection/NodeList/伪数组转换成数组的实现方法


Posted in Javascript onJune 20, 2011

这里把符合以下条件的对象称为伪数组
1,具有length属性
2,按索引方式存储数据
3,不具有数组的push,pop等方法


1,function内的arguments 。
2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。
3,特殊写法的对象 ,如

var obj={}; 
obj[0] = "一"; 
obj[1] = "二"; 
obj[2] = "三"; 
obj.length = 3;

它们不具有数组的一些方法如push, pop, shift, join等。有时候需要将这些伪数组转成真正的数组,这样可以使用push, pop等方法。以下是工具函数makeArray
var makeArray = function(obj){ 
return Array.prototype.slice.call(obj,0); 
} 
try{ 
Array.prototype.slice.call(document.documentElement.childNodes, 0)[0].nodeType; 
}catch(e){ 
makeArray = function(obj){ 
var res = []; 
for(var i=0,len=obj.length; i<len; i++){ 
res.push(obj[i]); 
} 
return res; 
} 
}

以下分别测试以上三种伪数组
//定义一个函数fun,内部使用makeArray将其arguments转换成数组 
function fun(){ 
var ary = makeArray(arguments); 
alert(ary.constructor ); 
} 
//调用 
fun(3,5); 
//假设页面上有多个段落元素p 
var els = document.getElementsByTagName("p"); 
var ary1 = makeArray(els); 
alert(ary1.constructor); 

//特殊的js对象(如jquery对象) 
var obj={}; 
obj[0] = "一"; 
obj[1] = "二"; 
obj[2] = "三"; 
obj.length = 3; 
var ary2 = makeArray(obj); 
alert(ary2.constructor);
Javascript 相关文章推荐
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
读jQuery之五(取DOM元素)
Jun 20 #Javascript
读jQuery之四(优雅的迭代)
Jun 20 #Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 #Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 #Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
jQuery数组处理方法汇总
Jun 20 #Javascript
jQuery UI AutoComplete 使用说明
Jun 20 #Javascript
You might like
详谈PHP文件目录基础操作
2014/11/11 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
JavaScript控制Session操作方法
2013/01/17 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python网络编程之五子棋游戏
2020/05/14 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Python爬虫开发与项目实战
2020/12/16 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
yy生日主持词
2014/03/20 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
关于工作经历的证明书
2014/10/11 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
入团申请书格式
2019/06/20 职场文书