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

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

复制代码 代码如下:

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的时候也会报错。

时间: 2024-10-18 11:23:15

js中将具有数字属性名的对象转换为数组_javascript技巧的相关文章

潜说js对象和数组_javascript技巧

复制代码 代码如下: /* 数组和对象 [JavaScript 权威指南 第五版] */ /* 对象: 是一个无序属性集合, 每个属性都有自己的名字和值 */ /* 创建对象简单方法, 对象直接量 */ var obj = {}; var obj = {name: 'maxthon'}; var obj = {name: {}, text: []}; /* 可使用 new 操作符 */ var a = new Array(); var d = new Date(); var r = new Re

详解JavaScript对象和数组_javascript技巧

许多高级编程语言都是面向对象的,比如C++.C#和Java等高级程序设计语言,那么一种面向对象语言有哪些基本要求呢?下面我们就通宿地说一下面向对象的一些知识. 一种面向对象语言需要向开发者提供四种基本能力:        (1)封装:把相关的信息(无论数据或方法)存储在对象中的能力        (2)聚集:把一个对象存储在另一个对象内的能力        (3)继承:由另一个类(或多个类)得来类的属性和方法的能力        (4)多态:编写能以多种方法运行的函数或方法的能力       

js中通过getElementsByName访问name集合对象的方法_javascript技巧

1.查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合. 2.这个集合可以作为数组来对待,length属性的值表示集合的个数. 3.因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

JS根据变量保存方法名并执行方法示例_javascript技巧

复制代码 代码如下: function a(){ alert("fun a()"); } function b(){ alert("fun b()"); } var methodName = ""; //method1 methodName = "a"; function method1(methodName){ //初始化this.func属性, this.func = function(){}; try{ //这里用eva

js中事件的处理与浏览器对象示例介绍_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>简单的事件处理</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta ht

DOM_window对象属性之--clipboardData对象操作代码_javascript技巧

clipboardData 对象 提供了对于预定义的剪贴板格式的访问,以便在编辑操作中使用. 成员表 方法 描述 clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式. getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据. setData 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据. 示例 下面的例子使用了 clipboardDa

使用js解决由border属性引起的div宽度问题_javascript技巧

下面我们来看一个例程 复制代码 代码如下: <script type="text/javascript"> var timer function stopMove(){ clearInterval(timer) } function startMove(){ var div=document.getElementById('ok') clearInterval(timer) timer=setInterval(function(){ ok.style.width=ok.of

js将json格式内容转换成对象的方法_javascript技巧

复制代码 代码如下: {"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"

JS写的数字拼图小游戏代码[学习参考]_javascript技巧

复制代码 代码如下: <html> <head> <title>拼图</title> <style> td.numTd{ width : 20px ; height : 20px ; } div.numDiv{ width : 100% ; height : 100% ; background-color : #000 ; color : #FFF ; text-align : center ; vertical-align : middle ;