js中将具有数字属性名的对象转换为数组


Posted in Javascript onMarch 06, 2011

虽然不太常用,但我们的确可以给对象添加以数字为属性名的属性:

var obj = {}; 
obj[0] = 1; 
obj[1] = 2;

这个对象并不是数组类型,那有没有办法把它转换为数组类型呢?jQuery代码中采用了Array.prototype.slice把这种对象转换为数组,但我试了好几遍,就是不行:
var obj = {}; 
obj[0] = 1; 
obj[1] = 2; 
alert(Array.prototype.slice.call(obj));

上面这段代码在IE下直接报错,在Firefox下虽然没有报错,输出内容却是空。也就说,转换失败了。这种内置方法的问题最好还是查查ECMA-262,slice方法的执行流程的前两步如下:
1. Let A be a new array created as if by the expression new Array(). 
2. Call the [[Get]] method of this object with argument "length".

这里提到了参数length。obj对象虽然有数字索引,但是却没有length属性。其实问题就在这:slice方法不知道这个对象的长度。简单修改一下代码,添加length属性:
var obj = {}; 
obj[0] = 1; 
obj[1] = 2; 
obj.length = 2; 
alert(Array.prototype.slice.call(obj));

输出内容是"1,2",复制成功。那是不是说明,只要调用slice方法的this有数字索引和length属性,就可以转换为数组呢?。

这个定律在大部分浏览器下成立。然而,在IE环境下,对于HtmlCollection这样的DOM元素集合,即使具有上述特征,它在调用slice的时候也会报错。

Javascript 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 #Javascript
淘宝搜索框效果实现分析
Mar 05 #Javascript
再论Javascript下字符串连接的性能
Mar 05 #Javascript
再论Javascript的类继承
Mar 05 #Javascript
Array的push与unshift方法性能比较分析
Mar 05 #Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 #Javascript
判断用户是否在线的代码
Mar 05 #Javascript
You might like
php实现粘贴截图并完成上传功能
2015/05/17 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
实例讲解Python中函数的调用与定义
2016/03/14 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
使用python3实现操作串口详解
2019/01/01 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
python中yield的用法详解
2021/01/13 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
运动会开幕式解说词
2014/02/05 职场文书
2014年清明节寄语
2014/04/03 职场文书
党课培训心得体会
2014/09/02 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
水电工岗位职责
2015/02/14 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
刑事附带民事代理词
2015/05/25 职场文书
初中团委工作总结
2015/08/13 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python