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 相关文章推荐
ScrollDown的基本操作示例
Jun 09 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
Vue实现多标签选择器
Nov 28 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP 读取和编写 XML
2014/11/19 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python3.6数独问题的解决
2019/01/21 Python
windows下python安装pip方法详解
2020/02/10 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
教师自我评价范文
2013/12/16 职场文书
车间副主任岗位职责
2013/12/24 职场文书
学期自我评价
2014/01/27 职场文书
护士岗位职责
2014/02/16 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers