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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
vue里input根据value改变背景色的实例
Sep 29 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
js获取url传值的方法
2015/12/18 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
angular动态表单制作
2018/02/23 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
微信小程序实现发红包功能
2018/07/11 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Python抓取京东图书评论数据
2014/08/31 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python基本语法练习实例
2017/09/19 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
打架检讨书50字
2014/01/11 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
个人作风建设自查报告
2014/10/22 职场文书
财务会计实训报告
2014/11/05 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2015小学师德工作总结
2015/07/21 职场文书