将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 相关文章推荐
js弹出层永远居中实现思路及代码
Nov 29 Javascript
JavaScript中return false的用法
Mar 12 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
vue自定义filters过滤器
Apr 26 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
Javascript var变量删除原理及实现
Aug 26 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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之readdir函数用法实例
2014/11/13 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python实现将xml导入至excel
2015/11/20 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
python中的列表和元组区别分析
2020/12/30 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Weblogc domain问题
2014/01/27 面试题
推普周活动总结
2014/08/28 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers