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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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生成Flash动画的实现代码
2010/03/12 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
python表格存取的方法
2018/03/07 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
解析python的局部变量和全局变量
2019/08/15 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
银行批评与自我批评
2014/02/10 职场文书
读书小明星事迹材料
2014/05/03 职场文书
安全生产计划书
2014/05/04 职场文书
文明城市标语
2014/06/16 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
浅谈Python数学建模之固定费用问题
2021/06/23 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫