将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 相关文章推荐
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
jQuery取id有.的值的方法
May 21 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
JavaScript 语句之常用 for 循环详解
Mar 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
PHP学习之PHP表达式
2006/10/09 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
基于Python实现文件大小输出
2016/01/11 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
通过python检测字符串的字母
2020/02/18 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python关于倒排列的知识点总结
2020/10/13 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
材料采购员岗位职责
2013/12/17 职场文书
公司门卫岗位职责
2014/03/15 职场文书
护理学专业求职信
2014/06/29 职场文书
关于旅游的活动方案
2014/08/15 职场文书
付款委托书范本
2014/10/05 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript