快捷導(dǎo)航

Javascript學(xué)習(xí)筆記之?dāng)?shù)組的遍歷和 length 屬性

更新時(shí)間：2014年11月23日 15:07:19 投稿：hebedich

我們一般用循環(huán)來(lái)遍歷數(shù)組，而循環(huán)一直是 JavaScript 性能問(wèn)題的常見(jiàn)來(lái)源，有時(shí)循環(huán)用得不好會(huì)嚴(yán)重降低代碼的運(yùn)行速度。數(shù)組的屬性可以分為三種:length屬性,索引屬性,其他屬性.和普通對(duì)象相比,數(shù)組對(duì)象特殊的地方就是它的length屬性和索引屬性。

盡管數(shù)組在 Javascript 中是對(duì)象，但是不建議使用 for in 循環(huán)來(lái)遍歷數(shù)組，實(shí)際上，有很多理由來(lái)阻止我們對(duì)數(shù)組使用 for in 循環(huán)。
因?yàn)?for in 循環(huán)將會(huì)枚舉原型鏈上的所有屬性，并且唯一阻止的方法是使用 hasOwnProperty 來(lái)判斷，這將比普通的 for 循環(huán)要慢不少。

遍歷

為了達(dá)到最佳性能來(lái)遍歷一個(gè)數(shù)組，最好的方式就是使用經(jīng)典的 for 循環(huán)。

復(fù)制代碼代碼如下:

var list = [1, 2, 3, 4, 5, ...... 100000000];

for(var i = 0, l = list.length; i < l; i++) {

    console.log(list[i]);

}

這兒有一個(gè)額外的技巧，就是通過(guò) l = list.length 來(lái)緩存數(shù)組的長(zhǎng)度。
盡管屬性 length 是定義在數(shù)組本身的，但是在循環(huán)的每一次遍歷時(shí)仍然會(huì)有開(kāi)銷。盡管最新的 Javascript 引擎可能已經(jīng)對(duì)這種情況作了性能上的優(yōu)化，但是你并不能保證你的 Javascript 代碼會(huì)一直在這種瀏覽器上運(yùn)行。
實(shí)際上，不緩存長(zhǎng)度的循環(huán)要比緩存長(zhǎng)度的循環(huán)性能上慢不少。

length 屬性

盡管 length 屬性僅僅通過(guò) getter 方法返回?cái)?shù)組中元素的個(gè)數(shù)，但是可以通過(guò) setter 方法來(lái)截?cái)鄶?shù)組。

復(fù)制代碼代碼如下:

var foo = [1, 2, 3, 4, 5, 6];

foo.length = 3;

foo; // [1, 2, 3]

foo.length = 6;

foo.push(4);

foo; // [1, 2, 3, undefined, undefined, undefined, 4]

給 length 屬性賦值一個(gè)更小的數(shù)將會(huì)截?cái)鄶?shù)組，如果賦值一個(gè)更大的數(shù)則不會(huì)截?cái)鄶?shù)組。

總結(jié)

為了性能達(dá)到最優(yōu)，建議使用 for 循環(huán)而不是使用 for in 循環(huán)，同時(shí)緩存 length 屬性。

還有數(shù)組對(duì)象是沒(méi)有任何方法的，只有一個(gè)唯一的屬性length。字符串對(duì)象是有l(wèi)ength方法的~~

您可能感興趣的文章: