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 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
纯js实现手风琴效果
Apr 17 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
对象无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
ftp类(example.php)
2006/10/09 PHP
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
babel基本使用详解
2017/02/17 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
详解Python3.6的py文件打包生成exe
2018/07/13 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
教师评优事迹材料
2014/01/10 职场文书
党员活动日总结
2014/05/05 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
支教个人总结
2015/03/04 职场文书
教师见习总结范文
2015/06/23 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
安全生产感想
2015/08/07 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技