将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兼容的placeholder属性详解
Aug 18 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue实现五子棋游戏
2020/05/28 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python实现网站注册验证码生成类
2017/06/08 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
如何理解python中数字列表
2020/05/29 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
公司请假条格式
2014/04/11 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python