将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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
详解JavaScript的变量
Apr 04 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
本科生详细的自我评价
2013/09/19 职场文书
销售经理工作职责范文
2013/12/03 职场文书
满月酒答谢词
2014/01/14 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
初中班主任评语
2014/04/24 职场文书
保证书格式范文
2014/04/28 职场文书
投资建议书模板
2014/05/12 职场文书
离职保密承诺书
2014/05/28 职场文书
双拥工作宣传标语
2014/06/26 职场文书
食品安全承诺书范文
2014/08/29 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript