javascript for循環(huán)從入門(mén)到偏門(mén)(效率優(yōu)化+奇特用法)
代碼如下:
//例一for(var i=1;i<=10;i++) {
alert(i);
}
這段代碼太簡(jiǎn)單了,我都不好意思拿出手。代碼的執(zhí)行結(jié)果是依次彈出1到10,PS:在早期的IE如IE6中,你把10改成10000,就能讓用戶(hù)一直點(diǎn)確定什么也不能干了哈哈——不要說(shuō)是我出的主意。
由于這是一篇基礎(chǔ)課程,所以我們回歸正題來(lái)詳細(xì)分析一下這段代碼吧。
for循環(huán)的結(jié)構(gòu)都是類(lèi)似的,任意一個(gè)for循環(huán)都是這樣的:
for(開(kāi)始前;循環(huán)進(jìn)行的條件;循環(huán)一次結(jié)束后做什么) {
// 主體代碼
}如果仔細(xì)看一下for循環(huán),就會(huì)發(fā)現(xiàn)他的一個(gè)萬(wàn)年不變的特點(diǎn):for后的()中,永遠(yuǎn)是有且只有兩個(gè);(英文分號(hào))!
上面的結(jié)構(gòu)代碼已經(jīng)說(shuō)明,分號(hào)的作用是用來(lái)分割for循環(huán)的執(zhí)行條件。這些條件都是缺一不可的,可以為空,但位置必須留著,所以必須有兩個(gè);。
開(kāi)始前:一般用來(lái)聲明一些變量,如例一的var i=0,就像準(zhǔn)備了一個(gè)簍子,里面暫時(shí)沒(méi)有任何東西。工具的數(shù)量不限,你可以在for循環(huán)開(kāi)始前聲明100個(gè)變量,除了不好看之外,也沒(méi)什么問(wèn)題。
循環(huán)進(jìn)行的條件:如第1個(gè)例子中的i<10,就是條件了,只有條件為真時(shí),for循環(huán)才會(huì)進(jìn)行下去,例一的條件可以看成if(i<10){//do...}??梢韵胂蟪珊t子最多裝10個(gè)東西,如果多了10個(gè),就不裝了,退出循環(huán)。
循環(huán)一次后做什么:例一中只是簡(jiǎn)單的給簍子里面加入一個(gè)東西,其實(shí)你還可以做很多事,畢竟循環(huán)一次不容易。
特別說(shuō)明:for循環(huán)“開(kāi)始前”的代碼只會(huì)執(zhí)行一次,不會(huì)影響整個(gè)for循環(huán)的效率,而“進(jìn)行條件”與“一次結(jié)束后做什么”,你循環(huán)次數(shù)有多少,他就執(zhí)行多少次,所以他們經(jīng)常成為for循環(huán)性能瓶頸。
如果說(shuō)for循環(huán)第1個(gè);前是開(kāi)始前做的事,那我可不可以把開(kāi)始前的事情拿到for循環(huán)前面來(lái)呢?只要在開(kāi)始前定義就行了嘛。答案是可以:
//例2
var i=0;
for(;i<10;i++) {
alert(i);
}
但要注意,雖然for后面的括號(hào)里“開(kāi)始前”已經(jīng)沒(méi)有內(nèi)容了,但;(分號(hào))還在!而且必須在!
同理,既然第2個(gè);后面的代碼是一次結(jié)束后執(zhí)行的,那我也可以把要執(zhí)行的放在for循環(huán)后啊。如下:
//例子3
var i=0;
for(;i<10;) {
alert(i);
i++
}
但依然,萬(wàn)惡的兩個(gè);還是必須存在。
上面也就是兩個(gè)基礎(chǔ)的“偏門(mén)用法”了。。。不要說(shuō)我坑爹
不過(guò)你也看到了,執(zhí)行循環(huán)的條件,是不能單獨(dú)提出來(lái)的,必須放在兩個(gè)分號(hào)之間!前后夾擊!
二,for循環(huán)的偏門(mén)寫(xiě)法
1,我們把例一的代碼變成:
var i=0;
for(;i<10;alert(i++)) ;怎么樣?這才是坑爹啊,{}都沒(méi)有了!不過(guò)完全正確啊!
不過(guò)這種寫(xiě)法太過(guò)逆天,第2個(gè);后面的代碼最好不要多,一多起來(lái)你就不能掌握i的值了,而且因?yàn)榇a混亂可能導(dǎo)致人為的語(yǔ)法錯(cuò)誤。
適用環(huán)境:
簡(jiǎn)單的for循環(huán)操作,比如造一個(gè)元素依次是從1到1000的數(shù)字的這么一個(gè)數(shù)組,就用這招,酷就一個(gè)字。
2,深入分析
通過(guò)前面的例子我們知道,其實(shí)for循環(huán)的執(zhí)行條件就是判斷一個(gè)布爾值,就像這樣:
var t = true;
if(t == true) {
alert('啊!')
}
這個(gè)if語(yǔ)句沒(méi)人看不懂吧,其實(shí)還可以這樣寫(xiě):
var t = true;
if(t) {
alert('啊!')
}
效果是一樣的,如果for循環(huán)的進(jìn)行條件就是判斷布爾值,那下面這種寫(xiě)法理解起來(lái)就不困難了:
var i = 10;
for(;i;i--){
alert(i);
}
這段代碼的效果是依次彈出10到1(和例一反過(guò)來(lái)了)。其中for循環(huán)的進(jìn)行條件簡(jiǎn)單的要死,就是個(gè)i.但根據(jù)我們前面的解說(shuō),其實(shí)條件是這樣的:
if(i) {
//do
}
也就是i為真的情況,就繼續(xù)執(zhí)行循環(huán)。這個(gè)for循環(huán)的i什么時(shí)候?yàn)檎婺?,只要i不等于0,空字符串,undefined,null,false時(shí),就都為真。
所以此for循環(huán)一直會(huì)執(zhí)行,直到i=0,就結(jié)束了。但我們代碼中不會(huì)看到0 ,迷惑新手,裝B利器。
3,又一個(gè)
先看代碼,來(lái)自園友snandy:
var ary = ["jack","tom","lily","andy"];
for(var i=0,a;a=ary[i++];){
console.log(a);
}
依然是注意看for循環(huán)的進(jìn)行條件:a=ary[i++]。特別注意這里是=而不是==,要是==的話(huà)循環(huán)就沒(méi)法進(jìn)行了。
這個(gè)條件判斷很扯,我也比較暈。類(lèi)似于:
if(a=b) {...} //注意是=!
此時(shí)如果b是false,那就會(huì)返回false了。
回到上面的例子中,如果i++加出了頭,那ary[i++]就是false值了(null,undefined都算),所以條件就成了false,所以循環(huán)就斷了。
這個(gè)例子局限很大,snandy也提到了,比如你數(shù)組中就是有個(gè)0,那也可能會(huì)導(dǎo)致循環(huán)終結(jié)。
4,jQuery的一個(gè)寫(xiě)法
function sibling( elem ) {
var r = [],
n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}
return r;
}
這是從jquery里提取的獲得兄弟節(jié)點(diǎn)的辦法,他有一個(gè)奇特的for循環(huán)。循環(huán)進(jìn)行的條件是判斷n是否為真。由于n一直是一個(gè)html節(jié)點(diǎn),所以一直為真。而每次循環(huán)結(jié)束后都會(huì)把n的下一個(gè)節(jié)點(diǎn)賦給n,而當(dāng)n的下一個(gè)節(jié)點(diǎn)沒(méi)有時(shí),n就成了false,終結(jié)循環(huán)。
小結(jié):
從上面所有的例子可以看到,任他千奇百怪的for循環(huán),都離不開(kāi)兩個(gè);。大家想看懂一個(gè)for循環(huán)的原理,直接以;為界線(xiàn)分割for循環(huán)即可,一目了然。
三,for循環(huán)的效率優(yōu)化
1,緩存變量
這也是最常用的效率優(yōu)化辦法:
var arr =[1,2,23,...,1000];
for(var i=0,l = arr.length;i<l;i++) {
//
}
由于執(zhí)行條件每次循環(huán)都要判斷,所以如果每次循環(huán)都從arr中讀取length的話(huà),無(wú)疑很浪費(fèi)而且必然增加計(jì)算次數(shù),造成效率浪費(fèi)。
2,倒序法
比如一個(gè)數(shù)組有1000個(gè)元素,如果不考慮提取順序,那么可以倒序循環(huán):
var arr =[1,2,23,...,1000];
var i = arr.length;
for(;i>0;i--){
//alert(i);
}
為什么倒序會(huì)比順序效率快?沒(méi)有科學(xué)道理?。∑鋵?shí)只是因?yàn)榈剐蚩梢陨儆靡粋€(gè)變量(對(duì)比下上一個(gè)例子吧),除開(kāi)這點(diǎn),兩者沒(méi)有速度差別。
3,注意跳出
不進(jìn)行不必要的操作,這是基本邏輯。如有1000個(gè)li里面,有一個(gè)li上有個(gè)特殊的className,我們要找出這個(gè)li。那么,由于已經(jīng)確定只有一個(gè)這樣的li,我們找到這個(gè)li就應(yīng)該馬上跳出,break,下面的循環(huán)就沒(méi)必要進(jìn)行了。這樣一來(lái),由于li有999/1000的幾率不是最后一個(gè),我們肯定能節(jié)約不少計(jì)算。
其他情況請(qǐng)舉一反三。
4,使用偏門(mén)用法
上面我介紹的偏門(mén)用法不只是寫(xiě)出來(lái)好看的,大部分都有節(jié)約變量節(jié)約計(jì)算的效果,能用就用,既酷又有效,何樂(lè)而不為呢?
----------------------------總結(jié)--------------------------------
我喜歡Javascript的靈活,不僅僅是因?yàn)榭梢杂脕?lái)裝酷。希望在博客園學(xué)到更多的JS知識(shí),大牛們的文章我經(jīng)???,收益良多。下面是一些我找到的在園子里的牛人,不全,沒(méi)有列出來(lái)者不要詛咒我。
cloudgamer,司徒正美,湯姆大叔,snandy以及其他太低調(diào)的高手。想找他們的博客直接搜索吧。
PS:實(shí)在是喜歡博客園的插入代碼功能,以后涉及到大量代碼的文章都直接發(fā)博客園吧。
不要嘗試下面的代碼:
var arr =[1,2,23,1000];
for(var i=0,l = arr.length;i<l;) {
if(arr[i]>10000) {
i++;
}
}
- javascript教程:關(guān)于if簡(jiǎn)寫(xiě)語(yǔ)句優(yōu)化的方法
- js中if語(yǔ)句的幾種優(yōu)化代碼寫(xiě)法
- nodejs的10個(gè)性能優(yōu)化技巧
- JavaScript性能優(yōu)化之小知識(shí)總結(jié)
- js性能優(yōu)化 如何更快速加載你的JavaScript頁(yè)面
- JavaScript也談內(nèi)存優(yōu)化
- JavaScript定時(shí)器和優(yōu)化的取消定時(shí)器方法
- JS對(duì)img標(biāo)簽進(jìn)行優(yōu)化使用onerror顯示默認(rèn)圖像
- Uglifyjs(JS代碼優(yōu)化工具)入門(mén) 安裝使用
- 深入探究JavaScript中for循環(huán)的效率問(wèn)題及相關(guān)優(yōu)化
- js 優(yōu)化次數(shù)過(guò)多的循環(huán) 考慮到性能問(wèn)題
- 整理AngularJS框架使用過(guò)程當(dāng)中的一些性能優(yōu)化要點(diǎn)
- javascript定時(shí)器取消定時(shí)器及優(yōu)化方法
- JavaScript中對(duì)循環(huán)語(yǔ)句的優(yōu)化技巧深入探討
- JS代碼優(yōu)化技巧之通俗版(減少js體積)
- angularjs的一些優(yōu)化小技巧
- Extjs優(yōu)化(二)Form表單提交通用實(shí)現(xiàn)
- JS代碼優(yōu)化的8點(diǎn)建議
相關(guān)文章
JavaScript 瀏覽器兼容性總結(jié)及常用瀏覽器兼容性分析
本文是腳本之家小編日常整理些關(guān)于js兼容性問(wèn)題,及IE與Firefox等常用瀏覽器的兼容性分析,對(duì)js瀏覽器兼容性相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03淺談js構(gòu)造函數(shù)的方法與原型prototype
下面小編就為大家?guī)?lái)一篇淺談js構(gòu)造函數(shù)的方法與原型prototype。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07javascript 大中小字體顯示實(shí)現(xiàn)代碼
有時(shí)候頁(yè)面中的正文一般都加上了字體大中小控制代碼,方便瀏覽者閱讀。2010-09-09js動(dòng)態(tài)移動(dòng)滾動(dòng)條至底部示例代碼
這篇文章主要介紹了使用js動(dòng)態(tài)移動(dòng)滾動(dòng)條至底部,需要的朋友可以參考下2014-04-04淺析JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()
本文主要對(duì)JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()的作用進(jìn)行簡(jiǎn)要解析,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12js實(shí)現(xiàn)按座位號(hào)抽獎(jiǎng)
本文主要介紹了js實(shí)現(xiàn)按座位號(hào)抽獎(jiǎng)的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04JavaScript中數(shù)組雙重去重的方法總結(jié)
這篇文章主要為大家學(xué)習(xí)介紹了JavaScript中數(shù)組雙重去重的幾個(gè)常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07JavaScript開(kāi)發(fā)人員的10個(gè)關(guān)鍵習(xí)慣小結(jié)
還在一味沒(méi)有目的的編寫(xiě)JavaScript代碼嗎?那么你就OUT了!讓我們一起來(lái)看看小編為大家搜羅的JavaScript開(kāi)發(fā)人員應(yīng)該具備的十大關(guān)鍵習(xí)慣吧2014-12-12