将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事件模拟
Jun 27 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
Element Steps步骤条的使用方法
Jul 26 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
杏林同学录(三)
2006/10/09 PHP
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
Javascript !!的作用
2008/12/04 Javascript
jquery 插件开发备注
2010/08/27 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue移动端屏幕适配详解
2019/04/30 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python中asyncore的用法实例
2014/09/29 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
实例详解Python模块decimal
2019/06/26 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
技术比武方案
2014/05/19 职场文书
弄虚作假心得体会
2014/09/10 职场文书
毕业生评语大全
2015/01/04 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技