資訊專欄INFORMATION COLUMN
摘要：遞歸函數(shù)還會(huì)受到瀏覽器調(diào)用棧的大小的限制。雖然迭代也會(huì)導(dǎo)致性能問(wèn)題，但是使用優(yōu)化的循環(huán)就可以代替長(zhǎng)時(shí)間運(yùn)行的遞歸函數(shù)，可以提高新能，因?yàn)檫\(yùn)行一個(gè)循環(huán)比反復(fù)調(diào)用一個(gè)函數(shù)的開銷要小。
本文章記錄本人在深入學(xué)習(xí)js循環(huán)中看書理解到的一些東西，加深記憶和并且整理記錄下來(lái)，方便之后的復(fù)習(xí)。
選擇正確的循環(huán)體在大部分編程語(yǔ)言中，代碼執(zhí)行的時(shí)間多數(shù)消耗在循環(huán)的執(zhí)行上。
js定義了4種類型的循環(huán)：for, while, do while, for in。
for循環(huán)是最常用的循環(huán)結(jié)構(gòu)，它由四個(gè)部分組成：
初始化體
前測(cè)條件
后執(zhí)行條件
循環(huán)體。
當(dāng)遇到一個(gè)for循環(huán)的時(shí)候，初始化體首先執(zhí)行，然后進(jìn)入前測(cè)條件。如果前測(cè)條件的計(jì)算為true，就會(huì)執(zhí)行循環(huán)體，然后運(yùn)行后執(zhí)行條件。
Javascriptfor (var i = 0; i < 10; i++) {
// 循環(huán)體
};
while循環(huán)是一個(gè)簡(jiǎn)單的前測(cè)循環(huán)，由一個(gè)前測(cè)條件和一個(gè)循環(huán)體構(gòu)成。在執(zhí)行循環(huán)體之前，先對(duì)前測(cè)條件進(jìn)行計(jì)算。如果為true就執(zhí)行循環(huán)體。否則就會(huì)跳過(guò)循環(huán)體。
Javascriptvar i = 1;
while (i < 10) {
// 循環(huán)體
i ++;
};
do while循環(huán)是js中唯一的一種后測(cè)試的循環(huán)，它包括兩個(gè)部分：循環(huán)體和后側(cè)條件。記住：在一個(gè)do while循環(huán)中，循環(huán)體至少會(huì)運(yùn)行一次，后測(cè)條件決定循環(huán)體是否再次運(yùn)行。
Javascriptvar i = 1;
do {
// 循環(huán)體
} while (i++ < 10)
for in循環(huán)有一個(gè)非常特殊的用途：可以枚舉任何對(duì)象的命名函數(shù)屬性。
Javascriptfor (var attr in object) {
// 循環(huán)體
};
每一次循環(huán)，屬性都會(huì)被對(duì)象的屬性的名字（一個(gè)字符串）填充，直到所有的對(duì)象屬性遍歷完才會(huì)返回。返回的屬性包括對(duì)象的使實(shí)例屬性和對(duì)象從原型鏈基礎(chǔ)來(lái)的屬性。
想要提高循環(huán)性能，第一步選用哪種循環(huán)。在這四個(gè)循環(huán)里面，for in循環(huán)執(zhí)行的速度都比其他三個(gè)循環(huán)要慢。
比較 for 和 while大部分情況下我們都不會(huì)采用for in循環(huán)，但是其他的循環(huán)類型性能都相當(dāng)，難以確定哪種循環(huán)執(zhí)行速度更快。選擇循環(huán)類型應(yīng)該基于需求而不是性能。
可以通過(guò)設(shè)計(jì)for和while循環(huán)來(lái)完成特定動(dòng)作的重復(fù)性操作。從3個(gè)目標(biāo)來(lái)分析如何正確的選用for和while循環(huán)。
語(yǔ)義角度比較
for和while循環(huán)可以按照下面的模式來(lái)進(jìn)行互相的轉(zhuǎn)換。
Javascriptfor (initialization; test; increment) // 聲明并且初始化循環(huán)變量，循環(huán)條件，遞增循環(huán)變量
statements // 可執(zhí)行的循環(huán)語(yǔ)句
相當(dāng)于：
Javascriptinitialization // 聲明并且初始化循環(huán)變量
while (test) { // 循環(huán)條件
statements // 可執(zhí)行的循環(huán)語(yǔ)句
increment // 遞增循環(huán)變量
}
for循環(huán)是以循環(huán)變量的變化來(lái)控制循環(huán)進(jìn)程的，即for循環(huán)流程是預(yù)先計(jì)劃好的，雖然中途可能會(huì)因存在異常情況或特別情況而退出循環(huán)，但是循環(huán)的規(guī)律是有章可循的。這樣的話就方便預(yù)知循環(huán)的次數(shù)和每次循環(huán)的狀態(tài)信息等等。
while循環(huán)根據(jù)特定條件來(lái)決定循環(huán)操作，由于條件是動(dòng)態(tài)的，無(wú)法預(yù)知條件幾時(shí)是true或者false，因此該循環(huán)操作就具有很大的不確定性，每一次循環(huán)時(shí)都不知道下一次循環(huán)狀態(tài)如何，只能通過(guò)條件的變化來(lái)確定。
所以for循環(huán)通常用于有規(guī)律的重復(fù)操作中。while循環(huán)通常用于特定條件的重復(fù)操作，以及依據(jù)特定事件控制的循環(huán)等操作。
思維模式角度比較
for循環(huán)和while循環(huán)在思維模式上也存在差異。
for循環(huán)中，將循環(huán)的三個(gè)要素（起始值、終止值和步長(zhǎng)）定義為3個(gè)基本表達(dá)式作為結(jié)構(gòu)語(yǔ)法的一部分固定在for語(yǔ)句里面，使用小括號(hào);進(jìn)行語(yǔ)法分隔，這樣有利于js的進(jìn)行快速預(yù)編譯。
在閱讀到for循環(huán)結(jié)構(gòu)的第一行代碼的時(shí)候，就能夠獲取到整個(gè)循環(huán)結(jié)構(gòu)的控制方式，然后再根據(jù)上面的表達(dá)式來(lái)決定是否執(zhí)行循環(huán)體內(nèi)的語(yǔ)句。
Javascriptfor (var i = 0; i < 10; i++) {
alert(i);
};
可以按照下面的邏輯思維進(jìn)行總結(jié)：
執(zhí)行循環(huán)條件：1 < i < 10、步長(zhǎng)為i++。
執(zhí)行循環(huán)語(yǔ)句：alert(i);。
這種把循環(huán)操作的環(huán)境條件和循環(huán)操作語(yǔ)句分離開的設(shè)計(jì)能夠提高程序的執(zhí)行效率，同時(shí)能夠避免因?yàn)榘蜒h(huán)條件與循環(huán)語(yǔ)句混合在一起而造成的錯(cuò)誤。
在for循環(huán)的特異性導(dǎo)致在執(zhí)行復(fù)雜的條件時(shí)效率會(huì)大大的降低。相對(duì)而言，while循環(huán)就比較適合運(yùn)http://naotu.baidu.com/viewshare.html?shareId=auuohz8fwm8k的條件，它將復(fù)雜的循環(huán)控制放在循環(huán)體內(nèi)執(zhí)行，而while語(yǔ)句自身僅用于測(cè)試循環(huán)條件，這樣就避免了結(jié)構(gòu)的分隔和邏輯的跳躍。
Javascriptvar a = true, b = 1;
while (a) { // 在循環(huán)體內(nèi)間接計(jì)算迭代
if (9 < b) {
a = false;
}
alert(b);
b++;
}
從達(dá)到目標(biāo)的角度比較
有一些循環(huán)的循環(huán)次數(shù)在循環(huán)之前就可以先預(yù)測(cè)，如計(jì)算1到100的數(shù)字和。而有一些循環(huán)具有不可預(yù)測(cè)性們無(wú)法事前確定循環(huán)的次數(shù)，甚至無(wú)法預(yù)知循環(huán)操作的趨向，這些構(gòu)成了在設(shè)計(jì)循環(huán)結(jié)構(gòu)時(shí)候必須考慮的達(dá)成目標(biāo)需要解決的問(wèn)題，即使是相同的操作，如果達(dá)到的目標(biāo)的角度不同，可能重復(fù)了操作的設(shè)計(jì)也就不同。
使用遞歸許多復(fù)雜的算法都是通過(guò)比較容易實(shí)現(xiàn)的遞歸實(shí)現(xiàn)。如階乘函數(shù)。
Javascriptfunction factorial(n) {
if (0 === n) {
return 1;
} else {
return n * factorial(n - 1);
}
};
遞歸函數(shù)的問(wèn)題：錯(cuò)誤定義或者缺少終結(jié)條件會(huì)導(dǎo)致函數(shù)運(yùn)行時(shí)間過(guò)長(zhǎng)，使瀏覽器出現(xiàn)假死現(xiàn)象。遞歸函數(shù)還會(huì)受到瀏覽器調(diào)用棧的大小的限制。
在ES6中js擁有了尾遞歸優(yōu)化，詳情請(qǐng)看迎接ECMAScript 6, 使用尾遞歸
使用迭代可以通過(guò)遞歸函數(shù)實(shí)現(xiàn)的算法都可以通過(guò)迭代來(lái)實(shí)現(xiàn)。迭代算法通常包括幾個(gè)不同的循環(huán)，分別對(duì)應(yīng)算法過(guò)程中的不同方面。雖然迭代也會(huì)導(dǎo)致性能問(wèn)題，但是使用優(yōu)化的循環(huán)就可以代替長(zhǎng)時(shí)間運(yùn)行的遞歸函數(shù)，可以提高新能，因?yàn)檫\(yùn)行一個(gè)循環(huán)比反復(fù)調(diào)用一個(gè)函數(shù)的開銷要小。
使用迭代來(lái)實(shí)現(xiàn)合并排序算法：
Javascriptfunction merge(left, right) {
var result = [];
while (left.length > 0 && right.length > 0) {
if (left[0] < right[0]) {
result.push(left.shift());
} else {
result.push(right.shift());
}
}
return result.concat(left).concat(right);
};
function mergeSort(items) {
if (items.length === 1) {
return items;
}
var work = [];
for (var i = 0, len = items.length; i < len; i++) {
work.push(items[i]);
};
work.push([]);
for (var lim = len; lim > 1; lim = (lim + 1) / 2) {
for (var j = 0, k = 0; k < lim; j++, k += 2) {
work[j] = merge(work[k], work[k + 1]);
}
work[j] = [];
};
return work[0];
};
優(yōu)化循環(huán)結(jié)構(gòu)
循環(huán)結(jié)構(gòu)是最浪費(fèi)資源的一種流程。循環(huán)結(jié)構(gòu)中的一點(diǎn)小的損耗都會(huì)被放大，從而影響程序運(yùn)行的效率。
優(yōu)化結(jié)構(gòu)
循環(huán)結(jié)構(gòu)常常是與分支結(jié)構(gòu)混合在一起，所以如何嵌套也就非常的講究。例如，設(shè)計(jì)一個(gè)循環(huán)結(jié)構(gòu)，結(jié)構(gòu)內(nèi)的循環(huán)語(yǔ)句只有在特定的條件下才被執(zhí)行，
Javascriptvar a = true;
for (var i = 0; i < 10; i++) {
if (a) {} //條件判斷
};
在這個(gè)循環(huán)里面，if語(yǔ)句會(huì)被反復(fù)的運(yùn)行，如果這個(gè)if語(yǔ)句是一個(gè)固定的條件檢測(cè)表達(dá)式，如果if的條件不會(huì)受到循環(huán)結(jié)構(gòu)的影響，那么用下面這種結(jié)構(gòu)設(shè)計(jì)會(huì)更加復(fù)合:
Javascriptif (a) {
for (var i = 0; i < 10; i++) {
};
}
但是if條件表達(dá)式受循環(huán)結(jié)構(gòu)的制約，那就不能使用這種結(jié)構(gòu)嵌套了。
避免不必要的重復(fù)操作
在循環(huán)里面經(jīng)常會(huì)存在一些不必要的損耗。下面一個(gè)例子：
Javascriptfor (var i = 0; i < 10; i++) {
var a= [1,2,3,4,5,6,7,8,9,10];
alert(a[i]);
};
在這個(gè)循環(huán)里面，每循環(huán)一次就會(huì)在定義一個(gè)新的數(shù)組，很明顯這是一個(gè)重復(fù)的操作，把數(shù)組放到循環(huán)體外面會(huì)更加的高效：
Javascriptvar a= [1,2,3,4,5,6,7,8,9,10];
for (var i = 0; i < 10; i++) {
alert(a[i]);
};
妥善定義循環(huán)變量
對(duì)于for循環(huán)來(lái)說(shuō)，它主要利用循環(huán)變量來(lái)控制整個(gè)結(jié)構(gòu)的運(yùn)行。當(dāng)循環(huán)變量?jī)H用于結(jié)構(gòu)內(nèi)部的時(shí)候，不妨在for語(yǔ)句外面定義循環(huán)的變量，這樣也可以優(yōu)化循環(huán)結(jié)構(gòu)。
最后，如果文章有什么錯(cuò)誤和疑問(wèn)的地方，請(qǐng)指出。與sf各位共勉！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91499.html
摘要：設(shè)計(jì)模式是以面向?qū)ο缶幊虨榛A(chǔ)的，的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e，這讓我一開始接觸的時(shí)候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設(shè)計(jì)模式必須要先搞懂面向?qū)ο缶幊蹋駝t只會(huì)讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學(xué)習(xí)總結(jié)。知識(shí)只有分享才有存在的意義。 是時(shí)候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...
摘要：前端基礎(chǔ)進(jìn)階正是圍繞這條線索慢慢展開，而事件循環(huán)機(jī)制，則是這條線索的最關(guān)鍵的知識(shí)點(diǎn)。特別是中正式加入了對(duì)象之后，對(duì)于新標(biāo)準(zhǔn)中事件循環(huán)機(jī)制的理解就變得更加重要。之后全局上下文進(jìn)入函數(shù)調(diào)用棧。 showImg(https://segmentfault.com/img/remote/1460000008811705); JavaScript的學(xué)習(xí)零散而龐雜，因此很多時(shí)候我們學(xué)到了一些東西，但...
摘要：從最開始的到封裝后的都在試圖解決異步編程過(guò)程中的問(wèn)題。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。寫一個(gè)符合規(guī)范并可配合使用的寫一個(gè)符合規(guī)范并可配合使用的理解的工作原理采用回調(diào)函數(shù)來(lái)處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸 問(wèn)題描述 在開發(fā)過(guò)程中，遇到一個(gè)需求：在系統(tǒng)初始化時(shí)通過(guò)http獲取一個(gè)第三方服務(wù)器端的列表，第三方服務(wù)器提供了一個(gè)接口，可通過(guò)...
摘要：我對(duì)知乎前端相關(guān)問(wèn)題的十問(wèn)十答張?chǎng)涡駨場(chǎng)涡翊笊駥?duì)知乎上經(jīng)典的個(gè)前端問(wèn)題的回答。作者對(duì)如何避免常見(jiàn)的錯(cuò)誤，難以發(fā)現(xiàn)的問(wèn)題，以及性能問(wèn)題和不好的實(shí)踐給出了相應(yīng)的建議。但并不是本身有問(wèn)題，被標(biāo)準(zhǔn)定義的是極好的。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，可以揍我。 不論你是javascript新手還是老...
摘要：記筆記很有必要相信我，大多數(shù)人的記憶力是不可靠的。解決方式遍歷的順序不確定因?yàn)閷?duì)象不是有序的。出租過(guò)程中趕走了某些房客。具體來(lái)說(shuō)就是說(shuō)存在某個(gè)空間沒(méi)有元素的數(shù)組便是稀疏數(shù)組怎么處理將會(huì)確認(rèn)這個(gè)位置有沒(méi)有元素存在。同檢查元素是否存在 記筆記很有必要——相信我，大多數(shù)人的記憶力是不可靠的。 ——《與時(shí)間做朋友》李笑來(lái) 數(shù)組 值的有序集合 弱類型 數(shù)組中的元素可以是各種類型的 ...
閱讀 919·2021-11-25 09:43
閱讀 1290·2021-11-17 09:33
閱讀 3008·2019-08-30 15:44
閱讀 3309·2019-08-29 17:16
閱讀 476·2019-08-28 18:20
閱讀 1632·2019-08-26 13:54
閱讀 552·2019-08-26 12:14
閱讀 2172·2019-08-26 12:14
