将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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
js实现随机抽奖
Mar 19 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
读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表单加入Token防止重复提交的方法分析
2016/10/10 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
javascript如何创建对象
2016/08/29 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
python文件写入实例分析
2015/04/08 Python
详细探究Python中的字典容器
2015/04/14 Python
Python中修改字符串的四种方法
2018/11/02 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
法人授权委托书范本
2014/04/04 职场文书
宿舍标语大全
2014/06/19 职场文书
节约用水的口号
2014/06/20 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
学历证明样本
2015/06/16 职场文书
婚宴主持词
2015/06/30 职场文书
社区低保工作总结2015
2015/07/23 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android