将HTMLCollection/NodeList/伪数组转换成数组的实现方法


Posted in Javascript onJune 20, 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滑动门代码
Dec 19 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JS中的phototype详解
Feb 04 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
读jQuery之五(取DOM元素)
Jun 20 #Javascript
读jQuery之四(优雅的迭代)
Jun 20 #Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 #Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 #Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
jQuery数组处理方法汇总
Jun 20 #Javascript
jQuery UI AutoComplete 使用说明
Jun 20 #Javascript
You might like
wordpress之wp-settings.php
2007/08/17 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
经理秘书岗位职责
2013/11/14 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
护士毕业实习感言
2014/03/05 职场文书
研发工程师岗位职责
2014/04/28 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
陪护人员误工证明
2015/06/24 职场文书