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 相关文章推荐
js获取字符串字节数方法小结
Jun 09 Javascript
JS如何判断json是否为空
Jul 06 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
用户的详细注册和判断
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
javascript里的条件判断
2007/02/27 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
简单的分页代码js实现
2016/05/17 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python实现ip查询示例
2014/03/26 Python
Python中使用SAX解析xml实例
2014/11/21 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python面向对象特殊成员
2017/04/24 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
迟到检讨书400字
2014/01/13 职场文书
网络管理员岗位职责
2015/02/12 职场文书
2015年库房工作总结
2015/04/30 职场文书
珍爱生命主题班会
2015/08/13 职场文书
图解上海144收音机
2021/04/22 无线电
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS