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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
js几个验证函数代码
Mar 25 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
javascript测试题练习代码
Oct 10 Javascript
JS定时器实例
Apr 17 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
uni-app之APP和小程序微信授权方法
May 09 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php命令行用法入门实例教程
2014/10/27 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
js控制框架刷新
2008/08/01 Javascript
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
python实现多线程抓取知乎用户
2016/12/12 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python3实现微型的web服务器
2019/09/03 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
银行实习生的自我评价
2014/01/13 职场文书
安全承诺书范文
2014/03/26 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python