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中typeof的用途介绍
Apr 11 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
Protoss热键控制
2020/03/14 星际争霸
php教程之phpize使用方法
2014/02/12 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
php中上传文件的的解决方案
2018/09/25 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python迭代器实例简析
2014/09/25 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
彻底理解Python中的yield关键字
2019/04/01 Python
selenium+python环境配置教程详解
2019/05/28 Python
python系列 文件操作的代码
2019/10/06 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
python如何进行矩阵运算
2020/06/05 Python
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
辞职信如何写
2015/02/27 职场文书
志愿者工作心得体会
2016/01/15 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers