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 写类方式之四
Jul 05 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
JavaScript声明变量和数据类型的转换
Apr 12 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
检测png图片是否完整的php代码
2010/09/06 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
python对url格式解析的方法
2015/05/13 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
python实现五子棋人机对战游戏
2020/03/25 Python
浅析python中的del用法
2020/09/02 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
项目总经理岗位职责
2014/02/14 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
后勤个人工作总结
2015/02/28 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书