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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 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中文件上传的一个问题
2010/09/04 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
JS轮播图的实现方法
2020/08/24 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python flask 多对多表查询功能
2017/06/25 Python
深入浅出学习python装饰器
2017/09/29 Python
python实现媒体播放器功能
2018/02/11 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python用700行代码实现http客户端
2021/01/14 Python
医院实习介绍信
2014/01/12 职场文书
毕业论文评语大全
2014/04/29 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
维稳承诺书
2015/01/20 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL