首頁 > 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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板