詳解Javascript基礎(chǔ)之循環(huán)
循環(huán)
for
循環(huán)是任何一門語言都會(huì)有個(gè)命令,用于反復(fù)執(zhí)行某段代碼。
例如,循環(huán)代碼塊5次:
for (let i = 0; i < 5; i++) { let text = `當(dāng)前數(shù)字為${i}` console.log(text) }
// 輸出結(jié)果:
當(dāng)前數(shù)字為0
當(dāng)前數(shù)字為1
當(dāng)前數(shù)字為2
當(dāng)前數(shù)字為3
當(dāng)前數(shù)字為4
此例中,let i = 0是聲明循環(huán)的計(jì)次變量,i < 5是循環(huán)終止條件,i++是計(jì)次變量更新步長,{}內(nèi)的所有代碼為循環(huán)體內(nèi)代碼塊。
具體流程是:計(jì)次變量進(jìn)行終止條件判斷運(yùn)算,如果結(jié)果為true,則循環(huán)體執(zhí)行,結(jié)束后進(jìn)行步長更新運(yùn)算,從而得到新的結(jié)果再次參與判斷;如果結(jié)果為false,則立刻終止循環(huán);
所以想要控制循環(huán)次數(shù),可以通常改變判斷條件實(shí)現(xiàn),如果循環(huán)條件永遠(yuǎn)為true,則就是一個(gè)死循環(huán)。
for-in
for-in循環(huán)是一種特殊循環(huán),可用于循環(huán)對(duì)象或數(shù)組(通常循環(huán)數(shù)組,使用for-of)
let o = { name: 'dapiaoliang', age: 18, sex: 'woman' } // 將對(duì)象內(nèi)的所有鍵值對(duì)循環(huán)輸出, 此時(shí)可以使用for-in for (let key in o) { let text = `當(dāng)前屬性名:${key}, 值:${o[key]}` }
// 結(jié)果(這種循環(huán)輸出順序可能會(huì)不一樣,但數(shù)量不變)
當(dāng)前屬性名:name, 值:dapiaoliang
當(dāng)前屬性名:age, 值:18
當(dāng)前屬性名:sex, 值:woman
由此可見,for-in 用于循環(huán)對(duì)象內(nèi)所有的鍵值對(duì),具體輸出順序可能會(huì)發(fā)生變化,但是每個(gè)鍵值對(duì)都會(huì)被循環(huán)一次。
for-of
for-of時(shí)一種專門用于循環(huán)數(shù)組或類似數(shù)組結(jié)構(gòu)(Iterator接口)的循環(huán)命令
let arr = ["dapiaoliang", 18, 'woman'] for (let value of arr) { let text = `當(dāng)前值是:${value}` console.log(text) }
// 結(jié)果
當(dāng)前值是:dapiaoliang
當(dāng)前值是:18
當(dāng)前值是:woman
類似for-in,可直接循環(huán)數(shù)組的每一項(xiàng)數(shù)據(jù)
while
while是for的一個(gè)變種。(不常用)
while (條件) { 循環(huán)體 }
當(dāng)條件為true,循環(huán)體就會(huì)執(zhí)行,這種循環(huán)沒有計(jì)次變量,不需要更新步長。所以條件通常需要是一個(gè)可變參數(shù),如果不是可變參數(shù),就需要在循環(huán)體內(nèi),有明確的終止條件
do-while
do-while是一種特殊的while循環(huán)(不常用)
do { 循環(huán)體 }while(條件)
當(dāng)前數(shù)字為0
當(dāng)前數(shù)字為1
當(dāng)前數(shù)字為2
當(dāng)前數(shù)字為4
看起來是將while的條件和循環(huán)體交換了位置,所以這種循環(huán)體,在第一次時(shí),是不需要進(jìn)行判斷條件就會(huì)執(zhí)行,執(zhí)行結(jié)束后,再進(jìn)行判斷,判斷結(jié)果決定下一次是否會(huì)循環(huán)
所以,do-while的條件是決定下一次是否循環(huán),而第一次永遠(yuǎn)都會(huì)執(zhí)行,所以可以理解為至少執(zhí)行一次的while循環(huán)
跳出循環(huán)
如果在循環(huán)體內(nèi)由于某些原因,需要在代碼塊內(nèi)跳出循環(huán),可以使用對(duì)應(yīng)的關(guān)鍵字。
break用于永久終止此循環(huán),continue用于終止當(dāng)前這次循環(huán)(立刻進(jìn)入下一次)
例如,跳過i = 3時(shí)情況
for (let i = 0; i < 5; i++) { if (i === 3) { continue } let text = `當(dāng)前數(shù)字為${i}` console.log(text) }
上述例子,在i=3時(shí),循環(huán)體內(nèi)判斷為真,執(zhí)行continue,那么此次后續(xù)兩行代碼不會(huì)執(zhí)行,會(huì)立刻進(jìn)入下一次循環(huán)。
for (let i = 0; i < 5; i++) { if (i === 3) { break } let text = `當(dāng)前數(shù)字為${i}` console.log(text) }
當(dāng)前數(shù)字為0
當(dāng)前數(shù)字為1
當(dāng)前數(shù)字為2
此時(shí)判斷內(nèi)是break,那么當(dāng)i=3時(shí),執(zhí)行了break,那么后續(xù)所有次數(shù)的循環(huán)都不會(huì)執(zhí)行。break會(huì)把整個(gè)循環(huán)全部關(guān)閉。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
詳解JavaScript設(shè)計(jì)模式開發(fā)中的橋接模式使用
橋接模式的適用場(chǎng)合非常廣泛,除了在事件回調(diào)函數(shù)與接口之間進(jìn)行橋接外,橋接模式也可以用于連接公開的API代碼和私用的實(shí)現(xiàn)代碼,下面我們就來詳解JavaScript設(shè)計(jì)模式開發(fā)中的橋接模式使用2016-05-05JavaScript對(duì)象創(chuàng)建及繼承原理實(shí)例解剖
本文將用實(shí)例講解一下JavaScript對(duì)象創(chuàng)建及繼承原理:JavaScript中的繼承是使用原型鏈的機(jī)制,對(duì)象創(chuàng)建使用Function構(gòu)造器,感興趣的朋友可以詳細(xì)了解下本文,或許可以幫助到你2013-02-02Javascript入門學(xué)習(xí)第二篇 js類型
上篇文章講了js中的一些概念(詞法結(jié)構(gòu)) 和 數(shù)據(jù)類型(部分)。 這章我們 繼續(xù).然后了解下js中操作數(shù)據(jù) 和 函數(shù)的 作用域。2008-07-07js實(shí)現(xiàn)鼠標(biāo)拖拽縮放div實(shí)例代碼
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖拽縮放div,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03JavaScript中的document.referrer在各種瀏覽器測(cè)試結(jié)果
這篇文章主要介紹了JavaScript中的document.referrer在各種瀏覽器測(cè)試結(jié)果,包括在多種情況下每個(gè)瀏覽器能否用document.referrer取到值,非常珍貴的測(cè)試結(jié)果,需要的朋友可以參考下2014-07-07javascript之typeof、instanceof操作符使用探討
typeof和instanceof這兩個(gè)操作符時(shí)不時(shí)就會(huì)用到,堪稱必用,這兩個(gè)操作符或許是javascript中最大的設(shè)計(jì)缺陷,因?yàn)閹缀醪豢赡軓乃麄兡抢锏玫较胍慕Y(jié)果2013-05-05用JavaScript實(shí)現(xiàn)對(duì)話框的教程
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)對(duì)話框的教程,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06JavaScript中幾個(gè)重要的屬性(this、constructor、prototype)介紹
this表示當(dāng)前對(duì)象,如果在全局作用范圍內(nèi)使用this,則指代當(dāng)前頁面對(duì)象window,prototype本質(zhì)上還是一個(gè)JavaScript對(duì)象,constructor始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)2013-05-05