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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
优化javascript的执行速度
Jan 23 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
对象无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显示MySQL数据的三种方法
2008/06/05 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
为什么需要版本控制
2016/10/28 面试题
便利店的创业计划书
2014/01/15 职场文书
任命书格式模板
2015/09/22 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript
python​格式化字符串
2022/04/20 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技
MySQL深分页问题解决思路
2022/12/24 MySQL