将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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
JS实现图片切换效果
2018/11/17 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python 异常处理实例详解
2014/03/12 Python
进一步理解Python中的函数编程
2015/04/13 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
运动会稿件50字
2014/02/17 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
博士生专家推荐信
2014/09/26 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
MySQL读取JSON转换的方式
2022/03/18 MySQL