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 过滤not()与filter()实例代码
May 10 Javascript
javascript动画浅析
Aug 30 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
php获取字段名示例分享
2014/03/03 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
Python探索之修改Python搜索路径
2017/10/25 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
设计师个人求职信范文
2014/02/02 职场文书
运动会领导邀请函
2014/02/05 职场文书
合作意向协议书范本
2014/03/31 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
大学迎新生标语
2014/10/06 职场文书