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 相关文章推荐
javascript的alert box在java中如何显示多行
May 18 Javascript
js网页右下角提示框实例
Oct 14 Javascript
AngularJS基础知识
Dec 21 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
weex slider实现滑动底部导航功能
Aug 28 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
js this 绑定机制深入详解
Apr 30 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 程序员也要学会使用“异常”
2009/06/16 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
用python写asp详细讲解
2013/12/16 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
给领导的检讨书
2014/02/16 职场文书
保密工作责任书
2014/04/16 职场文书
工作鉴定评语
2014/05/04 职场文书
求职信范文大全
2014/05/26 职场文书
办公室岗位职责范本
2015/04/11 职场文书
初中思品教学反思
2016/02/20 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis