js中将HTMLCollection/NodeList/伪数组转换成数组的代码


Posted in Javascript onJuly 31, 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 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 #Javascript
javascript中length属性的探索
Jul 31 #Javascript
javascript string字符串优化问题
Jul 31 #Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 #Javascript
基于JQuery 的消息提示框效果代码
Jul 31 #Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 #Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 #Javascript
You might like
PHP系统命令函数使用分析
2013/07/05 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue中监听返回键问题
2019/08/28 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python重新加载模块的实现方法
2018/10/16 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
django主动抛出403异常的方法详解
2019/01/04 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
娱乐地球:Entertainment Earth
2020/01/08 全球购物
刊首寄语大全
2014/04/11 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014年工程工作总结
2014/11/25 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
追悼会答谢词
2015/01/05 职场文书
党小组考察意见
2015/06/02 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Python Django模型详解
2021/10/05 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android
python如何为list实现find方法
2022/05/30 Python