細說 Javascript 數(shù)組篇（一） : 數(shù)組的遍歷和 length 屬性

TigerChain 發(fā)布于2019-08-21 12:17 / 3133人閱讀

摘要：遍歷為了達到最佳性能來遍歷一個數(shù)組，最好的方式就是使用經(jīng)典的循環(huán)。盡管屬性是定義在數(shù)組本身的，但是在循環(huán)的每一次遍歷時仍然會有開銷。給屬性賦值一個更小的數(shù)將會截斷數(shù)組，如果賦值一個更大的數(shù)則不會截斷數(shù)組。

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

遍歷

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

var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);
}

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

length 屬性

盡管 length 屬性僅僅通過 getter 方法返回數(shù)組中元素的個數(shù)，但是可以通過 setter 方法來截斷數(shù)組。

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 屬性賦值一個更小的數(shù)將會截斷數(shù)組，如果賦值一個更大的數(shù)則不會截斷數(shù)組。

總結

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

參考

http://bonsaiden.github.io/JavaScript-Garden/#array.general

云服務器 GPU云服務器 javascript中的二維數(shù)組數(shù)組遍歷遍歷數(shù)組遍歷篩選數(shù)組

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87538.html

細說 Javascript 對象篇（四） : for in 循環(huán)

摘要：第二是，由于會遍歷整個原型鏈，所以當原型鏈過長時，會對性能造成影響。總結建議養(yǎng)成過濾屬性的好習慣，不要對運行環(huán)境做任何假設，也無論原生的原型對象是否被擴展。如同 in 運算符一樣，使用 for in 循環(huán)遍歷對象屬性時，也將往上遍歷整個原型鏈。 // Poisoning Object.prototype Object.prototype.bar = 1; var foo = {m...

Kross 2019-08-19 14:39 評論0 收藏0
細說 Javascript 函數(shù)篇（四） : ?arguments 對象

因為最近有博友反饋我的博文是直接翻譯的參考鏈接內(nèi)的內(nèi)容，所以我在這里要說明一下，以免引起不必要的誤會。首先，我很喜歡 segmentfault 的交流和學習的氛圍，所以我很愿意在這里跟各位 SFer 交流學習心得，相互學習，共同進步。第二，我做技術方面的工作不久，所以學習經(jīng)歷也不是很長，但是我發(fā)現(xiàn)寫博客，總結自己的學習心得是個很好的學習習慣，至少對于我個人而言，我于此收益頗豐，所以我決定堅持一...

aristark 2019-08-21 12:15 評論0 收藏0
細說 Javascript 數(shù)組篇（二） : 數(shù)組的構造函數(shù)和常見操作

摘要：數(shù)組的構造函數(shù)由于數(shù)組的構造函數(shù)在處理參數(shù)時的不確定性，因此強烈建議使用符號來創(chuàng)建一個新數(shù)組。總結綜上所述，我們應該盡量使用來創(chuàng)建新函數(shù)，而不是數(shù)組的構造函數(shù)，這樣代碼將有更好的可讀性。數(shù)組的構造函數(shù) 由于數(shù)組的構造函數(shù)在處理參數(shù)時的不確定性，因此強烈建議使用 [] 符號來創(chuàng)建一個新數(shù)組。 [1, 2, 3]; // Result: [1, 2, 3] new Array(1, ...

kaka 2019-08-19 14:45 評論0 收藏0
細說數(shù)組常用遍歷的方法

摘要：需要返回值，如果不給，默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

阿羅 2019-08-29 17:05 評論0 收藏0
細說數(shù)組常用遍歷的方法

摘要：需要返回值，如果不給，默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

AlphaWatch 2019-08-02 11:48 評論0 收藏0