将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 相关文章推荐
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
读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
MySQL 日期时间函数常用总结
2012/06/12 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python处理cookie详解
2014/02/07 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python PO设计模式的具体使用
2019/08/16 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
少先队入队活动方案
2014/02/08 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
以下牛机,你有几个
2022/04/05 无线电