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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
js实现索引图片切换效果
Nov 21 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
详解React中的组件通信问题
Jul 31 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
javascript实现电商放大镜效果
Nov 23 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
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
PHP查询分页的实现代码
2017/06/09 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
express 项目分层实践详解
2018/12/10 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
django 实现简单的插入视频
2020/04/07 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
小学中秋节活动方案
2014/02/06 职场文书
爱心捐款倡议书
2014/04/14 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
python计算列表元素与乘积详情
2022/08/05 Python