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 相关文章推荐
js模仿hover的具体实现代码
Dec 30 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
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
星际争霸中的热键
2020/03/04 星际争霸
Laravel框架表单验证详解
2014/09/04 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
javascript 打印页面代码
2009/03/24 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Random 在 Python 中的使用方法
2018/08/09 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Form表单及django的form表单的补充
2019/07/25 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python3获取cookie常用三种方案
2020/10/05 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
小学生秋游活动方案
2014/02/23 职场文书
机电专业求职信
2014/06/14 职场文书
python flask框架快速入门
2021/05/14 Python
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android