這篇文章給大家分享的是有關(guān)如何通過循環(huán)優(yōu)化JavaScript 程序的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
前言
對于提高 JavaScript 程序的性能這個問題，最簡單同時也是很容易被忽視的方法就是學(xué)習(xí)如何正確編寫高性能循環(huán)語句。本文將會幫你解決這個問題。
我們將看到 JavaScript 中主要的循環(huán)類型，以及如何針對它們進(jìn)行高效編碼。
現(xiàn)在開始！
循環(huán)性能
談到循環(huán)性能，爭論的焦點(diǎn)始終會集中到關(guān)于應(yīng)該使用哪種循環(huán)，哪個是速度最快、性能最好的？事實(shí)上，在 JavaScript 提供的四種循環(huán)類型中，只有一種比其他循環(huán)慢得多 —— ?for-in 循環(huán)。 對循環(huán)類型的選擇應(yīng)基于你的需求而不是性能問題。
有兩個主要因素有助于改善循環(huán)性能 —— 每次迭代完成的工作和迭代次數(shù)。
在下面的內(nèi)容中，我們將會看到通過對這兩點(diǎn)的優(yōu)化，可以對循環(huán)的整體性能產(chǎn)生積極的影響。
For 循環(huán)
在 ECMA-262（定義JavaScript的基本語法和行為的規(guī)范）第三版中，定義了四種循環(huán)類型。第一個是標(biāo)準(zhǔn)的 for 循環(huán)，它與其他類 C 語言的語法相同：
重慶分公司
重慶分公司
for (var i = 0; i < 10; i++){
//循環(huán)體
}這可能是最常用的 JavaScript 循環(huán)結(jié)構(gòu)。要了解應(yīng)該怎樣對其進(jìn)行優(yōu)化，需要先進(jìn)行一些分析。
解析
for 循環(huán)由四部分組成：初始化，預(yù)測試條件，循環(huán)體和后執(zhí)行。它的工作方式如下：首先，執(zhí)行初始化代碼（var i = 0;）。然后是預(yù)測試條件（i <10;）。如果預(yù)測試條件的計(jì)算結(jié)果為 true，則執(zhí)行循環(huán)體。之后運(yùn)行后執(zhí)行代碼（i ++）。
優(yōu)化
要優(yōu)化循環(huán)中的工作量，第一步是最小化對象成員和數(shù)組項(xiàng)查找的數(shù)量。
還可以通過反轉(zhuǎn)順序來提高循環(huán)的性能。在 JavaScript 中，反轉(zhuǎn)循環(huán)對循環(huán)的性能提升不大，除非你消除了額外的操作。
// 原始循環(huán)
for (var i = 0; i < items.length; i++){
process(items[i]);
}
// 最小化屬性查找
for (var i = 0, len = items.length; i < len; i++){
process(items[i]);
}
// 最小化屬性查找并反序
for (var i = items.length; i--; ){
process(items[i]);
}While 循環(huán)
第二種是 while 循環(huán)。下面是一個簡單的預(yù)測試循環(huán)，由預(yù)測試條件和循環(huán)體組成。
var i = 0;
while(i < 10){
//循環(huán)體
i++;
}解析
如果預(yù)測試條件的計(jì)算結(jié)果為 true，則執(zhí)行循環(huán)體。如果不是 —— 它就會被跳過。每個 while 循環(huán)都可以用 for 替換，反之亦然。
優(yōu)化
// 原始循環(huán)
var j = 0;
while (j < items.length){
process(items[j++]);
}
// 最小化屬性查找
var j = 0,
count = items.length;
while (j < count){
process(items[j++]);
}
// 最小化屬性查找和反序
var j = items.length;
while (j--){
process(items[j]);
}Do-While 循環(huán)
do-while 是第三種循環(huán)，它是 JavaScript 中唯一的后測試循環(huán)。由循環(huán)體和后測試條件組成：
var i = 0;
do {
//循環(huán)體
} while (i++ < 10);解析
在這種類型的循環(huán)中，循環(huán)體總是至少執(zhí)行一次。然后評估測試后的條件，如果它是true，則執(zhí)行另一個循環(huán)周期。
優(yōu)化
// 原始循環(huán)
var k = 0;
do {
process(items[k++]);
} while (k < items.length);
// 最小化屬性查找
var k = 0,
num = items.length;
do {
process(items[k++]);
} while (k < num);
// 最小化屬性查找和反序
var k = items.length - 1;
do {
process(items[k]);
} while (k--);For-In 循環(huán)
最后一種是 for-in 循環(huán)。它有一個非常特殊的用途 —— 枚舉 JavaScript 對象的命名屬性。 它的語法如下：
for (var prop in object){
//loop body
}解析
它的名稱與 for 循環(huán)類似。但是工作方式完全不同。而這種差異使它比另外三種循環(huán)慢得多，后者具有相同的性能特征，所以爭論哪個循環(huán)最快是沒有用的。
每次循環(huán)執(zhí)行時，變量 prop 會得到 object 的一個屬性。它將會不斷執(zhí)行，直到返回所有屬性為止。這些是對象自身的以及通過其原型鏈繼承的屬性。
注意事項(xiàng)
永遠(yuǎn)不要用“ for-in ”來迭代數(shù)組成員。
這種循環(huán)的每次迭代都會在實(shí)例或原型上進(jìn)行屬性查找，這使得 for-in 循環(huán)比其它循環(huán)要慢得多。對于相同次數(shù)的迭代，可能會比其它循環(huán)慢七倍。
結(jié)論
for ， while 和 do-while 循環(huán)都有類似的性能特征，因此沒有哪種類型比其他的更快或更慢。
避免使用 for-in 循環(huán)，除非你需要對大量未知對象屬性進(jìn)行迭代。
提高循環(huán)性能的最佳方法是減少每次迭代完成的工作量并減少循環(huán)迭代次數(shù)。
感謝各位的閱讀！關(guān)于“如何通過循環(huán)優(yōu)化JavaScript 程序”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
