Javascript中for循環(huán)語(yǔ)句的幾種寫(xiě)法總結(jié)對(duì)比
前言
for循環(huán)我們?cè)趈s遍歷對(duì)象或數(shù)組時(shí)都會(huì)有用到了,今天我們一起來(lái)看一些關(guān)于for循環(huán)的一些使用例子了,具體的操作細(xì)節(jié)如下文介紹。
一般寫(xiě)法如下:
for(var i = 0;i< arr.length;i++) { var a = arr[i]; //... }
這就是一個(gè)常見(jiàn)的,正序循環(huán)的for循環(huán)。這樣寫(xiě)的缺點(diǎn)大家都明白:每次都從arr里取length與i來(lái)對(duì)比,浪費(fèi)性能(而且,要是arr的長(zhǎng)度是動(dòng)態(tài)變化的,就會(huì)出現(xiàn)死循環(huán))。改進(jìn)這個(gè)循環(huán)的辦法是用變量保存arr.length
:
for(var i = 0, al = arr.length;i< al;i++) { var a = arr[i]; //... }
這樣比第一種可以略微提升點(diǎn)性能,要是數(shù)組長(zhǎng),可以提升更多。
不過(guò)這樣寫(xiě)就多了個(gè)變量al,且這個(gè)變量只在用來(lái)與i對(duì)比的時(shí)候有用,看著有點(diǎn)雞肋。
如果循環(huán)順序?qū)δ悴恢匾悄憧梢試L試倒序循環(huán):
for(var i = arr.length-1;i > -1;i--) { var a = arr[i]; //... }
這樣一來(lái)變量少些,且還緩存過(guò)arr長(zhǎng)度,性能也不錯(cuò)。但這里的代碼寫(xiě)得有點(diǎn)拙劣(我故意的),首先是i = arr.length-1
(居然要-1,靠),然后是循環(huán)繼續(xù)執(zhí)行的條件i > -1,都讓有潔癖的人無(wú)法忍受。
下面是我常用的倒序for循環(huán)寫(xiě)法:
for(var i = arr.length;i--;) { var a = arr[i]; //... }
這已經(jīng)非常精簡(jiǎn)了。原理需要理解一下:for循環(huán)繼續(xù)執(zhí)行的條件,是;;之間的這個(gè)判斷要為真,而這里的i–,在第一次循環(huán)進(jìn)來(lái)的時(shí)候,i=arr.length
,i–值不變(為什么不變?因?yàn)橐趂or循環(huán)體里面,才會(huì)發(fā)現(xiàn)i變了);當(dāng)i=1時(shí),i- -還是1,但進(jìn)入循環(huán)體后,就是0了,所以可以正常執(zhí)行最后一次循環(huán);當(dāng)i=0時(shí),i–還是0,而0已經(jīng)不為真了,所以循環(huán)就不會(huì)繼續(xù)執(zhí)行了。
大家注意到上面的所有代碼的for循環(huán)體里,都有個(gè)var a = arr[i]
,用來(lái)取出當(dāng)前循環(huán)到的數(shù)組項(xiàng)。這實(shí)際上也是種浪費(fèi),且jsLint等會(huì)告訴你:不要在循環(huán)里聲明變量。。。
倒序的for可以精簡(jiǎn)至斯,但我就是要正序,而且要效率高,變量少,怎么辦?
如下:
for(var i = 0, a;a = arr[i++];) { //... }
這種寫(xiě)法好處在于:幾乎不可避免的arr.length
不見(jiàn)了,前面說(shuō)的取出當(dāng)前循環(huán)到的數(shù)組項(xiàng)的那一句也不見(jiàn)了。
原理:
a = arr[i++]
,在這里作為循環(huán)能執(zhí)行的條件,注意這里只有一個(gè)=號(hào),所以這不是判斷句,是賦值語(yǔ)句,就是把arr[i++]
賦給a,然后判斷a是不是真值。i++與i–的原理類型我就不說(shuō)了,只說(shuō)當(dāng)i++已經(jīng)超過(guò)數(shù)組的長(zhǎng)度時(shí),循環(huán)肯定要停止才行,而這里真的就停止了,為什么?因?yàn)?code>a=arr[i++] ,如果取到了超出數(shù)組本身長(zhǎng)度的項(xiàng),只會(huì)取得一個(gè)undefined,而undefined是假值,循環(huán)條件就判斷失敗了。
當(dāng)然,這樣寫(xiě)的缺點(diǎn)也很明顯:
1,當(dāng)arr的長(zhǎng)度動(dòng)態(tài)變化時(shí),依然會(huì)產(chǎn)生死循環(huán)————因?yàn)槲覀儚膩?lái)沒(méi)緩存過(guò)arr.length呀。
2,如果循環(huán)的是一個(gè)數(shù)字?jǐn)?shù)組,當(dāng)取出的項(xiàng)(即a的值)為0時(shí),就會(huì)中止循環(huán)(因?yàn)?是假值)。
3,當(dāng)數(shù)組中某一項(xiàng)是假值時(shí)(包括空字符串,0,null,undefined),同樣會(huì)中止循環(huán)
所以大家用這種寫(xiě)法時(shí),最好排除掉上面的情況再用。
這個(gè)原理同樣可以用在倒序循環(huán)上。
最后我要忠告大家?guī)拙洌?/strong>
- 代碼精簡(jiǎn)不等于效率高!
- 不要為了故意精簡(jiǎn)代碼而喪失性能
順帶說(shuō)幾點(diǎn)提高for循環(huán)性能的要點(diǎn):
1,適時(shí)break!不需要遍歷全部的就要加跳出條件!
2,不要在for循環(huán)體里聲明變量(建議一次var,多次賦值)
2,數(shù)組長(zhǎng)度緩存,盡量少變量
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如有疑問(wèn)大家可以留言交流。
- javascript 循環(huán)語(yǔ)句 while、do-while、for-in、for用法區(qū)別
- js使用for循環(huán)及if語(yǔ)句判斷多個(gè)一樣的name
- javascript中的循環(huán)語(yǔ)句for語(yǔ)句深入理解
- 用循環(huán)或if語(yǔ)句從json中取數(shù)據(jù)示例
- JavaScript中對(duì)循環(huán)語(yǔ)句的優(yōu)化技巧深入探討
- JavaScript for循環(huán) if判斷語(yǔ)句(學(xué)習(xí)筆記)
- 簡(jiǎn)單學(xué)習(xí)JavaScript中的for語(yǔ)句循環(huán)結(jié)構(gòu)
- 詳解JavaScript中循環(huán)控制語(yǔ)句的用法
- 詳細(xì)談?wù)凧avaScript中循環(huán)之間的差異
相關(guān)文章
canvas實(shí)現(xiàn)繪制吃豆魚(yú)效果
本篇文章主要分享了canvas實(shí)現(xiàn)繪制吃豆魚(yú)效果的示例代碼,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01微信小程序MoxB實(shí)現(xiàn)全局狀態(tài)管理流程詳解
這篇文章主要介紹了微信小程序使用MoxB實(shí)現(xiàn)全局狀態(tài)管理方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11echarts多條折線圖動(dòng)態(tài)分層的實(shí)現(xiàn)方法
這篇文章主要介紹了echarts多條折線圖動(dòng)態(tài)分層的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁(yè)時(shí)鐘的方法
這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制網(wǎng)頁(yè)時(shí)鐘的方法,涉及html5圖形繪制的基礎(chǔ)技巧,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05JS實(shí)現(xiàn)仿新浪微博發(fā)布內(nèi)容為空時(shí)提示功能代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿新浪微博發(fā)布內(nèi)容為空時(shí)提示功能,2015-08-08JS實(shí)現(xiàn)簡(jiǎn)易留言板增刪功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易留言板增刪功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02微信小程序?qū)W習(xí)總結(jié)(四)事件與冒泡實(shí)例分析
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)(四)事件與冒泡,結(jié)合實(shí)例形式分析了微信小程序事件、冒泡、數(shù)據(jù)獲取相關(guān)機(jī)制、原理與操作注意事項(xiàng),需要的朋友可以參考下2020-06-06IE6/7/8/9不支持exec的簡(jiǎn)寫(xiě)方式
Firefox/Safari/Chrome/Opera瀏覽器中使用exec方法時(shí)可以去掉“exec”用 “正則直接量+()” 方式使用2011-05-05npm安裝依賴時(shí)出現(xiàn)Peer Dependencies沖突報(bào)錯(cuò)解決分析
這篇文章主要為大家介紹了npm安裝依賴時(shí)出現(xiàn)Peer Dependencies沖突報(bào)錯(cuò)解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09微信小程序引入外部icon(阿里巴巴矢量圖標(biāo))的全過(guò)程
在小程序中,有默認(rèn)的圖標(biāo)icon組件,但你會(huì)發(fā)現(xiàn)它的圖標(biāo)樣式很少,可能很多時(shí)候并不能滿足我們的需求,所以這篇文章主要給大家介紹了關(guān)于微信小程序引入外部icon(阿里巴巴矢量圖標(biāo))的相關(guān)資料,需要的朋友可以參考下2022-09-09