javascript中l(wèi)ength屬性的探索
更新時間：2011年07月31日 21:32:39 作者：
本文中，我將會通過類數(shù)組對象（array like object），探索javascript中的length屬性的一些秘密。
例子1：
var obj={0:'a',1:'b'}
alert(obj.length); //undefined
var arr=['a','b']
alert(arr.length); // 2
從上面的例子看，類數(shù)組對象中的length屬性并不和它儲存的數(shù)據(jù)數(shù)量直接掛鉤，無論是索引屬性（0，1）還是length屬性都作為對象的普通屬性存在，它們之間并沒有任何關系，js引擎并不會根據(jù)儲存數(shù)據(jù)的數(shù)量來自動計算類數(shù)組對象的長度。
但是類數(shù)組對象的length所確實和存儲的數(shù)據(jù)量沒有任何關系么？例子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以下版本，在通過強制使用數(shù)組方法為類數(shù)組對象添加元素時，對象的length屬性也會被計算。而IE8以下版本貌似不支持強制使用數(shù)組方法為類數(shù)組對象添加元素。
例子3：
該例子在例子2的myarr構造函數(shù)中添加一個初始化操作，在類數(shù)組對象初始化時添加一個元素，怪異的事情發(fā)生了：
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以下版本瀏覽器繼續(xù)貌似不支持強制使用數(shù)組方法，這個再下一個例子中會作討論。而對于其他瀏覽器，length屬性輸出為3，而索引為2的元素是'xiaoc‘，顯然js引擎完全忽略了類數(shù)組對象原來所存在的索引為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‘
奇怪的事再次發(fā)生，這次所有瀏覽器（包括ie6 7）都正確輸出4，索引為2的元素正確輸出為'lai‘，可見IE 6 7添加了length屬性的初始化之后，可以正常使用數(shù)組方法了。
現(xiàn)在再試試把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設置為能轉換為數(shù)字的不合法類型
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//輸出4
alert(m[2]);//輸出'lai‘
從上面的所有例子來看，我們可以作出一個推斷，在使用數(shù)組方法時（這里以push為例），大概是這樣的流程：
IE6 7：
可見IE6 7并非不支強制持使用數(shù)組方法添加元素，但是會先判斷l(xiāng)ength屬性是否存在，如果不存在，則返回，不做任何操作。如果length屬性為不合法值，則嘗試轉換為number類型，如果轉換失敗則length設置為0，這就可以解析例子2,3里輸出的undefined和例子4的正確輸出。
其他瀏覽器：
其他瀏覽器會根據(jù)length屬性作不同操作，如果length屬性不存在，則設置length為0，如果length屬性為不合法值，則嘗試轉換為number類型，如果轉換失敗則也length設置為0。
正因為length屬性對于數(shù)組方法有如此決定性的作用，因此js引擎禁止了對length屬性寫入不合法值：
var arr=['1','2','3'];
arr.length='undefined';//報錯invalid array length
從上面的例子中，我們可以得出一個結論：當我們使用類數(shù)組對象時，為了避各種length計算不正確引起的怪異問題，我們應該在初始化類數(shù)組對象時初始化length屬性的值，如果在初始化時添加了元素但卻沒有設置length屬性的值，在使用數(shù)組方法時，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‘
當使用原型繼承數(shù)組時，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下對象原型繼承數(shù)組時length屬性會一直為0，因此如果類數(shù)組對象需要使用數(shù)組的方法，不要去繼承數(shù)組，而應該使用Array.prototype.xxx.apply(obj,[]);的方法，并且記得正確初始化length屬性的值。
復制代碼 代碼如下:
var obj={0:'a',1:'b'}
alert(obj.length); //undefined
var arr=['a','b']
alert(arr.length); // 2
從上面的例子看，類數(shù)組對象中的length屬性并不和它儲存的數(shù)據(jù)數(shù)量直接掛鉤，無論是索引屬性（0，1）還是length屬性都作為對象的普通屬性存在，它們之間并沒有任何關系，js引擎并不會根據(jù)儲存數(shù)據(jù)的數(shù)量來自動計算類數(shù)組對象的長度。
但是類數(shù)組對象的length所確實和存儲的數(shù)據(jù)量沒有任何關系么？例子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以下版本，在通過強制使用數(shù)組方法為類數(shù)組對象添加元素時，對象的length屬性也會被計算。而IE8以下版本貌似不支持強制使用數(shù)組方法為類數(shù)組對象添加元素。
例子3：
該例子在例子2的myarr構造函數(shù)中添加一個初始化操作，在類數(shù)組對象初始化時添加一個元素，怪異的事情發(fā)生了：
復制代碼 代碼如下:
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以下版本瀏覽器繼續(xù)貌似不支持強制使用數(shù)組方法，這個再下一個例子中會作討論。而對于其他瀏覽器，length屬性輸出為3，而索引為2的元素是'xiaoc‘，顯然js引擎完全忽略了類數(shù)組對象原來所存在的索引為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‘
奇怪的事再次發(fā)生，這次所有瀏覽器（包括ie6 7）都正確輸出4，索引為2的元素正確輸出為'lai‘，可見IE 6 7添加了length屬性的初始化之后，可以正常使用數(shù)組方法了。
現(xiàn)在再試試把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設置為能轉換為數(shù)字的不合法類型
Array.prototype.push.apply(m,['cson','lai','xiaoc']);
alert(m.length);//輸出4
alert(m[2]);//輸出'lai‘
從上面的所有例子來看，我們可以作出一個推斷，在使用數(shù)組方法時（這里以push為例），大概是這樣的流程：
IE6 7：
可見IE6 7并非不支強制持使用數(shù)組方法添加元素，但是會先判斷l(xiāng)ength屬性是否存在，如果不存在，則返回，不做任何操作。如果length屬性為不合法值，則嘗試轉換為number類型，如果轉換失敗則length設置為0，這就可以解析例子2,3里輸出的undefined和例子4的正確輸出。
其他瀏覽器：
其他瀏覽器會根據(jù)length屬性作不同操作，如果length屬性不存在，則設置length為0，如果length屬性為不合法值，則嘗試轉換為number類型，如果轉換失敗則也length設置為0。
正因為length屬性對于數(shù)組方法有如此決定性的作用，因此js引擎禁止了對length屬性寫入不合法值：
復制代碼 代碼如下:
var arr=['1','2','3'];
arr.length='undefined';//報錯invalid array length
從上面的例子中，我們可以得出一個結論：當我們使用類數(shù)組對象時，為了避各種length計算不正確引起的怪異問題，我們應該在初始化類數(shù)組對象時初始化length屬性的值，如果在初始化時添加了元素但卻沒有設置length屬性的值，在使用數(shù)組方法時，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‘
當使用原型繼承數(shù)組時，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下對象原型繼承數(shù)組時length屬性會一直為0，因此如果類數(shù)組對象需要使用數(shù)組的方法，不要去繼承數(shù)組，而應該使用Array.prototype.xxx.apply(obj,[]);的方法，并且記得正確初始化length屬性的值。
您可能感興趣的文章:
- Js數(shù)組的操作push,pop,shift,unshift等方法詳細介紹
- JavaScript使用pop方法移除數(shù)組最后一個元素用法實例
- JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實例
- JS數(shù)組方法push()、pop()用法實例分析
- JS Array.slice 截取數(shù)組的實現(xiàn)方法
- JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較
- JS數(shù)組操作(數(shù)組增加、刪除、翻轉、轉字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)
- javascript中不易分清的slice,splice和split三個函數(shù)
- JavaScript中l(wèi)ength屬性的使用方法
- JavaScript 中獲取數(shù)組最后一個元素方法匯總
相關文章
這篇文章主要介紹了js中substring和substr的定義和用法,需要的朋友可以參考下2014-05-05
這篇文章主要為大家介紹了MySQL SUM Function函數(shù)使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
JavaScript中call和apply方法的區(qū)別實例分析
這篇文章主要介紹了JavaScript中call和apply方法的區(qū)別,結合實例形式分析call和apply方法的功能、原理及相關使用操作區(qū)別,需要的朋友可以參考下2018-08-08
這篇文章主要給大家介紹了利用JS實現(xiàn)復制指定對應id的內容到粘貼板（Ctrl+C效果）,文中給出了詳細的介紹和示例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
這篇文章主要介紹了JS提交form表單的方法,結合實例形式簡單分析了頁面加載時提交表單及通過鏈接提交表單的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
本篇文章主要是對js 判斷控件獲得焦點的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
下面小編就為大家?guī)硪黄獪\談js中字符和數(shù)組一些基本算法題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Javascript中的call()方法介紹,本文講解了Call() 語法、Call() 參數(shù)、Javascript中的call()方法、Call()方法的實例等內容,需要的朋友可以參考下2015-03-03
bootstrap treeview 樹形菜單帶復選框及級聯(lián)選擇功能
這篇文章主要介紹了bootstrap treeview 樹形菜單帶復選框及級聯(lián)選擇功能,代碼超簡單，感興趣的朋友跟隨腳本之家小編一起學習吧2018-06-06