首页 > web前端 > js教程 > 正文

jquery中length属性的使用方法详解

伊谢尔伦
发布: 2017-06-17 13:16:28
原创
3151 人浏览过

本文中,将会通过类数组对象(array like object),探索javascript中的length属性的一些秘密。

例子1: 

var obj={0:'a',1:'b'} 
alert(obj.length); //undefined 
var arr=['a','b'] 
alert(arr.length); // 2
登录后复制

从上面的例子看,类数组对象中的length属性并不和它储存的数据数量直接挂钩,无论是索引属性(0,1)还是length属性都作为对象的普通属性存在,它们之间并没有任何关系,js引擎并不会根据储存数据的数量来自动计算类数组对象的长度。
但是类数组对象的length所确实和存储的数据量没有任何关系么?例子2说明并非如此:
例子2:

function myarr(){} 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//IE8以下:undefined 其他浏览器:3 
alert(m[2]);//IE8以下:undefined 其他浏览器:‘xiaoc'
登录后复制

从例子2可以看到,除了IE8以下版本,在通过强制使用数组方法为类数组对象添加元素时,对象的length属性也会被计算。而IE8以下版本貌似不支持强制使用数组方法为类数组对象添加元素。
例子3:
该例子在例子2的myarr构造函数中添加一个初始化操作,在类数组对象初始化时添加一个元素,怪异的事情发生了:

function myarr(){this[0]='cc';} 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//ie8以下:undefined 其他:3 
alert(m[2]);//ie8以下:undefined 其他:xiaoc
登录后复制

ie8以下版本浏览器继续貌似不支持强制使用数组方法,这个再下一个例子中会作讨论。而对于其他浏览器,length属性输出为3,而索引为2的元素是'xiaoc‘,显然js引擎完全忽略了类数组对象原来所存在的索引为0的元素‘cc'!马上我们再看下一个例子,这个例子在例子3的基础上多加一个对length属性的初始化:

function myarr(){this[0]='cc'; this.length=1;}//多加一个length的初始化 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//输出4 
alert(m[2]);//输出'lai‘
登录后复制

奇怪的事再次发生,这次所有浏览器(包括ie6 7)都正确输出4,索引为2的元素正确输出为'lai‘,可见IE 6 7添加了length属性的初始化之后,可以正常使用数组方法了。
现在再试试把length属性初始化为不合法类型:
例子4:

function myarr(){this[0]='cc'; this.length="bo";}//length设置为不能转换为number的不合法类型 
var m=new myarr(); 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//输出 3 
alert(m[2]);// 输出'xiaoc‘
登录后复制
function myarr(){this[0]='cc'; this.length="1";}//length设置为能转换为数字的不合法类型 
Array.prototype.push.apply(m,['cson','lai','xiaoc']); 
alert(m.length);//输出4 
alert(m[2]);//输出'lai‘
登录后复制

从上面的所有例子来看,我们可以作出一个推断,在使用数组方法时(这里以push为例),大概是这样的流程:
IE6 7:
可见IE6 7并非不支强制持使用数组方法添加元素,但是会先判断length属性是否存在,如果不存在,则返回,不做任何操作。如果length属性为不合法值,则尝试转换为number类型,如果转换失败则length设置为0,这就可以解析例子2,3里输出的undefined和例子4的正确输出。

其他浏览器:
其他浏览器会根据length属性作不同操作,如果length属性不存在,则设置length为0,如果length属性为不合法值,则尝试转换为number类型,如果转换失败则也length设置为0。

正因为length属性对于数组方法有如此决定性的作用,因此js引擎禁止了对length属性写入不合法值:

var arr=['1','2','3']; 
arr.length='undefined';//报错invalid array length
登录后复制

从上面的例子中,我们可以得出一个结论:当我们使用类数组对象时,为了避各种length计算不正确引起的怪异问题,我们应该在初始化类数组对象时初始化length属性的值,如果在初始化时添加了元素但却没有设置length属性的值,在使用数组方法时,IE6 7会忽略所有操作,其他浏览器则会忽略初始化时添加的元素。

另外再介绍length属性带来的另一个问题:
请看例子5:

function myarr(){} 
myarr.prototype=new Array(); 
var m=new myarr(); 
m.push('cson','lai','xiaoc'); 
alert(m.length);//IE6 7:0 其他:3 
alert(m[2]);//所有浏览器:'xiaoc‘
登录后复制

当使用原型继承数组时,IE 6 7下length会始终为0,无论你有多少个元素,其他浏览器则正常。
即使强制设置length属性,IE6 7 下死活为0:

function myarr(){} 
myarr.prototype=new Array(); 
var m=new myarr(); 
m.length=10; 
alert(m.length);//IE6 7:0 其他:10
登录后复制

因此得出结论:IE6 7下对象原型继承数组时length属性会一直为0,因此如果类数组对象需要使用数组的方法,不要去继承数组,而应该使用Array.prototype.xxx.apply(obj,[]);的方法,并且记得正确初始化length属性的值。

获取Object对象的length

  所有JS程序猿(甚至不止JS)都知道,数组(Array)是有length的,通过length属性,可以很方便的获取数组的长度。可以说,只要使用到了数组,就必会使用到其length属性。

  而Object对象是没有length属性或方法的,它确实没有存在的必要,因为人们只会在乎该对象能提供什么样的方法,而没有必要知道它到底有多少方法。的确,这确实不是一个普遍性的需求,

因此ECMAScript中也不会为自己增加额外的负担。

  之前一直没有考虑过这个问题,我们通过CGI获取数据,对于一条一条的数据,后台将其做成数组并以json返回。如下所示:

 try{callback({   
 data:[{a:1},{a:2}]    
 }); 
}catch(e){}
登录后复制

 这是非常合理的,因为我在前端可以用length得到数据的长度,并逐条将其插入表格,或者是通过其他的方式表现出来。但是你永远也不能用一成不变的思维方式来解决所有问题。

  某天写后台接口的同事决定换一种数据格式,改用object来表示数据,并为每个数据添加一个索引,如下所示:

try{callback({     
data:{1:{a:1},2:{a:2}}    
 });  
}catch(e){}
登录后复制

面对这样的数据,我就犯愁了,因为object不能获取对象长度。当然我可以叫后台同事改一下接口返回的格式,但是既然他可以写出以这样格式返回的代码,那其他的后台同事也同样

可以写出。为了不影响到更多的人,就需要我在前端来做处理了。其实要获取对象的长度也不难,用for in 语句就能实现,如下代码所示:

var a = {a:1,b:2,c:3,d:4};
function length(o) {
    var count = 0;
    for(var i in o){
        count ++;
    }
    return count;
};
alert(length(a));    //5
登录后复制

至于为什么是5而不是4那是因为每个对象都有一个内部属性(proto指向原型)。

  为了更方便的使用这个方法,可以把它写到Object原型里面去,如下代码所示:

var a = {a:1,b:2,c:3,d:4};
Object.prototype.length = function() {
    var count = 0;
    for(var i in this){
        count ++;
    }
    return count;
};
alert(a.length());    //5
登录后复制

  这样用起来会更直观,跟接近Array的使用习惯。

以上是jquery中length属性的使用方法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板