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 相关文章推荐
js里怎么取select标签里的值并修改
Dec 10 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
node+express制作爬虫教程
Nov 11 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP多线程类及用法实例
2014/12/03 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
查看django版本的方法分享
2018/05/14 Python
详解Python3中ceil()函数用法
2019/02/19 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python中必要的名词解释
2019/11/20 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
教师工作能力自我评价
2015/03/04 职场文书
第一书记观后感
2015/06/08 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
PHP命令行与定时任务
2021/04/01 PHP