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

作者:异步漫步

时间:2026-10-25

浏览:460

本文探讨在JavaScript中将拥有数字索引的对象转换为数组的方法。通过示例展示直接使用Array.prototype.slice.call()在部分浏览器中失败的原因,指出关键在于对象需具备length属性。修改后成功转换,并指出IE环境下对HtmlCollection等特殊对象的兼容性问题。

文章目录

对象数字属性与转换尝试

尽管这种情况较少见,但我们确实可以为对象定义以数字作为属性名的属性。


具体实现代码如下:

 
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));

slice方法失败原因分析

这段代码在Internet Explorer浏览器中会直接抛出错误,而在Firefox浏览器中虽然未报错,但输出结果为空,表明转换操作失败。对于此类内置方法的问题,建议查阅相关规范文档。

ECMA-262

根据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属性成功转换

这里提到了参数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环境下的兼容性问题

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章