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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
浅谈javascript回调函数
Dec 07 Javascript
laypage分页控件使用实例详解
May 19 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 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 第二节 数据类型之转换
2012/04/28 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python和C语言混合编程实例
2014/06/04 Python
python分析网页上所有超链接的方法
2015/05/08 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
小学三年级学生评语
2014/04/22 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
领导干部失职检讨书
2015/05/05 职场文书
文艺委员竞选稿
2015/11/19 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android