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 Prototype 对象扩展
May 15 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
js实现省级联动(数据结构优化)
Jul 17 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 ADODB使用方法集锦
2008/03/25 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php日历制作代码分享
2014/01/20 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
对Python3使运行暂停的方法详解
2019/02/18 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
九年级政治教学反思
2014/02/06 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
自主招生自荐信范文
2015/03/04 职场文书
工程进度款催款函
2015/06/24 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript