将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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Date对象格式化函数代码
Jul 17 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
如何用JavaScipt测网速
May 09 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打造属于自己的MVC框架
2012/03/07 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python对csv文件追加写入列的方法
2019/08/01 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python中的整除和取模实例
2020/06/03 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
施工班组长岗位职责
2014/01/05 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
场地使用证明模板
2014/10/25 职场文书
企业承诺书格式范文
2015/04/28 职场文书
Django框架模板用法详解
2022/06/10 Python