将HTMLCollection/NodeList/伪数组转换成数组的实现方法
更新时间：2011年06月20日 23:50:42 作者：
将HTMLCollection/NodeList/伪数组转换成数组的实现方法，需要的朋友可以参考下。
这里把符合以下条件的对象称为伪数组
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);
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);
相关文章
访问JSon元素的方法有很多，在搜的时候会找到很多，本文使用javascript来动态访问json元素，感兴趣的朋友可以练练手哦2013-08-08
javascript 操作符（~、&、|、^、<<、>>）使用案例
这篇文章主要介绍了javascript 操作符（~、&、|、^、<<、>>）使用案例,非常的全面，需要的朋友可以参考下2014-12-12
这篇文章主要介绍了微信小程序 scroll-view 水平滚动实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10![js为什么[]==![]是成立的吗](//img.jbzj.com/images/xgimg/bcimg3.png)
本文主要介绍了js为什么[]==![]是成立的吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
下面小编就为大家带来一篇js图片放大镜实例讲解(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
Javascript也是面向对象的语言，但它是一种基于原型Prototype的语言，而不是基于类的语言。接下来通过本文给大家介绍Javascript中的Prototype到底是啥的相关知识，感兴趣的朋友参考下2016-02-02
这篇文章主要为大家详细介绍了JS canvas绘制五子棋棋盘的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要给大家介绍了关于Three.js实现浏览器变动时进行自适应的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-09-09
用js实现输入提示(自动完成)的实例代码，需要的朋友可以参考一下2013-06-06
这篇文章介绍了Javascript脚本实现静态网页加密实例代码，有需要的朋友可以参考一下2013-11-11
![js为什么[]==![]是成立的吗](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论