将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实现一些常用软件的下载导航
Aug 03 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 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统计文章排行示例
2014/03/04 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
javascript 日期常用的方法
2009/11/11 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
js实现开关灯效果
2020/03/30 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
详解django中使用定时任务的方法
2018/09/27 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
MySQL面试题目集锦
2016/04/14 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
数控技术应届生求职信
2013/11/13 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
歌舞青春观后感
2015/06/10 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript