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 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
canvas实现图像截取功能
Feb 06 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
浅析JavaScript 函数柯里化
Sep 08 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的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
alert中断settimeout计时功能
2013/07/26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
酒店公关部经理岗位职责
2013/11/24 职场文书
学习心得体会
2014/01/01 职场文书
大学生如何写自荐信
2014/01/08 职场文书
社区消防工作实施方案
2014/03/21 职场文书
《包身工》教学反思
2016/02/23 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript