将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.validate使用攻略 第一部
Jul 01 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
分享5个好用的javascript文件上传插件
Sep 16 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
读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
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Python面向对象实现方法总结
2020/08/12 Python
Python3读写ini配置文件的示例
2020/11/06 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
单位作风建设剖析材料
2014/10/11 职场文书
买卖合同协议书范本
2014/10/18 职场文书
大学生受助感言
2015/08/01 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书